.header--selector {
  .header__content {
    z-index: initial;
  }

  .content-block__title {
    display: flex;
    flex-wrap: wrap;
  }

  .modal__overlay {
    z-index: 5;
  }
}

// selector
.selector {
  &__title {
    margin-right: 10px;
  }

  &__dropdown {
    cursor: pointer;
    height: $baseline * 4;
    padding-right: 60px;
    position: relative;


    .icon {
      right: 25px;
      top: $baseline * 1.2;
      transition: transform $transition-duration--fast;
      transform-origin: center;
    }

    &--active {
      z-index: 6;

      .icon {
        transform: rotate(180deg);
      }
    }

    &--active.text-ellipsis {
      opacity: 0.7;
    }
  }

  &__dropdown svg {
    fill: $color-brand--two;
    //background specific mapping
    .bg-brand--dark-blue & {
      fill: $color-brand--four;
    }
  }

  &__text {
    position: relative; // IE fix for text jump on focus
  }

  &__content {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-$baseline * 0.5);
  }

  &__content--active {
    @include font-style('title--xxs', 'title--s');
    background: currentColor;
    border-radius: $border-radius--l;
    color: $color-brand--four;
    margin-top: $baseline * 1.5;
    max-height: $baseline * 18;
    opacity: 1;
    padding: $spacing--s 0 $spacing--m;
    pointer-events: auto;
    position: absolute;
    transform: translateY(0);
    transition: opacity $transition-duration--fast, visibility $transition-duration--fast, transform $transition-duration--fast;
    width: 100%;
    z-index: 6;
    // background specific mapping
    .bg-brand--off-white & {
      color: $color-brand--white;
    }
  }
  // chained for added specificity
  &__option.selector__option {
    color: $color-brand--two;
    text-decoration: none;
    transition: color $transition-duration--fast;
  }

  &__option:hover {
    text-decoration: none;
    // background specific mappings
    .bg-brand--dark-blue &,
    .bg-brand--blue &,
    .bg-brand--off-white & {
      color: $color-brand--one;
    }

    .bg-brand--red & {
      color: $color-brand--five;
    }

    .bg-brand--turquoise & {
      color: $color-brand--three;
    }

    .bg-brand--yellow & {
      color: $color-brand--six;
    }
  }

  &__pointer {
    background: currentColor;
    border-radius: $border-radius;
    display: block;
    height: $baseline * 2.6;
    position: absolute;
    top: $baseline * -0.6;
    transform: rotate(45deg);
    width: 26px;
  }

  &__list {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    max-height: $baseline * 13.5;
    padding: 0 20px;
  }

  &__item + &__item {
    margin-top: $spacing--xs;
  }
}


.bg-brand--yellow {
  .content-block .selector__option.selector__option {
    color: $color-brand--two;

    &:hover {
      color: $color-brand--six;
    }
  }

   .selector__dropdown--active.text-ellipsis {
     opacity: 1;
   }
}

.bg-brand--off-white .selector__dropdown--active.text-ellipsis {
  opacity: 1;
}

// viewport l
@include viewport--l {
  .header--selector {
    .content-block__description {
      margin-top: 15px;
    }

    .media-block:not(.media-block--full-width) img {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  // selector
  .selector {
    &__title {
      margin-right: 15px;
    }

    &__dropdown {
      padding-right: 80px;
      height: $baseline * 6.5;

      .icon {
        top: $spacing--s;
      }
    }

    &__content--active {
      margin-top: $baseline * 2.1;
      max-height: $baseline * 25;
      padding: $spacing--m 0 ($baseline * 4);
    }

    &__list {
      max-height: $baseline * 19;
      padding: 0 30px;
      transition: max-height 0s ease;
    }

    &__item + &__item {
      margin-top: $spacing--s;
    }
  }
}
