@import '../helpers/helpers';

.checkout-header {
  @include make-col-ready;
  padding: 0 0 25px;

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

  &__promo {
    @include make-col(12);
    min-height: 0;
    padding: 0;

    & .p-promotion:last-child {
      margin-bottom: 20px;
    }
  }

  &__declaration {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
  }

  &__id {
    @include make-col(12);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1rem;

    &-value {
      padding-left: 3px;
      font-weight: bold;
    }
  }

  &__logo {
    width: 63px;
    height: 63px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid $blue-dark;
    border-radius: 50%;

    & .icon {
      color: $blue-dark;
      font-size: 1.25rem;
    }
  }

  &__title {
    padding-left: 17px;
    font-size: 1.375rem;
    line-height: 25px;
  }

  &__continue {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
  }
}

@include media-breakpoint-up(sm) {
  .checkout-header {
    display: flex;
    padding: 15px 0;
  }
}

@include media-breakpoint-up(md) {
  .checkout-header {
    flex-wrap: wrap;
    padding: 25px 0;

    &__main {
      display: flex;
      justify-content: space-between;
      flex: 1;
      max-width: 100%;
      padding-right: 5px;
    }

    &__id {
      @include make-col(4);
      justify-content: center;
      padding-left: 5px;
      max-width: 325px;
    }

    &__declaration {
      order: 1;
      padding-bottom: 0;
    }

    &__continue {
      order: 2;
      padding-bottom: 0;
    }
  }

}

@include media-breakpoint-up(lg) {

}
