/*
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;
  @include gl-bg-no-repeat;
  background-image: url($gl-icon-select-chevron-down);

  &:focus,
  &:focus:active {
    @include gl-focus($color: $gray-900, $important: 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 {
    padding-right: $gl-spacing-scale-2 + $gl-spacing-scale-6;
    background-image: url($gl-icon-select-chevron-down);
  }

  &.is-invalid:not(:disabled) {
    @include gl-inset-border-1-red-400;

    &:focus {
      @include gl-focus($color: $red-500, $important: true);
    }

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