@plone/components/src/styles/quanta/Select.css

ReactJS components for Plone

@layer plone-components.quanta {
  /* Quanta does not have to redefine colors, but it has to override the original ones coming
from the basic styles. Then, if people override the basic ones, then they won't get overridden in Quanta. */
  .q.react-aria-Select {
    .react-aria-Label {
      color: var(--quanta-sapphire);
    }

    .react-aria-Button {
      padding: 12px;
      border: 0;
      background-color: var(--basic-200);
      box-shadow: 0 0 0 rgba(2, 19, 34, 0);
      caret-color: var(--quanta-cobalt);

      span[aria-hidden] {
        background: transparent;
        color: var(--text-color);
      }

      &[data-hovered] {
        background-color: var(--basic-300);
      }

      &[data-focused],
      &[data-pressed] {
        background-color: var(--basic-50);
        box-shadow: inset 0 0 0 2px var(--quanta-cobalt);
        outline: 0;
      }
    }
  }

  .q.react-aria-Popover[data-trigger='Select'] {
    .react-aria-ListBoxItem {
      --highlight-background: var(--basic-300);
      --highlight-foreground: var(--text-color);
    }
  }
}