calcite-combobox-item.scss

.scale--s {
  @apply text-n2h;
  --calcite-combobox-item-spacing-unit-l: theme("spacing.2");
  --calcite-combobox-item-spacing-unit-s: theme("spacing.1");
  --calcite-combobox-item-spacing-indent: theme("spacing.2");
}

.scale--m {
  @apply text-n1h;
  --calcite-combobox-item-spacing-unit-l: theme("spacing.3");
  --calcite-combobox-item-spacing-unit-s: theme("spacing.2");
  --calcite-combobox-item-spacing-indent: theme("spacing.3");
}

.scale--l {
  @apply text-0h;
  --calcite-combobox-item-spacing-unit-l: theme("spacing.4");
  --calcite-combobox-item-spacing-unit-s: theme("spacing.3");
  --calcite-combobox-item-spacing-indent: theme("spacing.4");
}

.container {
  --calcite-combobox-item-indent-value: calc(
    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)
  );
}

:host(:focus) {
  @apply shadow-none;
}

:host,
ul {
  @apply flex flex-col m-0 p-0 outline-none;
}

.label {
  @apply flex
    box-border
    w-full
    min-w-full
    items-center
    text-color-3
    cursor-pointer
    relative
    duration-150
    ease-in-out
    focus-base
    no-underline;
  padding: var(--calcite-combobox-item-spacing-unit-s) var(--calcite-combobox-item-spacing-unit-l);
}

:host([disabled]) .label {
  @apply cursor-default;
}

// selected state
.label--selected {
  @apply text-color-1 font-medium;
}

.label--active {
  @apply focus-inset;
}

.label:hover,
.label:active {
  @apply text-color-1
    bg-foreground-2
    shadow-none
    no-underline;
}

.title {
  padding: 0 var(--calcite-combobox-item-spacing-unit-l);
}

.icon {
  @apply inline-flex
    opacity-0
    duration-150
    ease-in-out;
  color: theme("borderColor.color.1");
}

.icon--indent {
  padding-inline-start: var(--calcite-combobox-item-indent-value);
}

.icon--custom {
  margin-top: -1px;
  @apply text-color-3;
}

.icon--active {
  @apply text-color-1;
}

.icon--dot {
  @apply flex justify-end;
  width: var(--calcite-combobox-item-spacing-unit-l);
}

.icon--dot:before {
  text-align: start;
  content: "\2022";
}

.label--active .icon {
  @apply opacity-100;
}

.label--selected .icon {
  @apply opacity-100;
  color: theme("backgroundColor.brand");
}

:host(:hover[disabled]) .icon {
  @apply opacity-100;
}