.Select {
  $this: &;
  position: relative;
  height: 36px;

  &__input {
    position: absolute;
    width: 100%;
    min-height: 100%;
    opacity: 0;
    z-index: 2;
  }
  &__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    @extend %default-border-background;
    box-shadow: 0 2px 0 0 rgba(0, 0, 20, 0.04);
    border-radius: 4px;
    text-align: left;
    z-index: 1;

    &__value {
      position: absolute;
      @extend .Font__body;
      @extend .Font__body--10;
      color: $color-gray-00;
      top: 8px;
      left: 11px;
    }
    &__arrow {
      position: absolute;
      right: 9px;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }
  &--disabled {
    #{$this}__input:hover {
      cursor: not-allowed;
    }
    #{$this}__overlay {
      @extend %disabled-border-background;

      &__value {
        color: $color-gray-80;
      }
    }
  }
  &--focused #{$this}__overlay {
    @extend %focus-border-background;
  }
  &--success #{$this}__overlay {
    @extend %success-border-background;
  }
  &--warning #{$this}__overlay {
    @extend %warning-border-background;
  }
  &--textselect #{$this}__overlay {
    border-radius: 0 4px 4px 0;
    border-left: 0;
  }
}