@import '../helpers/helpers';
@import 'my-account_your-account';
@import 'my-account_profile';
@import 'my-account_change-email';
@import 'my-account_address-details';
@import 'my-account_personal-details';
@import 'my-account_order-details';
@import 'my-account_change-password';
@import 'my-account_order-history';
@import 'my-account_new';
@import '../components/my-account/mobile-nav';

.left-aside {
  @include media-breakpoint-down(md) {
    margin-bottom: 75px;
    order: -1;
  }
}

.my-account-section {
  border: 1px solid $gray;
  padding-top: 20px;
  padding-left: 20px;

  @include media-breakpoint-down(sm) {
    padding-right: 20px;
  }

  @include media-breakpoint-up(md) {
    display: flex;
    padding-bottom: 20px;
  }

  & + & {
    margin-top: 20px;
  }

  &__content {
    font-size: 1rem;

    @include media-breakpoint-up(md) {
      // keep '%' as workaround for IE11 bug - https://github.com/philipwalton/flexbugs#flexbug-4
      flex: 1 0 0%;
      min-width: 0;
    }

    &-heading {
      @include heading-4;
      display: block;
      margin-bottom: 10px;
    }

    .col {
      @include media-breakpoint-down(sm) {
        @include make-col(12);
        margin-bottom: 20px;
      }
    }
  }

  &__actions {
    @include media-breakpoint-down(sm) {
      border-top: 1px solid $gray;
      padding: 30px 0;
      text-align: center;
    }

    @include media-breakpoint-up(md) {
      border-left: 1px solid $gray;
      padding: 0 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .btn-secondary {
      display: block;

      @include media-breakpoint-down(sm) {
        @include button-full;
      }
    }

    .btn-secondary + .btn-secondary {
      margin-top: 20px;
    }

    .btn-secondary + .rbn {
      margin-top: 35px;
    }
  }

  &__no-payment-details {
    text-align: center;
    border: 1px solid $gray;
    padding: 6.55rem 7rem;

    .fa-credit-card-front {
      font-size: 3.8rem;
      color: $gray;
      margin-bottom: 1.5rem;
    }

    p {
      font-size: .95rem;
    }

    @include media-breakpoint-down(sm) {
      padding: 3rem 20px 2rem;
    }
  }

  &__no-order-history {
    text-align: center;
    border: 1px solid $gray;
    padding: 7.25rem 7rem;

    .fa-clipboard-list {
      font-size: 3.8rem;
      color: $gray;
      margin-bottom: 1.5rem;
    }

    p {
      font-size: .95rem;
    }

    @include media-breakpoint-down(sm) {
      padding: 3rem 20px 2rem;
    }
  }

  &__no-saved-address {
    text-align: center;
    border: 1px solid $gray;
    padding: 5.8rem 7rem;

    .fa-book {
      font-size: 3.8rem;
      color: $gray;
      margin-bottom: 1.5rem;
    }

    p {
      font-size: .95rem;
      margin-bottom: 1.5rem;
    }

    @include media-breakpoint-down(sm) {
      padding: 3rem 20px 2rem;
    }
  }
}

.my-account__actions {
  margin-top: 40px;

  .btn,
  .btn-secondary {
    @include button-min160;
  }

  .btn-secondary {
    @include media-breakpoint-down(sm) {
      margin-top: 20px;
    }

    @include media-breakpoint-up(md) {
      margin-left: 30px;
    }
  }
}

.notification {
  &_reminder {
    margin: 0 15px 1.5rem;
  }

  &_link {
    color: $white;
    text-decoration: none;
    padding: 0 5px;

    &:hover {
      text-decoration: none;
      color: $white;
    }
  }
}