.ca-input-select {
  $block: &;

  position: relative;
  width: 165px;

  &__label {
    left: 10px;
    font-size: $font-size-xs;
    transition: all 150ms ease;
    pointer-events: none;
    padding: 2px 5px;
    background-color: $c-white;
    position: absolute;
    transform: translateY(-50%);
    top: 0;
    z-index: 10;
  }

  &__selected,
  &__select-wrap {
    padding: 0 43px 0 15px;
    line-height: 38px;
    height: 40px;
    border: $border-light;
    background-color: $c-lightest-gray;
    transition: border-color 200ms ease;
    cursor: pointer;
    position: relative;
    border-radius: $input-border-radius;
  }

  &__select-wrap {
    padding: 0;
  }

  &__select {
    padding: 0 43px 0 15px;
    width: 100%;
    height: 100%;
  }

  &__arrow {
    @include valign;

    right: 14px;
    font-size: 16px;
  }

  &__options {
    border: $border-light;
    position: absolute;
    margin-top: 2px;
    width: 100%;
    z-index: 15;
    background-color: $c-lightest-gray;
    overflow: auto;
    white-space: nowrap;
    max-height: rem-calc(320);

    @include scrollbar-style($c-dark-gray, $c-darkest-gray);
  }

  &__option {
    line-height: 40px;
    padding: 0 15px;
    cursor: pointer;
    background-color: $c-lightest-gray;
    transition: all 200ms ease;

    &:hover {
      background-color: $c-light-gray;
    }
  }

  &__description {
    font-size: $font-size-xs;
    color: $c-text-secondary;
    margin: 5px 0 0 15px;
  }

  &__optional {
    font-size: 0.9em;
    color: $c-text-secondary;
    margin-left: 2px;
  }

  &--disabled {
    color: $c-text-secondary;
    pointer-events: none;
  }

  &--open {
    #{$block}__label {
      font-weight: $font-weight-bold;
      color: $c-darkest-gray;
    }

    #{$block}__selected {
      border: 1px solid $c-input-focused-border;

      &::before {
        transform: translateY(-50%) rotate(-180deg);
      }
    }
  }
}