@scania/tegel/dist/collection/components/dropdown/dropdown-option/dropdown-option.css

Tegel Design System

:host {
  box-sizing: border-box;
  display: block;
  background-color: var(--tds-dropdown-option-background);
}
:host * {
  box-sizing: border-box;
}
:host .dropdown-option {
  color: var(--tds-dropdown-option-color);
  border-bottom: 1px solid var(--tds-dropdown-option-border);
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  overflow-wrap: anywhere;
  transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
}
:host .dropdown-option.selected {
  background-color: var(--tds-dropdown-option-background-selected);
}
:host .dropdown-option.disabled {
  color: var(--tds-dropdown-option-color-disabled);
}
:host .dropdown-option button:focus {
  outline: 2px solid var(--tds-focus-outline-color);
  box-shadow: inset 0 0 0 3px var(--tds-white);
  outline-offset: -2px;
}
:host .dropdown-option button {
  all: unset;
  width: 100%;
}
:host .dropdown-option button.lg {
  padding: 19px 0 20px;
}
:host .dropdown-option button.md {
  padding: 15px 0 16px;
}
:host .dropdown-option button.sm {
  padding: 11px 0 12px;
}
:host .dropdown-option button.xs {
  padding: 7px 0 8px;
}
:host .dropdown-option button .single-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
:host .dropdown-option .multiselect {
  width: 100%;
  height: 100%;
}
:host .dropdown-option .multiselect tds-checkbox {
  display: flex;
  height: 100%;
  width: 100%;
}
:host .dropdown-option .multiselect tds-checkbox.lg {
  padding: 15px 16px 16px;
}
:host .dropdown-option .multiselect tds-checkbox.md {
  padding: 11px 16px 12px;
}
:host .dropdown-option .multiselect tds-checkbox.sm {
  padding: 7px 16px 8px;
}
:host .dropdown-option .multiselect tds-checkbox.xs {
  padding: 7px 16px 8px;
}
:host .dropdown-option:hover {
  border-bottom-color: var(--tds-dropdown-option-border-hover);
  cursor: pointer;
}
:host .dropdown-option:hover.disabled {
  border-bottom-color: var(--tds-dropdown-option-border-hover);
  cursor: not-allowed;
}

:host([hidden]) {
  display: none;
}