@penaprieto/design-system/dist/components/Dropdown/Dropdown.css

Multi-brand React design system with design tokens from Figma

/* Base Dropdown */
.ds-dropdown {
  min-width: 200px;
  background: var(--dropdown-bg-default);
  border-radius: var(--br-sm, 8px);
  box-shadow: var(--semantic-elevation-elevation4);
  padding: var(--size2, 8px);
  border: 1px solid var(--textField-border-default);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.ds-dropdown--disabled {
  opacity: 0.6;
  pointer-events: none;
}

.ds-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-dropdown__option {
  display: flex;
  align-items: center;
  padding: var(--size3, 12px) var(--size4, 16px);
  font-family: var(--body-regular-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--body-regular-fontSize, 16px);
  line-height: var(--body-regular-lineHeight, 150%);
  color: var(--semantic-text-corp-primary);
  border-radius: var(--br-sm, 8px);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ds-dropdown__option:hover:not(.ds-dropdown__option--disabled) {
  background: var(--dropdown-bg-hover);
}

.ds-dropdown__option--focused:not(.ds-dropdown__option--disabled) {
  background: var(--dropdown-bg-hover);
}

.ds-dropdown__option:active:not(.ds-dropdown__option--disabled) {
  background: var(--dropdown-bg-active);
}

.ds-dropdown__option--selected {
  background: var(--dropdown-bg-active);
  color: var(--semantic-text-indigo-primary);
}

.ds-dropdown__option--disabled {
  color: var(--semantic-text-corp-disabled);
  cursor: not-allowed;
  background: none;
}