/* Canonical action primitives:
 * - icon-only: .icon-button (+ runtime alias .info-trigger)
 * - text / icon+text: .app-button
 * - compact toggle/filter: .chip-button
 * - navigation rows: .menu-button
 */
.menu-button,
.icon-button,
.app-button,
.chip-button,
.info-trigger {
    --button-transition-duration: 140ms;
    --button-transition-ease: ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: var(--border-width-base) solid transparent;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 400;
    letter-spacing: 0;
    line-height: var(--type-button-line);
    transition:
        background-color var(--button-transition-duration) var(--button-transition-ease),
        border-color var(--button-transition-duration) var(--button-transition-ease),
        color var(--button-transition-duration) var(--button-transition-ease),
        box-shadow var(--button-transition-duration) var(--button-transition-ease),
        opacity var(--button-transition-duration) var(--button-transition-ease);
}

.menu-button,
.icon-button,
.info-trigger {
    --button-chrome-bg: var(--emphasis-action-secondary-bg);
    --button-chrome-bg-hover: var(--emphasis-action-secondary-bg-hover);
    --button-chrome-bg-active: var(--emphasis-action-secondary-bg-active);
    --button-chrome-border: var(--emphasis-action-secondary-border);
    --button-chrome-border-hover: var(--emphasis-action-secondary-border-hover);
    --button-chrome-color: var(--emphasis-action-secondary-color);
    --button-chrome-color-hover: var(--emphasis-action-secondary-color-hover);
    min-height: var(--button-height-unified);
    border-color: var(--button-chrome-border);
    border-radius: var(--button-radius-unified);
    background: var(--button-chrome-bg);
    color: var(--button-chrome-color);
    --button-chrome-bg-selected: var(--control-selected-bg);
    --button-chrome-border-selected: var(--control-selected-border);
    --button-chrome-color-selected: var(--control-selected-color);
    --button-icon-filter: none;
    --button-icon-filter-hover: var(--icon-filter-brand);
    --button-icon-filter-selected: var(--icon-filter-brand);
    --icon-filter: var(--button-icon-filter);
}

.menu-button {
    --button-chrome-bg: var(--menu-button-bg, var(--emphasis-action-menu-bg));
    --button-chrome-bg-hover: var(--menu-button-bg-hover, var(--emphasis-action-menu-bg-hover));
    --button-chrome-bg-active: var(--menu-button-bg-active, var(--emphasis-action-menu-bg-active));
    --button-chrome-border: var(--menu-button-border, var(--emphasis-action-menu-border));
    --button-chrome-border-hover: var(--menu-button-border-hover, var(--emphasis-action-menu-border-hover));
    --button-chrome-color: var(--menu-button-color, var(--emphasis-action-menu-color));
    --button-chrome-color-hover: var(--menu-button-color-hover, var(--emphasis-action-menu-color-hover));
    width: var(--menu-button-width, 100%);
    min-height: var(--menu-button-min-height, var(--button-height-sm));
    padding: var(--menu-button-padding, var(--control-padding-y-compact) var(--control-padding-x-compact));
    border-radius: var(--menu-button-radius, var(--control-radius));
    justify-content: var(--menu-button-justify, flex-start);
    gap: var(--menu-button-gap, var(--control-gap-wide));
    font-size: var(--menu-button-font-size, inherit);
    font-weight: var(--menu-button-font-weight, inherit);
    line-height: var(--menu-button-line-height, 1.4);
    text-align: left;
}

.icon-button,
.info-trigger:not(.menu-button) {
    --button-icon-box-size: var(--control-icon-button-size-sm);
    --button-icon-size: var(--control-icon-size-sm);
}

.app-button--icon {
    --button-icon-box-size: var(--control-app-icon-size);
    --button-icon-size: var(--control-icon-size-sm);
}

:is(.icon-button, .info-trigger:not(.menu-button), .app-button--icon) {
    width: var(--button-icon-box-size);
    min-width: var(--button-icon-box-size);
    height: var(--button-icon-box-size);
    min-height: var(--button-icon-box-size);
    padding: 0;
    gap: 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-round);
}

:is(.icon-button, .info-trigger:not(.menu-button), .app-button--icon) .action-icon {
    width: var(--button-icon-size);
    height: var(--button-icon-size);
}

.app-button {
    --app-button-height: var(--button-height-md);
    --app-button-padding-x: var(--button-padding-x-md);
    --app-button-padding-y: 0;
    --app-button-radius: var(--button-radius-unified);
    --app-button-bg: var(--emphasis-action-app-bg);
    --app-button-bg-hover: var(--emphasis-action-app-bg-hover);
    --app-button-bg-active: var(--emphasis-action-app-bg-active);
    --app-button-border: var(--emphasis-action-app-border);
    --app-button-border-hover: var(--emphasis-action-app-border-hover);
    --app-button-color: var(--emphasis-action-app-color);
    --app-button-color-hover: var(--emphasis-action-app-color-hover);
    min-height: var(--app-button-height);
    padding: var(--app-button-padding-y) var(--app-button-padding-x);
    border-color: var(--app-button-border);
    border-radius: var(--app-button-radius);
    background: var(--app-button-bg);
    color: var(--app-button-color);
    --app-button-bg-selected: var(--control-selected-bg);
    --app-button-border-selected: var(--control-selected-border);
    --app-button-color-selected: var(--control-selected-color);
    --app-button-icon-filter: none;
    --app-button-icon-filter-hover: var(--icon-filter-brand);
    --app-button-icon-filter-selected: var(--icon-filter-brand);
    --icon-filter: var(--app-button-icon-filter);
}

.app-button--icon {
    --app-button-icon-size: var(--control-app-icon-size);
    --app-button-height: var(--app-button-icon-size);
    --app-button-padding-x: 0;
    --app-button-padding-y: 0;
    --app-button-radius: var(--radius-round);
    width: var(--app-button-icon-size);
    min-width: var(--app-button-icon-size);
    height: var(--app-button-icon-size);
    min-height: var(--app-button-icon-size);
    padding: 0;
    aspect-ratio: 1 / 1;
}

.app-button--quiet {
    --app-button-bg: var(--emphasis-action-quiet-bg);
    --app-button-bg-hover: var(--emphasis-action-quiet-bg-hover);
    --app-button-bg-active: var(--emphasis-action-quiet-bg-active);
    --app-button-border: var(--emphasis-action-quiet-border);
    --app-button-border-hover: var(--emphasis-action-quiet-border-hover);
    --app-button-color: var(--emphasis-action-quiet-color);
    --app-button-color-hover: var(--emphasis-action-quiet-color-hover);
}

.app-button--primary {
    --app-button-bg: var(--emphasis-action-cta-bg);
    --app-button-bg-hover: var(--emphasis-action-cta-bg-hover);
    --app-button-bg-active: var(--emphasis-action-cta-bg-active);
    --app-button-border: var(--emphasis-action-cta-border);
    --app-button-border-hover: var(--emphasis-action-cta-border-hover);
    --app-button-color: var(--emphasis-action-cta-color);
    --app-button-color-hover: var(--emphasis-action-cta-color);
}

.app-button--secondary {
    --app-button-bg: color-mix(in srgb, var(--theme-surface-subtle) 92%, #ffffff);
    --app-button-bg-hover: color-mix(in srgb, var(--theme-surface-subtle) 82%, #ffffff);
    --app-button-bg-active: color-mix(in srgb, var(--theme-surface-subtle) 74%, #ffffff);
    --app-button-border: var(--theme-border-control);
    --app-button-border-hover: var(--theme-border-control-hover);
    --app-button-color: var(--theme-text-strong);
    --app-button-color-hover: var(--theme-text-strong);
}

.app-button--danger {
    --app-button-bg: var(--emphasis-action-chip-danger-bg);
    --app-button-bg-hover: var(--emphasis-action-chip-danger-bg-hover);
    --app-button-bg-active: var(--emphasis-action-chip-danger-bg-hover);
    --app-button-border: var(--emphasis-action-chip-danger-border);
    --app-button-border-hover: var(--emphasis-action-chip-danger-border-hover);
    --app-button-color: var(--emphasis-action-chip-danger-color);
    --app-button-color-hover: var(--emphasis-action-chip-danger-color-hover);
}

.icon-button--quiet {
    --button-chrome-bg: var(--emphasis-action-quiet-bg);
    --button-chrome-bg-hover: var(--emphasis-action-quiet-bg-hover);
    --button-chrome-bg-active: var(--emphasis-action-quiet-bg-active);
    --button-chrome-border: var(--emphasis-action-quiet-border);
    --button-chrome-border-hover: var(--emphasis-action-quiet-border-hover);
    --button-chrome-color: var(--emphasis-action-quiet-color);
    --button-chrome-color-hover: var(--emphasis-action-quiet-color-hover);
}

.app-button,
.menu-button,
.chip-button {
    white-space: nowrap;
}

.chip-button {
    --chip-button-min-height: var(--button-height-unified);
    --chip-button-height: var(--chip-button-min-height);
    --chip-button-padding: 0 var(--button-padding-x-sm);
    --chip-button-border-color: var(--emphasis-action-chip-border);
    --chip-button-border-color-hover: var(--emphasis-action-chip-border-hover);
    --chip-button-bg: var(--emphasis-action-chip-bg);
    --chip-button-bg-hover: var(--emphasis-action-chip-bg-hover);
    --chip-button-color: var(--emphasis-action-chip-color);
    --chip-button-color-hover: var(--emphasis-action-chip-color-hover);
    min-height: var(--chip-button-min-height);
    height: var(--chip-button-height);
    max-width: 100%;
    padding: var(--chip-button-padding);
    border: var(--border-width-base) solid var(--chip-button-border-color);
    border-radius: var(--button-radius-unified);
    background: var(--chip-button-bg);
    color: var(--chip-button-color);
    gap: var(--chip-button-gap, var(--control-gap-base));
    font-size: var(--chip-button-font-size, inherit);
    font-weight: var(--chip-button-font-weight, inherit);
    line-height: var(--chip-button-line-height, 1);
    white-space: nowrap;
    --chip-button-bg-selected: var(--control-selected-bg);
    --chip-button-border-color-selected: var(--control-selected-border);
    --chip-button-color-selected: var(--control-selected-color);
    --chip-button-icon-filter: none;
    --chip-button-icon-filter-hover: var(--icon-filter-brand);
    --chip-button-icon-filter-selected: var(--icon-filter-brand);
    --icon-filter: var(--chip-button-icon-filter);
}

.chip-button--quiet {
    --chip-button-bg: var(--emphasis-action-chip-bg);
    --chip-button-color: var(--emphasis-action-chip-color);
    --chip-button-border-color: var(--emphasis-action-chip-border);
}

.chip-button--danger {
    --chip-button-bg: var(--emphasis-action-chip-danger-bg);
    --chip-button-bg-hover: var(--emphasis-action-chip-danger-bg-hover);
    --chip-button-border-color: var(--emphasis-action-chip-danger-border);
    --chip-button-border-color-hover: var(--emphasis-action-chip-danger-border-hover);
    --chip-button-color: var(--emphasis-action-chip-danger-color);
    --chip-button-color-hover: var(--emphasis-action-chip-danger-color-hover);
}

:where(.menu-button, .icon-button, .info-trigger):not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--button-chrome-bg-hover);
    border-color: var(--button-chrome-border-hover);
    color: var(--button-chrome-color-hover);
    --icon-filter: var(--button-icon-filter-hover);
}

:where(.menu-button, .icon-button, .info-trigger):not(:disabled):not([aria-disabled="true"]):active {
    background: var(--button-chrome-bg-active);
    border-color: var(--button-chrome-border-hover);
    color: var(--button-chrome-color-hover);
    --icon-filter: var(--button-icon-filter-hover);
}

:where(.app-button):not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--app-button-bg-hover);
    border-color: var(--app-button-border-hover);
    color: var(--app-button-color-hover);
    --icon-filter: var(--app-button-icon-filter-hover);
}

:where(.app-button):not(:disabled):not([aria-disabled="true"]):active {
    background: var(--app-button-bg-active);
    border-color: var(--app-button-border-hover);
    color: var(--app-button-color-hover);
    --icon-filter: var(--app-button-icon-filter-hover);
}

.chip-button:not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--chip-button-bg-hover);
    border-color: var(--chip-button-border-color-hover, var(--chip-button-border-color));
    color: var(--chip-button-color-hover);
    --icon-filter: var(--chip-button-icon-filter-hover);
}

.chip-button:not(:disabled):not([aria-disabled="true"]):active {
    background: var(--chip-button-bg-hover);
    border-color: var(--chip-button-border-color-hover, var(--chip-button-border-color));
    color: var(--chip-button-color-hover);
    --icon-filter: var(--chip-button-icon-filter-hover);
}

[data-sidebar-combobox-tags] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sidebar-combobox-tag-gap);
}

[data-sidebar-combobox-tag].chip-button {
    --chip-button-min-height: var(--sidebar-combobox-tag-min-height);
    --chip-button-height: var(--sidebar-combobox-tag-min-height);
    --chip-button-padding: var(--sidebar-combobox-tag-padding);
    --chip-button-gap: var(--control-gap-2xs);
    --chip-button-font-size: var(--sidebar-combobox-tag-font-size);
    --chip-remove-bg: var(--sidebar-combobox-tag-remove-bg);
    --chip-remove-color: var(--sidebar-combobox-tag-remove-color);
    --chip-remove-bg-hover: var(--sidebar-combobox-tag-remove-bg-hover);
}

[data-sidebar-combobox-tag][data-selected="true"].chip-button {
    --chip-button-bg: var(--control-selected-bg);
    --chip-button-bg-hover: var(--control-selected-bg-hover);
    --chip-button-border-color: var(--control-selected-border);
    --chip-button-border-color-hover: var(--control-selected-border-hover);
    --chip-button-color: var(--control-selected-color);
    --chip-button-color-hover: var(--control-selected-color-hover);
    --chip-button-icon-filter: var(--icon-filter-brand);
    --chip-button-icon-filter-hover: var(--icon-filter-brand);
    --chip-remove-color: var(--control-selected-color);
    --chip-remove-bg-hover: color-mix(in srgb, var(--control-selected-bg-hover) 84%, var(--theme-surface-base));
}

[data-sidebar-combobox-tag][data-selected="true"] .badge,
[data-sidebar-combobox-tag][data-selected="true"] .icon-badge {
    --badge-border: 1px solid color-mix(in srgb, var(--control-selected-border) 88%, var(--theme-border-subtle));
    --badge-bg: color-mix(in srgb, var(--control-selected-bg-hover) 72%, var(--theme-surface-base));
    --badge-color: var(--control-selected-color);
    border-color: color-mix(in srgb, var(--control-selected-border) 88%, var(--theme-border-subtle));
    background: color-mix(in srgb, var(--control-selected-bg-hover) 72%, var(--theme-surface-base));
    color: var(--control-selected-color);
}

[data-sidebar-combobox-tag-remove],
.chip-button__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--chip-remove-size, var(--sidebar-combobox-tag-remove-size, var(--control-icon-button-size-xs)));
    height: var(--chip-remove-size, var(--sidebar-combobox-tag-remove-size, var(--control-icon-button-size-xs)));
    border-radius: var(--chip-remove-radius, var(--radius-round));
    background: var(--chip-remove-bg, transparent);
    color: var(--chip-remove-color, var(--emphasis-action-secondary-color));
    font-size: var(--chip-remove-font-size, var(--type-control-meta-size));
    line-height: 1;
    flex: 0 0 auto;
}

[data-sidebar-combobox-tag-remove] {
    padding: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
}

[data-sidebar-combobox-tag-remove]:hover,
[data-sidebar-combobox-tag-remove]:focus-visible {
    background: var(--chip-remove-bg-hover, var(--sidebar-combobox-tag-remove-bg-hover));
    color: var(--emphasis-action-secondary-color-hover);
}

:where(.menu-button, .icon-button, .info-trigger)[data-highlighted="true"],
:where(.menu-button, .icon-button, .info-trigger)[aria-pressed="true"],
:where(.menu-button, .icon-button, .info-trigger)[aria-current]:not([aria-current="false"]),
:where(.menu-button, .icon-button, .info-trigger)[aria-expanded="true"] {
    background: var(--button-chrome-bg-selected, var(--button-chrome-bg-active));
    border-color: var(--button-chrome-border-selected, var(--button-chrome-border-hover));
    color: var(--button-chrome-color-selected, var(--button-chrome-color-hover));
    --icon-filter: var(--button-icon-filter-selected);
}

:where(.app-button)[data-highlighted="true"],
:where(.app-button)[data-state="active"],
:where(.app-button)[aria-pressed="true"],
:where(.app-button)[aria-current]:not([aria-current="false"]),
:where(.app-button)[aria-expanded="true"] {
    background: var(--app-button-bg-selected, var(--app-button-bg-active));
    border-color: var(--app-button-border-selected, var(--app-button-border-hover));
    color: var(--app-button-color-selected, var(--app-button-color-hover));
    --icon-filter: var(--app-button-icon-filter-selected);
}

.chip-button[aria-pressed="true"],
.chip-button[aria-current]:not([aria-current="false"]) {
    background: var(--chip-button-bg-selected, var(--chip-button-bg-hover));
    border-color: var(--chip-button-border-color-selected, var(--chip-button-border-color-hover, var(--chip-button-border-color)));
    color: var(--chip-button-color-selected, var(--chip-button-color-hover));
    --icon-filter: var(--chip-button-icon-filter-selected);
}

:where(.menu-button, .icon-button, .app-button, .chip-button, .info-trigger):focus-visible {
    border-color: var(--border-color-focus);
    box-shadow: var(--state-focus-ring-shadow);
    outline: none;
}

:where(.menu-button, .icon-button, .app-button, .chip-button, .info-trigger):disabled,
:where(.menu-button, .icon-button, .app-button, .chip-button, .info-trigger)[aria-disabled="true"] {
    opacity: var(--state-opacity-disabled);
    pointer-events: none;
    box-shadow: none;
}

.search-active-filter-chip {
    --chip-button-gap: var(--control-gap-tight);
    --chip-button-min-height: var(--button-height-sm);
    --chip-button-padding: 0 var(--control-padding-x-compact);
    --chip-button-font-size: var(--font-size-sm);
    --chip-button-bg: var(--theme-surface-base);
    --chip-button-bg-hover: color-mix(in srgb, var(--theme-surface-subtle) 74%, var(--theme-surface-base));
    --chip-button-border-color: var(--theme-border-subtle);
    --chip-button-border-color-hover: var(--theme-border-surface-item);
    --chip-button-color: var(--theme-text-muted);
    --chip-button-color-hover: var(--theme-text-strong);
    --chip-remove-bg: transparent;
    display: inline-flex;
    align-items: center;
    gap: var(--control-gap-tight);
    width: auto;
    max-width: 100%;
}

.search-active-filter-chip--reset {
    --chip-button-bg: transparent;
    --chip-button-bg-hover: color-mix(in srgb, var(--theme-surface-subtle) 80%, transparent);
    --chip-button-border-color: transparent;
    --chip-button-border-color-hover: var(--theme-border-subtle);
    --chip-button-color: var(--theme-text-muted);
    --chip-button-color-hover: var(--theme-text-strong);
}

.search-active-filter-chip__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.button-panel,
.button-rail {
    --button-panel-bg: var(--theme-surface-subtle);
    --button-panel-border: var(--theme-border-surface-item);
    --button-panel-padding: var(--control-padding-x-compact);
    --button-panel-gap: var(--control-gap-base);
    box-sizing: border-box;
    border: 1px solid var(--button-panel-border);
    background: var(--button-panel-bg);
    box-shadow: none;
}

.button-panel {
    display: flex;
    align-items: center;
    gap: var(--button-panel-gap);
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    padding: var(--button-panel-padding);
    border-radius: var(--control-radius);
}

.button-panel--split {
    justify-content: space-between;
}

.button-panel--split > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.button-panel--split > :last-child {
    margin-inline-start: auto;
}

.button-panel--stack,
.button-stack {
    display: grid;
    gap: var(--control-gap-base);
    justify-items: stretch;
    align-items: stretch;
}

.button-panel__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--button-panel-gap);
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 auto;
    padding: var(--border-width-base);
}

.button-panel__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-panel-status-gap, var(--control-gap-2xs));
    min-height: var(--button-panel-status-min-height, var(--button-height-unified));
    min-width: var(--button-panel-status-min-width, 0);
    padding: var(--button-panel-status-padding, 0 var(--control-padding-x-wide));
    border-radius: var(--button-panel-status-radius, var(--button-radius-unified));
    border: var(--button-panel-status-border, 1px solid var(--theme-border-normal));
    background: var(--button-panel-status-bg, color-mix(in srgb, var(--theme-surface-base) 94%, var(--header-container-color)));
    color: var(--button-panel-status-color, var(--theme-text-muted));
    font-size: var(--button-panel-status-font-size, var(--type-caption-size));
    font-weight: var(--button-panel-status-font-weight, 400);
    line-height: var(--button-panel-status-line-height, 1.2);
    letter-spacing: var(--button-panel-status-letter-spacing, 0);
    text-transform: var(--button-panel-status-text-transform, none);
    white-space: var(--button-panel-status-white-space, nowrap);
}

.button-panel__status[hidden] {
    display: none !important;
}

.button-rail {
    display: inline-flex;
    align-items: center;
    gap: var(--control-gap-tight);
    flex-wrap: wrap;
    width: auto;
    max-width: 100%;
    padding: var(--button-panel-padding);
    border-radius: var(--button-rail-radius);
    overflow: visible;
}

.button-rail--compact {
    gap: var(--control-gap-3xs);
    padding: var(--control-padding-2xs);
}

.section-head + :is(.button-panel__actions, .button-panel.button-panel--split, .button-rail) {
    margin: calc(var(--inner-gap) * -1 + var(--space-3)) 0 var(--inner-gap);
}

.button-stack--stretch > :is(.chip-button, .menu-button, .app-button) {
    width: 100%;
    justify-content: center;
}

.chip-alphabet {
    width: calc(25% - 6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--control-gap-tight);
    margin: var(--space-1);
    min-height: var(--button-height-unified);
    padding: var(--outline-pill-padding-y) var(--outline-pill-padding-x);
    border: var(--outline-pill-border) solid transparent;
    border-radius: var(--radius-pill);
    background: var(--emphasis-action-basic-bg);
    color: var(--hierarchy-action-color);
    font-family: inherit;
    font-size: var(--outline-pill-font-size);
    line-height: var(--line-height-tight);
    text-align: center;
    text-decoration: none;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    box-sizing: border-box;
    cursor: pointer;
    --chip-alphabet-selected-bg: var(--control-selected-bg);
    --chip-alphabet-selected-border: var(--control-selected-border);
    --chip-alphabet-selected-color: var(--control-selected-color);
    --chip-alphabet-count-selected-bg: color-mix(in srgb, var(--control-selected-bg) 82%, var(--theme-surface-base));
    --chip-alphabet-count-selected-color: var(--control-selected-color);
}

.chip-alphabet:focus-visible {
    border-color: var(--border-color-focus);
    box-shadow: var(--state-focus-ring-shadow);
    outline: none;
}

.chip-label {
    display: inline-flex;
}

.chip-count {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background-color: var(--hover-main-btn-bg-color);
    color: var(--hierarchy-meta-color);
}

.chip-count .chip-token {
    white-space: nowrap;
}

.chip-count .chip-token + .chip-token::before {
    content: "·";
    margin: 0 var(--space-2) 0 var(--space-1);
    color: var(--hierarchy-meta-color);
}

.chip-start {
    width: min(100%, max-content);
    max-width: 100%;
    justify-content: flex-start;
}

.chip-start .chip-count {
    flex-wrap: wrap;
    white-space: normal;
    min-width: 0;
    flex: 1 1 auto;
}

.chip-start .chip-label {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.chip-alphabet[aria-current]:not([aria-current="false"]) {
    border-color: var(--chip-alphabet-selected-border);
    background-color: var(--chip-alphabet-selected-bg);
    color: var(--chip-alphabet-selected-color);
}

.chip-alphabet[aria-current]:not([aria-current="false"]) .chip-count {
    background-color: var(--chip-alphabet-count-selected-bg);
    color: var(--chip-alphabet-count-selected-color);
}

.chip-alphabet[aria-disabled="true"],
.chip-alphabet:disabled {
    opacity: var(--state-opacity-disabled-strong);
    cursor: default;
    pointer-events: none;
}