.entity-letter-index-control {
    --eli-ink: var(--mc-theme-color-ink, #151515);
    --eli-accent: var(--mc-theme-color-accent, #8a0031);
    --eli-muted: color-mix(in srgb, var(--eli-ink) 42%, transparent);
    --eli-marker-size: 18px;
    color: var(--eli-ink);
    font-family: var(--mc-theme-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
}

.entity-letter-index-control--side-rail,
.entity-letter-index-control--sticky-right {
    float: right;
    margin: 0 0 16px 20px;
}

.entity-letter-index-control--sticky-right {
    position: sticky;
    top: var(--eli-sticky-top, 96px);
    z-index: 5;
}

.entity-letter-index-control--inline {
    margin: 0 0 16px;
}

.entity-letter-index-letters {
    position: relative;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
}

.entity-letter-index-control--vertical .entity-letter-index-letters {
    flex-direction: column;
    align-items: center;
}

.entity-letter-index-control--horizontal .entity-letter-index-letters {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.entity-letter-index-letter {
    position: relative;
    z-index: 1;
    inline-size: 2rem;
    block-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--eli-accent);
    font: inherit;
    font-size: 1.45rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition: color 160ms ease, transform 160ms ease;
}

.entity-letter-index-letter:hover,
.entity-letter-index-letter:focus-visible {
    color: var(--eli-ink);
    outline: none;
    transform: translateX(-2px);
}

.entity-letter-index-control--horizontal .entity-letter-index-letter:hover,
.entity-letter-index-control--horizontal .entity-letter-index-letter:focus-visible {
    transform: translateY(-2px);
}

.entity-letter-index-letter.is-active {
    color: var(--eli-accent);
}

.entity-letter-index-letter.is-unavailable,
.entity-letter-index-letter:disabled {
    color: var(--eli-muted);
    cursor: default;
    transform: none;
}

.entity-letter-index-active-marker {
    position: absolute;
    z-index: 0;
    inline-size: var(--eli-marker-size);
    block-size: 6px;
    border-radius: 999px;
    background: var(--eli-accent);
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition:
        opacity 160ms ease,
        transform 220ms ease,
        inline-size 220ms ease,
        block-size 220ms ease;
    pointer-events: none;
}

.entity-letter-index-control--vertical .entity-letter-index-active-marker {
    left: calc(50% - 2rem);
}

.entity-letter-index-control--horizontal .entity-letter-index-active-marker {
    top: calc(100% - 6px);
}

.entity-letter-index-control.has-active-marker .entity-letter-index-active-marker {
    opacity: 1;
}

@media (max-width: 720px) {
    .entity-letter-index-control--side-rail,
    .entity-letter-index-control--sticky-right {
        float: none;
        position: static;
        margin: 0 0 12px;
        overflow-x: auto;
    }

    .entity-letter-index-control--side-rail .entity-letter-index-letters,
    .entity-letter-index-control--sticky-right .entity-letter-index-letters {
        flex-direction: row;
    }

    .entity-letter-index-letter {
        inline-size: 1.75rem;
        block-size: 1.75rem;
        font-size: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .entity-letter-index-letter,
    .entity-letter-index-active-marker {
        transition: none !important;
    }
}