// COMPONENT: Select: the standard select element. Namespaced via tag name
// rather than class name.
@function select-chevron($fill)
  $fill: unquote(str-slice(ie-hex-str($fill), 4))

  @return url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m0%200h24v24h-24z%22%20opacity%3D%220%22%2F%3E%3Cpath%20d%3D%22m12%2015.5a1%201%200%200%201%20-.71-.29l-4-4a1%201%200%201%201%201.42-1.42l3.29%203.31%203.3-3.18a1%201%200%201%201%201.38%201.44l-4%203.86a1%201%200%200%201%20-.68.28z%22%2F%3E%3C%2Fsvg%3E")

select
  @extend %input-text

  @extend %input-secondary

  background-image: select-chevron($text)
  background-position: right $input-padding center
  background-repeat: no-repeat
  background-size: auto ($gutter * 2)
  cursor: pointer
  min-width: $gutter * 10
  padding-right: $gutter * 3
  width: 100%

  &:invalid
    color: $placeholder

  &:focus
    background-image: select-chevron($tint)
    color: $tint

  &:-moz-focusring
    color: transparent
    text-shadow: 0 0 0 $text

  &[disabled]
    background-image: select-chevron($placeholder)

  option
    color: $text

    &[disabled]
      color: $placeholder

  &::-ms-expand
    display: none
