$block = ".drop-down";
$height = 30px;

{$block} {
  border-radius: 3px;
  border: 1px solid $brand-base;
  height: $height;
  position: relative;
  user-select: none;

  &__wrapper {
    position: relative;
  }

  &__label {
    color: $brand-base;
    display: block;
    line-height: $height - 2px;
    margin: 0 30px 0 15px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
  }

  &__arrow {
    fill: $brand-base;
    position: absolute;
    right: 15px;
    top: 7px;
    transition: .2s transform;
    overflow: visible;
  }

  &--open {$block}__arrow {
    transform: rotateX(180deg);
  }

  &--show-options-above {$block}__options {
    top: auto;
    bottom: $height + 5px;
  }

  &:focus {
    border-color: $active-dark;
    outline: 0;
    {$block}__label {
      color: $active-darkest;
    }
    {$block}__arrow {
      fill: $active-dark;
    }
  }

  &__options {
    background-color: white;
    border-radius: 2px;
    border: 1px solid $gray-lighter;
    box-shadow: 0 0 6px 1px $gray-light;
    box-sizing: border-box;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: $height + 5px;
    width: 100%;
    z-index: 1;
  }

  &__option {
    color: $gray-dark;
    cursor: default;
    height: $height;
    line-height: $height;
    list-style: none;
    padding: 0 5px 4px 30px;
    position: relative;
    white-space: nowrap;

    > span {
      display: block;
      overflow: hidden;
    }

    > svg {
      fill: $active-dark;
      left: 8px;
      position: absolute;
      top: 8px;
    }

    &:active {
      background-color: $active-lighter;
    }

    &:last-child {
      margin-bottom: 0;
    }

    &--highlighted {
      background-color: $active-lightest;
    }
  }
}