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

.basket {
  &__section {
    &:first-child {
      padding-top: 0;
    }
  }

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


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

  .right-aside {
    margin-top: 0;
  }

  .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 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 25px;
    padding-top: 35px;

    &__title {
      margin-bottom: 0;
    }
  }

  .voucher {
    .checkout-widget {
      margin-left: -15px;
      margin-right: -15px;

      &.checkout-voucher {
        form {
          .form-row {
            padding-right: 0;

            &__field {
              margin-left: 30px;
            }
          }
        }
      }
    }
  }

  .summary {
    .checkout-widget_order-summary {
      background-color: $gray-bg;

      .checkout-widget__details {
        flex-direction: column;

        &-flex {
          display: flex;
        }

        .checkout-widget {
          &__item {
            &-bold {
              order: -5;
              padding: 0;
            }

            &-vat {
              order: -4;
            }

            &-cc {
              order: -3;
            }

            &-delivery,
            &-deficit,
            &-free {
              order: -2;
            }

            &-charity {
              order: -1;
            }
          }


          &__details-discount {
            order: 1;
          }
        }
      }
    }

    &:not(.summary-large) {
      .checkout-widget_order-summary {
        .checkout-widget__details {
          display: flex;
        }
      }
    }

    .checkout-widget_order-summary,
    .checkout-info-wrap.checkout-widget__details {
      padding: 0;

      .checkout-widget {
        &__item {
          font-weight: 400;
          font-size: .875rem;
          padding: 10px 0;
          margin: 0;

          &:nth-child(1) {
            margin: 0;
            padding: 0;
          }

          &:nth-child(2) {
            margin: 0;
            padding-bottom: 10px;
          }

          &:nth-child(3) {
            margin: 0;
            padding-bottom: 10px;
          }

          &:last-child {
            margin: 0;
            padding: 0;
          }


          &:not(.checkout-widget__item-vat) {
            margin-top: 0;
          }

          &-value {
            font-weight: 500;
          }

          &-vat {
            margin: 0;
            padding: 0 0 10px;
            color: $warm-grey;
            font-size: .75rem;
            border-bottom: 1px solid #eee;
          }
        }

        &__detail {
          &-name {
            font-weight: 400;
            font-size: .875rem;

            .accordion__header-icon-small {
              left: 75px;
              font-size: 1rem;
            }
          }

          &-value {
            color: $gray-dark;
            font-size: .875rem;
          }
        }

        &__details {
          &-discount {
            margin-top: 10px;
          }
        }

        &__total {
          padding: 20px;
          margin-left: -20px;
          margin-right: -20px;
          font-size: 1.125rem;

          &-value {
            font-weight: 500;
          }
        }
      }
    }
  }

  .checkout-voucher {
    background-color: transparent;
    padding: 0;
    border: 0;

    .voucher__btn {
      max-width: 100%;
      height: 40px;
    }

    .form-row__error {
      font-weight: 400;
    }

    &.voucher-applied {
      background: $white;
      margin-bottom: 8px;
      height: 40px;

      .voucher-applied__inner {
        display: flex;
        align-items: center;
        justify-content: center;

        & .icon {
          display: inline-block;

          &__check {
            width: 24px;
            height: 24px;

            i {
              font-size: 24px;
              line-height: 24px;
            }
          }
        }

        & .fa-check-circle {
          font-size: 1rem;
          margin-bottom: 0;
        }

        & h5 {
          margin: 0;
          margin-top: 8px;
          font-size: .875rem;
        }
      }
    }
  }
}

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

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

  &__items {
    color: $warm-grey;
    font-weight: 500;
  }
}

@include media-breakpoint-up(sm) {
  .basket {
    .checkout-title {
      justify-content: flex-start;

      &__title {
        font-size: 1.25rem;
        min-width: 205px;
      }
    }

    .voucher {
      .checkout-widget {
        &.checkout-voucher {
          form {
            .form-row {
              &__field {
                margin-left: 15px;
              }
            }
          }
        }
      }
    }

    .checkout-widget {
      &.checkout-voucher {
        form {
          display: flex;

          .form-row {
            max-width: 100%;
            flex: 1;
            margin-bottom: 0;

            &__field {
              padding-right: 0;
              padding-left: 0;
            }
          }

          .voucher__btn {
            max-width: 100%;
          }
        }
      }
    }

    .summary {
      .checkout-widget {
        &_order-summary {
          margin: 0;

          .checkout-widget {
            &__detail-name {
              padding-bottom: 0;
            }
          }
        }

      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .basket {
    .checkout-voucher {
      .form-row__error {
        padding: 0;
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .basket {
    .voucher {
      .checkout-widget {
        &.checkout-voucher {
          form {
            .form-row {
              &__field {
                margin-left: 30px;
              }
            }
          }
        }
      }
    }

    .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;

      .voucher {
        display: block;
        order: -1;

        .checkout-voucher {
          padding: 0;

          .form-row__error {
            white-space: pre-line;
          }

          form {
            display: flex;
            align-items: flex-start;

            .form-row {
              max-width: 100%;
              flex: 1;
              margin-right: 0;

              &__field {
                margin-right: 0;
                margin-left: 30px;

                input {
                  &::placeholder {
                    color: $warm-grey;
                    text-transform: none;
                  }
                }
              }

              &__error {
                padding-right: 0;
                margin-bottom: 3px;
              }
            }

            .voucher__btn {
              margin-top: 0;
              margin-left: 16px;
              margin-right: 15px;
            }

            &.form_invalid {
              margin-bottom: 0;
            }
          }
        }
      }

      .checkout-action {
        &__wrapper {
          &.large {
            display: none;
          }
        }
      }

      .summary {
        &__payment {
          display: block;
          padding: 0;

          .footer-checkout-holder {
            padding: 20px 0;

            .payments {
              flex: 0 0 100%;
              max-width: 100%;
              padding: 0 10px;
            }

            &--payways {
              padding: 16px 0;
            }
          }

          .footer-checkout__copyright {
            display: none;
          }
        }

        .checkout-title {
          padding-top: 9px;
        }
      }
    }

    .content {
      .voucher,
      .summary-large,
      .checkout-action__wrapper {
        display: none;
      }
    }

    .summary {
      .footer-checkout-holder {
        padding: 20px;
      }

      .checkout-widget_order-summary {
        .checkout-widget__details {
          display: flex;
        }
      }

      .checkout-widget__item-bold {
        margin: 10px 0;
        padding: 5px 0;
      }

      .checkout-widget__item-vat {
        padding-bottom: 10px;
        margin-bottom: 10px;
      }
    }

    .checkout-title {
      &__title {
        min-width: 170px;
      }
    }
  }
}


@include media-breakpoint-up(xl) {
  .basket {
    .checkout-title {
      &__title {
        min-width: 205px;
      }
    }
  }
}