@import '../helpers/helpers';

.summary {
  &__aside {
    padding: 20px 20px 0;
    background: $gray-bg;

    & .btn-checkout {
      margin-bottom: 10px;
    }

    & .form-row__col-btn {
      padding-right: 0;
      padding-left: 0;

      & .paypal-button-container {
        min-width: inherit;

        & .paypal-button-text {
          padding-left: 3px;
        }
      }
    }
  }

  &__klarna {
    margin: -20px -20px 0;
  }

  & .checkout-widget-large + &__klarna {
    margin: 0 -20px;
  }

  &__payment {
    display: none;

    .footer-checkout-holder {
      .payments {
        &__list {
          display: flex;
          justify-content: space-around;
          align-items: center;

          .payments {
            &__item {
              margin-right: 0;
            }
          }
        }
      }
    }

    &-message {
      padding-bottom: 20px;
      font-size: .75rem;
    }

    &-main {
      font-weight: 500;
    }

    &-additional {
      margin-bottom: 0;
    }
  }

  &-large {
    order: -1;

    .summary__aside {
      //border: 1px solid $border-grey;

      .checkout-widget_order-summary.checkout-widget-large {
        display: block;
        padding-top: 0;
        margin-bottom: 0;
      }
    }
  }

  &__basked-id {
    margin-top: 13px;
    padding: 26px 0;
    background: $gray-bg;
    text-align: center;
    font-size: 1rem;

    .id-number {
      font-weight: bold;
    }
  }

  &__email {
    &-info {
      padding: 26px 30px;
      background: $gray-bg;
    }
  }

  &__accordion {
    display: inline-block;
    //padding-bottom: 0;
    font-weight: 500;
    color: $blue;
    padding-bottom: 15px;

    &.collapsed .icon {
      transform: rotate(180deg);
    }

    //&:not(.collapsed) {
    //  padding-bottom: 15px;
    //}

    & + .summary {
      &__aside {
        padding-top: 20px;
      }
    }

    &.collapsed + .summary {
      &__aside {
        padding-top: 0;

        .checkout-widget__details {
          opacity: 0;
        }
      }
    }
  }

  .checkout-widget {

    &__total {
      margin-top: 0;
    }

    &__accordion-wrap {
      margin-bottom: 20px;
    }

    &.checkout-widget_order-summary {
      padding: 20px 20px 0;

      .checkout-widget {
        &__details {
          padding-top: 20px;
          font-size: 1rem;

          .checkout-widget__accordion-wrap {
            .accordion__header-icon-small {
              left: 85px;
            }
          }
        }

        &__item {
          display: flex;
          justify-content: space-between;
          font-size: 1rem;
          line-height: 1.125rem;
          font-weight: 400;
          margin-bottom: 20px;

          &-value {
            text-align: right;
          }

          &-bold {
            font-weight: 500;
          }

          &-vat {
            font-size: .75rem;
            margin-top: -15px;
          }

          &-hide {
            display: none;
          }

          &-free {
            color: $blue;

            & .icon {
              margin-left: 5px;
              margin-bottom: -2px;
              vertical-align: bottom;
              color: $green;
            }
          }

          &-deficit {
            display: block;
            text-align: center;
            color: #0277bd;

            .bold {
              font-weight: 500;
            }
          }
        }

        &-deficit {
          display: block;
          text-align: center;
          color: #0277bd;

          .bold {
            font-weight: 500;
          }
        }

        &__total {
          border: 0;
          display: flex;
          justify-content: space-between;
          margin-left: -25px;
          margin-right: -25px;
          margin-bottom: 0;
          padding: 20px 25px;
          color: #fff;
          background-color: $blue-dark;
          font-size: 1.375rem;
          line-height: 1.5rem;
        }
      }
    }

    &.checkout-widget-large {
      .checkout-info-wrap {
        padding-top: 0;
      }
    }
  }
}

@include media-breakpoint-up(sm) {
  .summary {
    &-large {
      .footer-checkout-holder {
        justify-content: center;
      }
    }

    .checkout-widget {
      &.checkout-widget_order-summary {
        padding: 20px 0 0;

        .checkout-widget {
          &__total {
            margin-left: -20px;
            margin-right: -20px;
          }
        }
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .summary__klarna {
    margin: 0 -20px;
  }
}

@include media-breakpoint-only(md) {
  .summary {
    .checkout-widget {
      &.checkout-widget_order-summary {
        .checkout-widget {
          &__item {
            &-deficit {
              text-align: left;
            }
          }

          &__accordion-wrap {
            .checkout-widget__detail-value {
              left: auto;
              right: 0;
              top: 0;
            }
          }
        }
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .summary {
    &__aside {
      padding: 40px 30px 0;
    }

    & &__payment {
      display: block;
      padding: 0;
      margin: 0 -10px;

      .footer-checkout {
        &-holder {
          padding-top: 0;
          padding-bottom: 20px;
          justify-content: center;

          .payments {
            @include make-col(12);
            padding: 0;
          }
        }

        &__copyright {
          display: none;
        }
      }

    }

    .checkout-widget.checkout-widget_order-summary {
      .checkout-widget {
        &__total {
          margin-left: -30px;
          margin-right: -30px;
        }
      }
    }

    &-large {
      order: inherit;

      .summary {
        &__aside {
          padding: 35px 60px 0;
        }

        &__payment {
          display: none;
        }
      }

      .checkout-widget.checkout-widget_order-summary {
        .checkout-widget {
          &__total {
            margin-left: -60px;
            margin-right: -60px;
            padding-left: 60px;
            padding-right: 60px;
          }
        }
      }
    }
  }

  .basket {
    .summary {
      & .summary__payment {
        .footer-checkout-holder {
          padding: 20px 0;
        }
      }
    }
  }
}
