@import '../helpers/helpers';
@import '../components/proposition';

.page_empty-basket {
  height: 100%;
  display: flex;
  flex-direction: column;

  & > main {
    flex: 1;
  }
}

.empty-basket {

  .payments {
    margin-top: 15px;
    text-align: right;
    flex: 0;
    max-width: 100%;
  }

  .payment-types {

    .wickes-secure {
      float: left;
      margin-right: 10px;

      p {
        font-size: $font-size-base;
        margin-top: 10px;
      }

      a {
        font-size: $font-size-base;
      }
    }

    .basket-widgets {

      &__container {
        display: inline-block;
      }

      &__payment-img {
        display: block;
        height: 72px;

        &.mastercard-secure {
          background: url('../../img/mastercard_idcheck.png') no-repeat;
          width: 96px;
        }

        &.verified-by-visa {
          background: url('../../img/visa-secure.jpg') no-repeat;
          width: 72px;
        }
      }
    }

    @include media-breakpoint-down(md) {
      .col-4 {
        @include make-col(12);
      }

      .col-8 {
        @include make-col(12);
        padding: 0 10%;
      }

      .wickes-secure {
        width: calc(50% - 10px);
      }

      .basket-widgets {
        display: flex;

        &__container {
          width: 50%;
          float: left;
        }

        &__payment-img {
          margin: 0 auto;
        }
      }

      .payments {
        text-align: center;
      }
    }

    @include media-breakpoint-down(sm) {
      .col-8 {
        padding: 0 15px;

        .basket-widgets {
          display: block;
          width: 100%;
          float: left;
          text-align: center;
        }

        .wickes-secure {
          width: 100%;

          p {
            margin-bottom: 20px;
          }
        }
      }

    }
  }
}

.empty {
  .page-header {
    &__title {
      font-weight: 400;
    }
  }

  .payment-types {
    background: $gray-bg;
    padding: 20px;
    margin-bottom: 40px;

    .row {
      margin: 0;
    }

    &__secure {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      padding: 0;

      .checkout-widget__secure-info.checkout-widget__secure-info {
        margin-top: 5px;
      }

      .wickes-secure {
        width: 100%;
      }

      .basket-widgets {
        &__container {
          margin: 15px 0;
          width: auto;
        }
      }

      .basket-widget {
        &__payment-img {
          max-height: 65px;
        }
      }
    }
  }

  .footer-checkout {
    .payments {
      padding: 0;
      margin-bottom: 10px;

      &__list {
        display: flex;
        align-items: center;
        justify-content: space-around;

        .payments__item {
          margin-right: 0;
        }
      }

    }
  }

  &--instore {
    .page-header__title {
      font-weight: 500;
    }

    .page-header__intro {
      margin-top: 10px;

      p {
        margin-bottom: 0;

        & + p {
          margin-top: 10px;
        }
      }
    }
  }
}

@include media-breakpoint-up(sm) {
  .empty {
    .payment-types {
      &__secure {
        align-items: center;
      }

      .wickes-secure {
        width: auto;

        .checkout-widget__secure-info {
          margin: 0;
        }
      }
    }

    .footer-checkout {
      .payments {
        margin: 15px auto 10px;
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .empty {
    &--instore {
      .page-header__intro {
        margin-top: 20px;

        p {
          margin-bottom: 0;

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

@include media-breakpoint-up(lg) {
  .empty {
    .payment-types {
      padding: 25px;

      .basket-widgets__container {
        margin: 0;
      }
    }

    .footer-checkout {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0;

      .payments {
        margin: 0;

        .payments__list {
          .payments__item {
            margin-right: 25px;

            &:last-of-type {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}