.nav-header--sm {
  @extend %clearfix;
  border-bottom: 1px solid $color__brand--light-grey;
}

.nav-header__item--sm {
  display: block;

  @include media-query-small {
    display: none;
  }
}

.nav-header__item--md {
  display: none;

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

// Welcome
.nav-header__welcome {
  @include rem('right', 14px);
  @include rem('top', 40px);
  @include rem('font-size', 14px);
  position: absolute;
}

// Logo
.nav-header__item--logo {
  display: none;

  @include media-query-small {
    @include rem('width', 120px);
    display: inline-block;
  }
}

// Saved items
.nav-header__item--saved-items {
  @include media-query-max-xsmall {
    display: none;
  }

  @include media-query-small {
    @include rem('width', 50px);
  }

  .dropdown__panel-wrapper {
    @include rem(left, -120px);
  }

  .nav-header__dropdown {
    border-left: 0;
    border-right: 0;

    a {
      padding: 0;
    }
  }

}

.nav-header__dropdown--saved-items {
  display: none;

  @include media-query-small {
    @include rem(height, 200px);
    display: block;
    width: 100vw;
  }
}

.nav-header__saved-items-count {
  @include rem(font-size, 11px);
  position: absolute;
  right: 5px;
  top: 5px;
}

// Search
.nav-header__item--search {
  @include rem('width', 50px);

  @include media-query-max-xsmall {
    .dropdown__panel-wrapper {
      @include rem('left', -50px);
      width: 100vw;
    }
  }

  @include media-query-xsmall {
    @include rem('width', 55px);

    .dropdown__panel-wrapper {
      @include rem('left', -55px);
    }
  }

  @include media-query-small {
    @include rem('width', 110px);

    .dropdown__panel-wrapper {
      @include rem('left', -170px);
    }
  }

  @include media-query-medium {

    .dropdown__panel-wrapper {
      @include rem('left', -170px);
    }
  }

  @include media-query-large {

    .dropdown__panel-wrapper {
      border-bottom: 0 none;
      left: 0;
    }
  }

}

.nav-header__link--search {
  @include media-query-small {
    &::before {
      width: 42%;
    }
  }
}

.nav-header__text {
  display: none;
  font-family: $font__mns-london;
  line-height: 14px;

  @include media-query-small {
    @include rem('top', 16px);
    @include rem('right', 12px);
    @include rem('font-size', 14px);
    display: block;
    position: absolute;
  }
}

// Checkout
.nav-header__text--checkout {
  @include rem('left', 15px);
  right: inherit;
}

.nav-header__link--checkout {
  @include media-query-small {
    &::before {
      @include rem('top', 15px);
      @include rem('font-size', 15px);
      color: $color__brand--white;
      width: 30%;
      right: 0;
    }
  }
}

.nav-header__item--checkout {
  display: none;

  @include media-query-small {
    @include rem('width', 125px);
    background: $color__brand--dark-grey;
    color: $color__brand--white;
    display: inline-block;
  }
}

// Help
.nav-header__item--help {
  @include media-query-medium {
    @include rem('width', 60px);
  }
}

// My bag
.nav-header__item--bag {
  width: 5rem;
  z-index: 1003;

  @include media-query-medium {
    padding-right: 3.6rem;
    width: auto;
    background: $color__brand--dark-grey;
    color: $color__brand--white;
    text-align: right;

    a {
      padding-bottom: .7rem;
      border: none;
      background: $color__brand--dark-grey;
    }
  }

  ::before {
    border: none;
  }
}

.nav-header__item--with-items {
  background: $color__brand--dark-grey;

  .nav-header__link::before {
    color: $color__brand--white;
  }
}

.nav-header__item--no-items {
  @include rem('width', 50px);

  @include media-query-xsmall {
    @include rem('width', 55px);
  }

  @include media-query-small {
    @include rem('width', 120px);
  }
}

// Nav Header Bag Count
.nav-header__bag-count {
  font-family: $font__mns-london;
  /* could potentially be put in a mixin */
  @media only screen and (max-width: 991px) {
    @include rem('font-size', 10px);
    line-height: 1em;
    text-align: center;
    background: $color__brand--green;
    position: absolute;
    bottom: 6px;
    right: 6px;
    min-width: 15px;
    padding: .24em .3em .3em;
    border-radius: 10px;
  }

  @include media-query-medium {
    @include rem('font-size', 13px);
    color: $color__brand--green;
    line-height: .8em;

    &::before,
    &::after {
      @include rem('font-size', 12px);
      color: $color__brand--medium-grey;
    }

    &::before {
      content: '(';
      padding: 0 .42em 0 .15em;
    }

    &::after {
      content: ')';
      padding: 0 0 0 .42em;
    }
  }
}

// Accessibility
.acc__text--nav-header {
  @include media-query-small {
    position: relative;
    top: inherit;
  }
}