.billing-plan-header {
  border-bottom: 0;
  padding-bottom: 0;

  .billing-plan-logo svg {
    height: 100px;
  }

  p {
    margin: 0;

    &:first-of-type {
      margin-top: 16px;
    }

    &:last-of-type {
      margin-bottom: 16px;
    }
  }
}

$gutter-small: $gl-spacing-scale-6;
$gutter: $gl-spacing-scale-7;
$badge-height: $gl-spacing-scale-7;

.billing-plans {
  // This color is not part of the GitLab-UI/Pajamas specifications.
  // We're using it only for marketing purposes
  $highlight-color: #6e49cb;

  margin-bottom: $gutter-small;

  > * + * {
    margin-top: $gutter-small;
  }

  .card-wrapper-has-badge {
    .card {
      @include gl-border-1;
      @include gl-border-solid;
      @include gl-rounded-top-left-none;
      @include gl-rounded-top-right-none;

      border-color: $highlight-color;
    }
  }

  .card-badge {
    @include gl-rounded-top-left-base;
    @include gl-rounded-top-right-base;
    @include gl-font-weight-bold;
    @include gl-px-5;
    @include gl-text-white;

    background-color: $highlight-color;

    // These border radii values are not defined in gitlab-ui,
    // but they are consistent with the startup-*.scss .card overrides
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;

    line-height: $badge-height;

    &-text {
      @include gl-display-block;
      @include gl-text-truncate;
    }
  }

  .card {
    @include gl-mb-0;

    &-active {
      background-color: $gray-light;
    }

    .card-body {
      .price-description {
        align-items: center;
        display: flex;
        flex-direction: row;
        color: $blue-500;
        font-size: 45px;
        font-weight: $gl-font-weight-bold;
        line-height: 1;

        .price-rebate {
          color: $blue-400;
          font-size: 20px;
          text-decoration: line-through;
        }

        .price-cut {
          text-decoration: line-through;
        }

        .conditions {
          list-style: none;
          font-size: $gl-font-size-large;
          font-weight: $gl-font-weight-bold;
          line-height: $gl-line-height;
        }
      }

      .price-conclusion {
        @include gl-font-base;
        color: $blue-500;
        font-weight: $gl-font-weight-bold;
      }
    }
  }
}

@media (min-width: $breakpoint-md) {
  .billing-plans {
    @include gl-display-flex;
    @include gl-flex-wrap;
    @include gl-justify-content-space-between;

    > * + * {
      @include gl-mt-0;
    }

    .card-wrapper {
      margin-bottom: $gutter-small;
      padding-top: $badge-height;
      width: calc(50% - #{$gutter-small} / 2);

      &-has-badge {
        @include gl-pt-0;

        .card {
          height: calc(100% - #{$badge-height});
        }
      }
    }

    .card {
      @include gl-h-full;
    }
  }
}

@media (min-width: $breakpoint-lg) {
  .billing-plans {
    flex-wrap: nowrap;

    > * + * {
      margin-left: $gutter;
    }

    .card-wrapper {
      @include gl-flex-fill-1;
      @include gl-mb-0;
      @include gl-overflow-hidden;
      @include gl-w-auto;
    }
  }
}

.subscription-table {
  .flex-grid {
    .grid-cell {
      .property-label {
        color: $gl-text-color-secondary;
      }

      .btn-help {
        color: $blue-600;
      }

      .property-value {
        color: $gl-text-color;

        &.number {
          font-size: 20px;
          line-height: 24px;
        }
      }

      .icon-wrapper {
        line-height: 16px;
        vertical-align: baseline;

        svg {
          vertical-align: middle;
        }
      }

      &.header-cell {
        font-weight: $gl-font-weight-bold;
      }

      &.no-value {
        > * {
          display: none;
        }

        @include media-breakpoint-down(sm) {
          display: none;
        }
      }
    }

    @include media-breakpoint-up(lg) {
      .header-cell {
        width: 144px;
        flex: none;
      }
    }
  }
}

.seats-table {
  /*
  * TODO
  * Remove these overrides when the ones inside of
  * app/assets/stylesheets/framework/tables.scss
  * will be removed.
  *
  * Read more about this in the comments of that file.
  */
  &.table.gl-table {
    @include gl-mb-0;
    @include gl-text-gray-500;

    tr {
      th,
      td {
        @include gl-border-b-solid;
        @include gl-border-b-1;
        @include gl-p-5;
      }

      th {
        @include gl-border-gray-200;
        @include gl-bg-transparent;
      }

      td {
        @include gl-border-gray-100;
      }
    }
  }
}
