/**
 * Styles checkout page
 */
body#checkout {
  .nav-tabs-checkout {
    margin-top: 76px;
    border-top: 1px solid $gray-300;
    border-bottom: none;
    justify-content: space-between;
    li {
      position: relative;
      text-align: center;
      flex: 0 0 24%;
      max-width: 100px;
      font-weight: 500;
      text-transform: uppercase;
      @include media-breakpoint-down(xsm) {
        font-size: 12px;
        max-width: 70px;
      }
      a, span {
        padding: 0;
        border: none;
        color: $gray-800;
        .step-number {
          display: block;
          font-size: 26px;
          width: 100px;
          height: 100px;
          line-height: 100px;
          border-radius: 100%;
          border: 3px solid $black;
          margin-top: -49px;
          margin-bottom: 24px;
          background: $white;
          transition: all 0.3s ease-in-out;
          @include media-breakpoint-down(xsm) {
            width: 70px;
            height: 70px;
            line-height: 70px;
            margin-top: -34px;
            font-size: 20px;
          }
        }
      }
      a:hover, a.active {
        color: $brand-primary;
        .step-number {
          color: $brand-primary;
          border-color: $brand-primary;
        }
      }
      span.disabled {
        color: $gray-300;
        .step-number {
          color: $gray-300;
          border-color: $gray-300;
        }
      }
    }
  }
  .checkout-step {
    .payment-option:not(:first-child) {
      margin-top: 10px;
    }
    .delivery-options {
      cursor: pointer;
      .delivery-option-item {
        background: $gray-100;
        padding: 20px;
        cursor: pointer;
        * {
          cursor: pointer;
        }
        &.current {
          background: $gray-200;
        }
        .delivery-option {
          align-items: center;
        }
        .row {
          align-items: center;
        }
        .custom-control {
          margin-bottom: 0;
          padding-left: 60px;
          .custom-control-label:before, .custom-control-label:after {
            top: 50% !important;
            transform: translateY(-50%);
            left: -50px;
          }
        }
      }
    }
    .invoice-address-wrapper {
      margin-top: ($spacer * 1.5);
    }
    #conditions-to-approve {
      padding-top: 30px;
      a {
        color: $brand-primary;
        @include hover-focus-active {
          color: $black;
        }
      }
    }
  }
  .additional-information {
    font-size: $font-size-sm;
    margin-left: 2.875rem;
    margin-top: 1.25rem;
  }
  #order-summary-content {
    padding-top: 0.9375rem;
    h4.h4 {
      margin-top: 0.625rem;
      margin-bottom: 1.25rem;
      color: $black;
    }
    h4.black {
      color: $black;
    }
    h4.addresshead {
      margin-top: 0.1875rem;
    }
    .order-confirmation-table {
      padding: 1rem;
      margin-bottom: 2rem;
      background-color: #fff;
      border: 3px solid #e5e5e5;
      border-radius: 0;
    }
    .summary-selected-carrier {
      margin-bottom: 0.75rem;
      background-color: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 0;
      padding: 1rem;
    }
  }
  #gift_message, #delivery {
    max-width: 100%;
    border-color: $black;
    textarea {
      max-width: 100%;
      margin-bottom: 10px;
    }
  }
  .identity {
    a {
      color: $brand-success;
      font-weight: bold;
      @include hover-focus-active {
        color: $brand-primary;
      }
    }
  }
  .header-checkout {
    #contact-link {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      letter-spacing: $letter-spacing-xs;
      font: 400 16px/20px $font-family-base;
      a {
        color: $brand-primary;
        font: 500 30px/34px $font-family-base;
        @include hover-focus-active {
          color: $black;
        }
      }
    }
  }
}

/**
 * Styles for payment block
 */
.js-payment-binary {
  display: none;
  .accept-cgv {
    display: none;
  }
  &.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
    }
    .accept-cgv {
      display: block;
    }
  }
}