combobox-item.scss

@include base-component();

.scale--s {
  @apply text-n2h;
  --calcite-combobox-item-spacing-unit-s: theme("spacing.1");
  --calcite-combobox-item-spacing-unit-l: theme("spacing.2");
  --calcite-combobox-item-selector-icon-size: theme("spacing.4");
  --calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-xs);
}

.scale--m {
  @apply text-n1h;
  --calcite-combobox-item-spacing-unit-s: theme("spacing[1.5]");
  --calcite-combobox-item-spacing-unit-l: theme("spacing.3");
  --calcite-combobox-item-selector-icon-size: theme("spacing.4");
  --calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-sm);
}

.scale--l {
  @apply text-0h;
  --calcite-combobox-item-spacing-unit-s: theme("spacing[2.5]");
  --calcite-combobox-item-spacing-unit-l: theme("spacing.4");
  --calcite-combobox-item-selector-icon-size: theme("spacing.6");
  --calcite-internal-combobox-item-description-font-size: var(--calcite-font-size);
}

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

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

@include disabled();

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

:host(:focus),
ul:focus {
  @apply outline-none;
}

.label {
  @apply text-color-3
  focus-base
  relative
  box-border
  flex
  w-full
  min-w-full
  cursor-pointer
  items-center
  no-underline
  duration-150
  ease-in-out;
  @include word-break();
  justify-content: space-around;
  gap: var(--calcite-combobox-item-spacing-unit-l);
  padding-block: var(--calcite-combobox-item-spacing-unit-s);
  padding-inline-end: var(--calcite-combobox-item-spacing-unit-l);
  padding-inline-start: var(--calcite-combobox-item-indent-value);
}

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

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

  .title {
    @apply font-medium;
  }
}

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

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

.label:active {
  background-color: var(--calcite-color-foreground-3);
}

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

.icon--custom {
  margin-block-start: -1px;
}

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

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

.center-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-block: 0;
}

.description {
  font-size: var(--calcite-internal-combobox-item-description-font-size);
}

:host([selected]),
:host(:hover) {
  .description {
    color: var(--calcite-color-text-2);
  }
}

.short-text {
  color: var(--calcite-color-text-3);
  white-space: nowrap;
}

.title {
  color: var(--calcite-color-text-1);
}

.title,
.description,
.short-text {
  line-height: var(--calcite-font-line-height-relative-snug);
}

@include item-hidden();
@include text-highlight-item();