@kelvininc/ui-components/dist/collection/components/select-option/select-option.css

Kelvin UI Components

/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** TODO: CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
kv-dropdown-base:not(.hydrated) > [slot=list] {
  display: none;
}

:host {
  /**
   * @prop --select-option-height: Select option height.
   * @prop --select-option-transition-duration: Select option transition time.
   * @prop --select-option-background-color: Select option background color.
   * @prop --select-option-background-color-selected: Select option background color when selected.
   * @prop --select-option-background-color-highlighted: Select option background color when highlighted.
   * @prop --select-option-background-color-hover: Select option background color when hovered.
   * @prop --select-option-background-color-disabled: Select option background color when disabled.
   * @prop --select-option-label-color: Select option label color.
   * @prop --select-option-label-color-selected: Select option label color when selected.
   * @prop --select-option-label-color-highlighted: Select option label color when highlighted.
   * @prop --select-option-label-color-hover: Select option label color when hovered.
   * @prop --select-option-label-color-disabled: Select option label color when disabled.
   * @prop --select-option-description-color: Select option description color.
   * @prop --select-option-description-color-selected: Select option description color when selected.
   * @prop --select-option-description-color-highlighted: Select option description color when highlighted.
   * @prop --select-option-description-color-hover: Select option description color when hovered.
   * @prop --select-option-description-color-disabled: Select option description color when disabled.
   * @prop --select-option-icon-size: Select option icon size.
   * @prop --select-option-icon-color: Select option icon color.
   * @prop --select-option-icon-color-selected: Select option icon color when selected.
   * @prop --select-option-icon-color-highlighted: Select option icon color when highlighted.
   * @prop --select-option-icon-color-hover: Select option icon color when hovered.
   * @prop --select-option-icon-color-disabled: Select option icon color when disabled.
   * @prop --select-option-right-icon-size: Select option right icon size.
   * @prop --select-option-right-icon-color: Select option right icon color.
   * @prop --select-option-right-icon-color-selected: Select option right icon color when selected.
   * @prop --select-option-right-icon-color-highlighted: Select option right icon color when highlighted.
   * @prop --select-option-right-icon-color-hover: Select option right icon color when hovered.
   * @prop --select-option-right-icon-color-disabled: Select option right icon color when disabled.
   */
  --select-option-height: 32px;
  --select-option-transition-duration: 100ms;
  --select-option-background-color: var(--transparent);
  --select-option-background-color-selected: var(--background-interactive-slider-list-selected);
  --select-option-background-color-highlighted: var(--background-interactive-slider-list-hover);
  --select-option-background-color-hover: var(--background-interactive-slider-list-hover);
  --select-option-background-color-disabled: var(--transparent);
  --select-option-label-color: var(--text-interactive-slider-list-default);
  --select-option-label-color-selected: var(--text-interactive-slider-list-selected);
  --select-option-label-color-highlighted: var(--text-interactive-slider-list-hover);
  --select-option-label-color-hover: var(--text-interactive-slider-list-hover);
  --select-option-label-color-disabled: var(--text-interactive-slider-list-disabled);
  --select-option-description-color: var(--text-on-color-neutral-tertiary);
  --select-option-description-color-selected: var(--text-on-color-neutral-tertiary);
  --select-option-description-color-highlighted: var(--text-on-color-neutral-tertiary);
  --select-option-description-color-hover: var(--text-on-color-neutral-tertiary);
  --select-option-description-color-disabled: var(--text-on-color-neutral-disabled);
  --select-option-icon-color: var(--icon-interactive-slider-list-default);
  --select-option-icon-color-selected: var(--icon-interactive-slider-list-selected);
  --select-option-icon-color-highlighted: var(--icon-interactive-slider-list-hover);
  --select-option-icon-color-hover: var(--icon-interactive-slider-list-hover);
  --select-option-icon-color-disabled: var(--icon-interactive-slider-list-disabled);
  --select-option-right-icon-color: var(--icon-interactive-slider-list-default);
  --select-option-right-icon-color-selected: var(--icon-interactive-slider-list-selected);
  --select-option-right-icon-color-highlighted: var(--icon-interactive-slider-list-hover);
  --select-option-right-icon-color-hover: var(--icon-interactive-slider-list-hover);
  --select-option-right-icon-color-disabled: var(--icon-interactive-slider-list-disabled);
  --select-option-icon-size: var(--size-default);
  --select-option-right-icon-size: var(--size-default);
}

.select-option {
  height: var(--select-option-height);
  display: flex;
  flex-direction: row;
  align-items: center;
  user-select: none;
  cursor: pointer;
  background-color: var(--select-option-background-color);
  transition: background-color var(--select-option-transition-duration) linear;
  padding-right: var(--spacing-2xl);
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties -- vars defined by parent component */
  padding-left: calc(var(--level-padding-offset) + var(--spacing-2xl));
}
.select-option .text-container {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}
.select-option .left-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.select-option .left-content kv-tooltip {
  min-width: 0;
  max-width: 100%;
}
.select-option .right-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}
.select-option .icon-container {
  margin-right: var(--spacing-md);
}
.select-option .icon-container kv-icon {
  --icon-width: var(--select-option-icon-size);
  --icon-height: var(--select-option-icon-size);
  --icon-color: var(--select-option-icon-color);
}
.select-option .item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Proxima Nova;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  transition: font-weight var(--select-option-transition-duration) linear;
  color: var(--select-option-label-color);
}
.select-option .item-description {
  font-family: Proxima Nova;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--select-option-description-color);
}
.select-option .item-right-icon kv-icon {
  --icon-color: var(--select-option-right-icon-color);
}
.select-option .group {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xs);
  align-items: center;
}
.select-option:not(.select-option--disabled):not(.select-option--selected):hover {
  background-color: var(--select-option-background-color-hover);
}
.select-option:not(.select-option--disabled):not(.select-option--selected):hover .item-label {
  color: var(--select-option-label-color-hover);
}
.select-option:not(.select-option--disabled):not(.select-option--selected):hover .item-description {
  color: var(--select-option-description-color-hover);
}
.select-option:not(.select-option--disabled):not(.select-option--selected):hover .icon-container kv-icon {
  --icon-color: var(--select-option-icon-color-hover);
}
.select-option:not(.select-option--disabled):not(.select-option--selected):hover .item-right-icon kv-icon {
  --icon-color: var(--select-option-right-icon-color-hover);
}
.select-option--selected {
  background-color: var(--select-option-background-color-selected);
}
.select-option--selected .item-label {
  font-family: Proxima Nova;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--select-option-label-color-selected);
}
.select-option--selected .item-description {
  color: var(--select-option-description-color-selected);
}
.select-option--selected .icon-container kv-icon {
  --icon-color: var(--select-option-icon-color-selected);
}
.select-option--selected .item-right-icon kv-icon {
  --icon-color: var(--select-option-right-icon-color-selected);
}
.select-option--highlighted {
  background-color: var(--select-option-background-color-highlighted);
}
.select-option--highlighted .item-label {
  font-family: Proxima Nova;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--select-option-label-color-highlighted);
}
.select-option--highlighted .item-description {
  color: var(--select-option-description-color-highlighted);
}
.select-option--highlighted .icon-container kv-icon {
  --icon-color: var(--select-option-icon-color-highlighted);
}
.select-option--highlighted .item-right-icon kv-icon {
  --icon-color: var(--select-option-right-icon-color-highlighted);
}
.select-option--disabled {
  cursor: not-allowed;
  user-select: none;
  background-color: var(--select-option-background-color-disabled);
}
.select-option--disabled .item-label {
  color: var(--select-option-label-color-disabled);
}
.select-option--disabled .item-description {
  color: var(--select-option-description-color-disabled);
}
.select-option--disabled .icon-container kv-icon {
  --icon-color: var(--select-option-icon-color-disabled);
}
.select-option--disabled .item-right-icon kv-icon {
  --icon-color: var(--select-option-right-icon-color-disabled);
}
.select-option:not(.select-option--selectable) {
  pointer-events: none;
  user-select: none;
}
.select-option--heading .item-label {
  font-family: Proxima Nova;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--text-on-color-neutral-tertiary);
}
.select-option--heading .text-container .left-content::after {
  content: "";
  display: flex;
  flex: 1;
  height: 1px;
  background: var(--border-on-color-neutral-default);
  margin-left: var(--spacing-md);
}
.select-option--with-checkbox kv-checkbox {
  margin-right: var(--spacing-xs);
}