:not(.vl-select--error) .js-vl-select {
  &:hover {
    box-shadow: none;
    border: 1px solid $vl-primary-blue;
    margin: -1px;
  }
}

.js-vl-select {
  &.is-focused {
    border-color: $vl-primary-blue;
    box-shadow: 0 0 0 0.2rem $vl-primary-blue;
  }

  .vl-input-field {
    &:hover {
      outline: none;
    }
  }

  &[data-type*="select-one"] {
    .vl-input-field {
      &:focus {
        outline: 2px solid $vl-primary-blue;
      }
    }
  }

  &[data-type*="select-multiple"],
  &[data-type*="text"] {
    .vl-select__button {
      border-left: 1px solid $vl-primary-blue;
      color: $vl-black;
    }
  }

  .vl-select__inner {
    border: 1px solid $vl-shade-border;
    color: $vl-black;
  }

  .vl-select__list--dropdown {
    border: 1px $vl-shade-border solid;
    z-index: 1000; // Raar maar anders komt de dropdownlijst niet vanboven, met reset te maken?

    .vl-input-field + .vl-select__list {
      border-top: 1px solid $vl-shade-border;
    }

    .vl-select__item {
      &--selectable {
        &.is-highlighted {
          background-color: $vl-white-blue-hover;
        }
      }
    }
  }

  .vl-select--error & {
    background-color: transparent;

    &:hover {
      box-shadow: none;
      border: 0.1rem solid $vl-error-color;
      margin: 0.1rem;
    }
  }
}