/* --------
  Header
  -------- */

.header__inner {
  @extend %clearfix;
  @include make-row();
  @include wrapper($screen-lg);
  overflow: inherit;
  position: relative;
}

.header__inner--sm {
  @include media-query-medium {
    display: none;
  }
}

.header__inner--lg {
  @include rem(height, 105px);
  display: none;

  @include media-query-medium {
    display: block;
  }
}

.header--checkout {
  @include media-query-medium {
    border-bottom: 1px solid $color__brand--light-grey;
  }
}

@if $channel == 'channel-tsop' {
  .header__inner {
    @include wrapper($screen-tsop);
    @include rem(font-size, $base-font-size-tsop * 1px);
  }

  .header__inner--tsop-help {
    @include rem(height, 63px);
    float: right;
    text-align: center;
    border-left: solid 1px $color__brand--light-grey;
    border-right: 1px solid $color__brand--light-grey;
    border-image: linear-gradient(to bottom, $color__brand--light-grey, $color__trasparent) 1 100%;

    span {
      @include rem(font-size, 15px);
      @include rem(padding-top, 34px);
      @include rem(padding-left, 10px);
      @include rem(padding-right, 10px);
      @include rem(top, -21px);
      @include rem(height, 41px);
      @include rem(margin-top, 1px);
      clear: both;
      float: none;
      display: block;
      position: relative;
      text-decoration: none;
    }

    a {
      text-decoration: none;
    }

    .btn__icon--info::before {
      @include rem(font-size, 24px);
      @include rem(left, 11px);
      @include rem(top, 6px);
    }

  }

  .header__inner--tsop-cancel-order {
    @include rem(height, 63px);
    float: right;
    text-align: center;
    border-left: solid 1px $color__brand--light-grey;
    border-right: 1px solid $color__brand--light-grey;
    border-image: linear-gradient(to bottom, $color__brand--light-grey, $color__trasparent) 1 100%;

    span {
      @include rem(font-size, 15px);
      @include rem(padding-top, 34px);
      @include rem(padding-left, 10px);
      @include rem(padding-right, 10px);
      @include rem(top, -21px);
      @include rem(height, 41px);
      @include rem(margin-top, 1px);
      clear: both;
      float: none;
      display: block;
      position: relative;
      text-decoration: none;
    }

    a {
      text-decoration: none;
    }

    .btn__icon--cancel-order::before {
      @include rem(font-size, 24px);
      @include rem(left, 11px);
      @include rem(top, 6px);
    }

  }
}