$select-colors: $form-colors !default

.select
  --select-arrow: #{$input-arrow}
  --select-disabled-border-color: #{$input-disabled-border-color}
  --select-hover-color: #{$input-hover-color}
  --select-disabled-color: #{$input-disabled-color}
  --select-focus-box-shadow-size: #{$input-focus-box-shadow-size}
  display: inline-block
  max-width: 100%
  position: relative
  vertical-align: top
  &:not(.is-multiple)
    height: var(--input-height)
  &:not(.is-multiple):not(.is-loading)
    &::after
      @extend %arrow
      border-color: var(--select-arrow)
      +ltr-position(1.125em)
      z-index: 4
  &.is-rounded
    select
      border-radius: var(--radius-rounded, #{$radius-rounded})
      +ltr-property("padding", 1em, false)
  select
    @extend %input
    cursor: pointer
    display: block
    font-size: 1em
    max-width: 100%
    outline: none
    &::-ms-expand
      display: none
    &[disabled]:hover,
    fieldset[disabled] &:hover
      border-color: var(--select-disabled-border-color)
    &:not([multiple])
      +ltr-property("padding", 2.5em)
    &[multiple]
      height: auto
      padding: 0
      option
        padding: 0.5em 1em
  // States
  &:not(.is-multiple):not(.is-loading):hover
    &::after
      border-color: var(--select-hover-color)
  // Colors
  @each $name, $pair in $select-colors
    @debug $select-colors
    $color: nth($pair, 1)
    &.is-#{$name}
      --hover-border-delta: -5%
      --hover-border-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--hover-border-delta)})
      --hover-border-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--hover-border-#{$name}-l), var(--#{$name}-a))
      --focus-box-shadow-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-l), 0.25)
      &:not(:hover)::after
        border-color: var(--#{$name}, #{$color})
      select
        border-color: var(--#{$name}, #{$color})
        &:hover,
        &.is-hovered
          border-color: var(--hover-border-color, #{bulmaDarken($color, 5%)})
        &:focus,
        &.is-focused,
        &:active,
        &.is-active
          box-shadow: var(--select-focus-box-shadow-size) var(--focus-box-shadow-color, #{bulmaRgba($color, 0.25)})
  // Sizes
  &.is-small
    +control-small
  &.is-medium
    +control-medium
  &.is-large
    +control-large
  // Modifiers
  &.is-disabled
    &::after
      border-color: var(--select-disabled-color)
  &.is-fullwidth
    width: 100%
    select
      width: 100%
  &.is-loading
    &::after
      @extend %loader
      margin-top: 0
      position: absolute
      +ltr-position(0.625em)
      top: 0.625em
      transform: none
    &.is-small:after
      font-size: var(--size-small, #{$size-small})
    &.is-medium:after
      font-size: var(--size-medium, #{$size-medium})
    &.is-large:after
      font-size: var(--size-large, #{$size-large})