.#{$prefix}-select {
  display: block;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  border-radius: space(0-5N) space(0-5N) 0 0;
  font-size: font-size(14);
  line-height: 1.5rem;
  font-family: $font-family-sans;
  padding: space(1N) space(4N) space(1N) space(2N);
  background-repeat: no-repeat;
  background-position: calc(100% - #{space(1N)}) 50%;
  background-size: space(3N) space(3N);
  cursor: pointer;

  @include scheme-element-text-color(g800);
  @include scheme-element-bg-color(g200);
  @include scheme-element-box-shadow-color(g800,true,inset 0 -2px 0 0 $COLOR);
  @include scheme-element-data-uri-svg(g800, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' %3E%3Cpath fill='$COLOR' d='M12,13.1l5-4.9l1.4,1.4L12,15.9L5.6,9.5l1.4-1.4L12,13.1z'/%3E%3C/svg%3E%0A"), background-image);
  @include scheme-element-focus();

  &--valid {
    @include scheme-element-box-shadow-color(success,false,inset 0 -2px 0 0 $COLOR);
  }

  &--error {
    @include scheme-element-box-shadow-color(error,false,inset 0 -2px 0 0 $COLOR);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 1; /* override de l'opacité chrome sur un select disabled */

    @include scheme-element-text-color(g600-g500);
    @include scheme-element-box-shadow-color(g300,true,inset 0 -2px 0 0 $COLOR);
    @include scheme-element-data-uri-svg(g600-g500, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' %3E%3Cpath fill='$COLOR' d='M12,13.1l5-4.9l1.4,1.4L12,15.9L5.6,9.5l1.4-1.4L12,13.1z'/%3E%3C/svg%3E%0A"), background-image);
  }

  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus {
    @include scheme-element-box-shadow-color(g200,true,inset 0 0 0 100px $COLOR);
    @include _scheme-element(g800, -webkit-text-fill-color, true);
  }
}