/*
This is a temporary measure to ensure custom select styles are not affected by our
lack of an autoprefixer tool for compiling bootstrap.

TODO: Remove once bootstrap is included in GitLab UI or we include an autoprefixer
on gitlab
See: https://gitlab.com/gitlab-org/gitlab/issues/30055
*/

/* stylelint-disable property-no-vendor-prefix */
.gl-form-select {
  @include gl-font-base;
  @include gl-font-regular;
  @include gl-text-gray-900;
  @include gl-opacity-10;
  @include gl-line-height-normal;
  @include gl-py-3;
  @include gl-pl-4;
  @include gl-h-auto;
  @include gl-inset-border-1-gray-400;
  @include gl-border-none;
  @include gl-appearance-none;
  @include gl-text-truncate;

  &:active,
  &:focus,
  &:focus:active {
    @include gl-focus($gl-border-size-1, $gray-900, true);
  }

  &:disabled {
    @include gl-bg-gray-10;
    @include gl-inset-border-1-gray-100;
    @include gl-text-gray-400;
    @include gl-cursor-not-allowed;
  }

  &.is-valid,
  &.is-invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
  }

  &.is-invalid {
    @include gl-inset-border-1-red-400;

    &:focus {
      @include gl-focus($gl-border-size-1, $red-500, true);
    }

    &:hover {
      @include gl-inset-border-1-red-500;
    }
  }
}
/* stylelint-enable property-no-vendor-prefix */