/* Checkout Page */
.subscriptions-layout-html {
  .container {
    max-width: none;
    padding-top: 40px;
  }

  .checkout-pane {
    border-bottom: 1px solid $gray-200;
    flex-grow: 1;
    flex-shrink: 0;

    @media(min-width: map-get($grid-breakpoints, lg)) {
      border-bottom: 0;
      border-right: 1px solid $border-color;
    }
  }

  .checkout {
    align-items: center;
    flex-grow: 1;
    margin-top: $gl-padding;
    max-width: 454px;

    @media(min-width: map-get($grid-breakpoints, lg)) {
      justify-content: inherit !important;
      margin-top: $gl-padding-32;
      max-width: none;
    }

    .full-width {
      max-width: 541px;
      width: 100%;
    }
  }

  .bar {
    @media(min-width: map-get($grid-breakpoints, lg)) {
      width: 400px;
    }

    .phase {
      border-bottom: 5px solid $gray-200;
      color: $gray-700;
      flex-basis: 100%;
      font-size: $gl-font-size-12;
      line-height: $gl-line-height;
      padding-bottom: $gl-padding-8;

      &.current,
      &.finished {
        border-bottom-color: $blue-400;
      }

      &.current {
        color: $gray-900;
      }
    }
  }

  .checkmark {
    color: $green-500;
    margin-top: -1px;
  }

  .card {
    margin-bottom: 0;
    min-height: 32px;
    padding: $gl-padding;
    max-width: 541px;

    @media(min-width: map-get($grid-breakpoints, lg)) {
      width: 541px;
    }
  }

  .gl-form-group,
  .combined {
    flex-grow: 1;
    max-width: 420px;

    .gl-form-input,
    .gl-form-select {
      height: 32px;
    }
  }

  .number {
    width: 50%;

    @media(min-width: map-get($grid-breakpoints, lg)) {
      max-width: 202px;
    }
  }

  .label {
    padding: 0;
    width: 50%;

    .gl-link {
      font-size: inherit;
    }
  }

  .btn {
    line-height: $gl-line-height-14;
    padding: $gl-padding-8 $gl-padding-12;
    width: 100%;

    @media(min-width: map-get($grid-breakpoints, lg)) {
      width: initial;
    }
  }

  .overview {
    line-height: $gl-line-height-20;

    .btn {
      height: 24px;
      padding: 1px 8px;
      width: 48px;

      @media(min-width: map-get($grid-breakpoints, lg)) {
        width: initial;
      }
    }
  }
}
