.enhanced-select {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  height: $form-field-height;
  position: relative;
  background-color: #fff;
  border-bottom: $input-border-width solid $colour-grey-lightmid;
  color: $color-font-default;
  font-family: $font-default;
  font-size: $font-size-form;
  font-weight: $font-weight-semibold;

  &.enhanced-select--box {
    @include boxedfield();
  }

  &:hover,
  &:focus,
  &.is-focused {
    border-color: $colour-blue;
  }

  &.enhanced-select--disabled {
    background-color: $colour-form-input-disabled;
    color: $colour-font-form-input-disabled;

    > * {
      cursor: not-allowed;
    }

    &:hover,
    &:focus,
    &.is-focused {
      border-color: $colour-grey-light;
    }
  }

  select {
    opacity: 0;
    z-index: $z-index-fly-outs - 1;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    appearance: menulist-button;
    font-size: inherit;
  }

  option {
    font-size: inherit;
  }
}

.enhanced-select__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-align: left;
  margin-right: 0.5em;
  padding-right: $select-icon-width;
  line-height: $form-field-line-height;
}

.enhance-select__filter {
  border-bottom: $input-border-width solid $colour-grey-light;
}