@import '../helpers/helpers';
@import '../partials/footer_basket';
@import '../components/order-item-cc';

.basket {
  &__section {
    margin-bottom: 30px;

    &:first-child {
      padding-top: 0;
    }
  }

  &__header,
  &__main,
  &__id {
    @include make-col-ready;
  }


  &__main,
  .content,
  .right-aside {
    @include make-col(12);
  }

  .content {
    display: flex;
    flex-direction: column;
  }

  .notification-area {
    @include make-col-ready;
    @include make-col(12);
    margin-bottom: 2rem;

    @include media-breakpoint-up(md) {
      margin-bottom: 0;

      &.mobile {
        display: none;
      }
    }

    @include media-breakpoint-down(sm) {
      padding-right: 0;
      padding-left: 0;
      margin-bottom: 0;

      &.desktop {
        display: none;
      }
    }

    .notification {
      margin-bottom: 20px;
    }
  }
}

.checkout-title {
  padding-top: 10px;
  padding-bottom: 10px;

  &__title {
    text-align: left;
    font-weight: 400;
    color: $blue-dark;
  }
}

@include media-breakpoint-up(md) {
  .basket {
    .right-aside {
      @include make-col(12);
    }

    .content {
      flex: 1;
      max-width: 100%;
      padding-right: 5px;
    }
  }
}

@include media-breakpoint-up(lg) {
  .basket {
    .right-aside {
      @include make-col(4);
      padding-left: 5px;
      max-width: 325px;
    }
  }
}
