grafana/public/sass/components/_form_select_box.scss

$select-input-height: 35px;
$select-input-bg-disabled: $input-bg-disabled;

@mixin select-control() {
  width: 100%;
  margin-right: $gf-form-margin;
  @include border-radius($input-border-radius-sm);
  background-color: $input-bg;
}

@mixin select-control-focus() {
  border-color: $input-border-focus;
  outline: none;
  $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $input-box-shadow-focus;
  @include box-shadow($shadow);
}

.gf-form-select-box__control {
  @include select-control();
  border: 1px solid $input-border-color;
  color: $input-color;
  cursor: default;
  display: table;
  border-spacing: 0;
  border-collapse: separate;
  height: $select-input-height;
  outline: none;
  overflow: hidden;
  position: relative;
}

.gf-form-select-box__control--is-focused {
  background-color: $input-bg;
  @include select-control-focus();
}

.gf-form-select-box__control--is-disabled {
  background-color: $select-input-bg-disabled;
}

.gf-form-select-box__control--menu-right {
  .gf-form-select-box__menu {
    right: 0;
    left: unset;
  }
}

.gf-form-select-box__input {
  padding-left: 5px;
  input {
    line-height: inherit;
  }
}

.gf-form-select-box__menu {
  background: $input-bg;
  box-shadow: $menu-dropdown-shadow;
  position: absolute;
  z-index: $zindex-dropdown;
  min-width: 100%;
}

.gf-form-select-box__menu-list {
  overflow-y: auto;
  max-height: 300px;
}

.tag-filter .gf-form-select-box__menu {
  width: 100%;
}

/* .gf-form-select-box__single-value { */
/* } */

.gf-form-select-box__multi-value {
  display: inline;
}

.gf-form-select-box__option {
  border-left: 2px solid transparent;
  white-space: nowrap;
  background-color: $input-bg;

  &.gf-form-select-box__option--is-focused {
    color: $dropdownLinkColorHover;
    background: $menu-dropdown-hover-bg;
    @include left-brand-border-gradient();
  }

  &.gf-form-select-box__option--is-selected {
    .fa {
      color: $input-color-select-arrow;
    }
  }
}

.gf-form-select-box__control--is-focused .gf-form-select-box__placeholder {
  display: none;
}

.gf-form-select-box__value-container {
  display: table-cell;
  padding: 6px 10px;
  > div {
    display: inline-block;
  }
}

.gf-form-select-box__indicators {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  padding-right: 10px;
  width: 20px;
}

.gf-form-select-box__select-arrow {
  border-color: $input-color-select-arrow transparent transparent;
  border-style: solid;
  border-width: 4px 4px 2.5px;
  display: inline-block;
  height: 0;
  width: 0;
  position: relative;

  &.gf-form-select-box__select-arrow--reversed {
    border-color: transparent transparent $input-color-select-arrow;
    top: -2px;
    border-width: 0 4px 4px;
  }
}

.gf-form-input--form-dropdown {
  padding: 0;
  border: 0;
  overflow: visible;
  position: relative;
}

.gf-form--has-input-icon {
  .gf-form-select-box__value-container {
    padding-left: 30px;
  }
}

.gf-form-select-box__desc-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-items: center;
  cursor: pointer;
  padding: 7px 10px;
  width: 100%;
}

.gf-form-select-box__desc-option__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-right: 10px;
  font-weight: 500;
}

.gf-form-select-box__desc-option__desc {
  font-weight: normal;
  font-size: $font-size-sm;
  color: $text-muted;
}

.gf-form-select-box__desc-option__img {
  width: 16px;
  margin-right: 10px;
}

.gf-form-select-box__option-group__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-items: center;
  cursor: pointer;
  padding: 7px 10px;
  width: 100%;
  border-bottom: 1px solid $hr-border-color;
  text-transform: capitalize;

  .fa {
    padding-right: 2px;
  }
}