.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;
    display: block;
    height: $baseline * 4;
    padding-right: 20px;
    z-index: 100;

    @include viewport--l {
      padding-right: 40px;
    }

    position: relative;

    .icon {
      color: currentColor;
      flex-shrink: 0;
      transition: transform $transition-duration--fast;
      transform-origin: center;
      position: absolute;
      top: calc(50% + 4px);
      @include viewport--l {
        top: calc(50% + 8px);
      }
      transform: translateY(-50%);
      right: 0;
    }

    &--active {
      z-index: 6;

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

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

  &__dropdown svg {
    fill: currentColor;
  }

  &__text {
    @include font-style('title--m');
    padding-right: 10px;
    position: relative;
  }
}

// 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 {
      height: $baseline * 6.5;
    }
  }
}

@include selector-color-mapping;