// Select
@mixin select-default {
  background-color: $vl-page-bg;
  background-image: url("data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath d='M0.42,9.77a3.27,3.27,0,0,1,.91-2.21,3.12,3.12,0,0,1,4.41,0L16,17.82,26.25,7.56A3.12,3.12,0,0,1,30.67,12L18.2,24.44a3.12,3.12,0,0,1-4.41,0L1.33,12A3.17,3.17,0,0,1,.42,9.77'/%3e%3c/svg%3e"); // sass-lint:disable-line max-line-length
  background-repeat: no-repeat;
  background-size: 11px 11px; //should be in px rem doesn't work in ie 11
  background-position: calc(100% - 1.5rem) 50%;
  -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes, this one is needed
  appearance: none;
  display: inline-block;
  position: relative;
  padding: 0 4rem 0 1.5rem;
  max-width: 100%;
  height: $vl-form-input-height;
  line-height: $vl-form-input-height;
  border: 1px solid $vl-border-color;
  border-radius: 0;
  text-decoration: none;
  color: $vl-text-color;
  font-family: $vl-base-font;
  font-size: $vl-form-font-size;
}

.vl-select {
  @include select-default;

  &::-ms-expand {  // sass-lint:disable-line no-vendor-prefixes
    display: none;
  }

  &[disabled] {
    color: $vl-disabled-color;
    border-color: $vl-disabled-color;
    background-color: $vl-disabled-bg-color;
  }

  &:focus,
  &--focus {
    outline: none;
    border-color: $vl-outline-color;
    box-shadow: inset 0 0 0 0.1rem $vl-outline-color;
  }

  .no-js &[multiple] {
    height: auto;
  }

  @include respond-to(small) {
    height: $vl-form-input-height;
    line-height: $vl-form-input-height;
    font-size: $vl-base-mobile-font-size;
  }

  // block variant
  &--block {
    display: block;
    width: 100%;
  }
}

select {
  &.vl-select--error,
  &.invalid.validated {
    background-color: $vl-error-secondary-color;
    border-color: $vl-error-color;
    box-shadow: inset 0 0 0 0.1rem $vl-error-color;

    &:focus {
      background-color: $vl-page-bg;
    }
  }

  &.vl-select--success,
  &.valid.validated {
    @include form-input-success;
  }
}

// Only target the real ones, not the generated ones
@media all and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
  .vl-select {
    padding-right: 0;
    background-image: none;
  }
}

@import "js-select";