@import '../helpers/helpers';

.in-store {
  background-color: $gray-dark;

  &__info {
    display: inline-block;
    font-size: 1.5rem;
    padding-right: 1rem;
    @include media-breakpoint-down(sm) {
      font-size: 1rem;
    }
  }

  &__store {
    @include media-breakpoint-up(md) {
      font-size: 1.25rem;
    }
  }

  .header-logo {
    display: block;

    .header-logo__link {
      display: block;
    }

    .header-logo__link,
    .header-logo__link-tp,
    .header-logo_wickes {
      background-image: url('../../img/wickes-logo.svg');
      height: 92px;
      width: 130px;

      &_small {
        height: 72px;
        width: 109px;
      }

      @include media-breakpoint-down(sm) {
        height: 59px;
        width: 115px;
      }
    }
  }

  .header__main-title {
    margin-left: 25px;
    font-weight: 500;
    color: $white;
    text-align: left;
    line-height: 24px;

    @include media-breakpoint-down(sm) {
      padding-left: 0;
      font-size: .75rem;
      line-height: 1rem;
      align-self: center;
    }

    @include media-breakpoint-up(md) {
      padding-left: 100px;
      min-height: 50px;
    }
  }

  .footer-checkout-holder {
    @include media-breakpoint-down(sm) {
      padding: 0;
    }
  }
}

.in-store-checkout {

  &__wrapper {
    @include make-col-ready;
    @include make-col(12);

    @include media-breakpoint-up(md) {
      @include make-col(10);
      @include make-col-offset(1);
    }
  }

  &__title {
    font-size: 20px;
    margin-bottom: 30px;
  }

  &__submit {
    @include make-col-ready;
    @include make-col(12);

    @include media-breakpoint-up(md) {
      @include make-col(5);
      @include make-col-offset(1);
    }

    @include media-breakpoint-up(lg) {
      @include make-col(3);
    }
  }
}

.checkout-in-store-details {
  @include make-col-ready;
  @include make-col(12);

  @include media-breakpoint-up(md) {
    @include make-col(10);
    @include make-col-offset(1);
  }
}

.barcode {
  &__wrapper {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: $white;
  }

  &__order-total {
    font-size: 1rem;
    font-weight: 800;

    @include media-breakpoint-up(sm) {
      font-size: 18px;
    }

    @include media-breakpoint-up(md) {
      font-size: 24px;
      margin: 20px 0;
    }

  }
}