fleet/frontend/components/forms/fields/DropdownWrapper/_styles.scss

// react-select's <Select/> styles prop customizes the styling of
// the internal components and not external elements like labels
// See customStyles in DropdownWrappr.tsx
// https://react-select.com/styles
.dropdown-wrapper {
  &__label {
    &--error {
      color: $ui-error;
    }
    &--disabled {
      color: $ui-fleet-black-50;
    }
  }

  // Wraps the <Select> control when disabledTooltipContent is provided; the wrapper must fill the form field's width
  // like the bare control does.
  &__disabled-tooltip {
    &.component__tooltip-wrapper {
      display: block;
    }

    .component__tooltip-wrapper__element {
      // The element is otherwise a max-content flex item, which collapses the percentage-width <Select> inside it to
      // its text width.
      width: 100%;
      white-space: normal;
    }
  }

  // Table dropdowns have height 40px
  &__table-filter {
    height: 36px;

    .react-select__control {
      height: 36px;
    }
  }
}