.ec-multi-state-switch {
    --ec-multi-state-count: 1;
    --ec-multi-state-offset: 0%;
    --ec-multi-state-duration: 180ms;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--ec-multi-state-count), minmax(0, 1fr));
    min-width: 0;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #eef2f6;
    isolation: isolate;
}

.ec-multi-state-switch::before {
    position: absolute;
    z-index: 0;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / var(--ec-multi-state-count));
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.14);
    content: "";
    transform: translateX(var(--ec-multi-state-offset));
    transition: transform var(--ec-multi-state-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.ec-multi-state-switch label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 0;
    min-height: 40px;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    color: var(--muted-color);
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color 160ms ease;
}

.ec-multi-state-switch label:hover {
    color: var(--text-color);
}

.ec-multi-state-switch label.is-selected {
    color: var(--active-color-focus);
}

.ec-multi-state-copy {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.3rem;
    min-width: 0;
}

.ec-multi-state-copy small {
    color: inherit;
    font-size: 0.76em;
    font-weight: 700;
}

.ec-multi-state-switch label:has(input:focus-visible) {
    outline: 3px solid rgba(51, 117, 170, 0.24);
    outline-offset: 1px;
}

.ec-multi-state-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ec-multi-state-switch.is-compact {
    border-radius: 8px;
    background: var(--body-background);
}

.ec-multi-state-switch.is-compact label {
    min-height: 36px;
    padding: 0.45rem 0.7rem;
    font-size: 0.78rem;
}

.ec-multi-state-switch.is-disabled {
    opacity: 0.65;
}

.ec-multi-state-switch.is-disabled label {
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .ec-multi-state-switch::before,
    .ec-multi-state-switch label {
        transition: none;
    }
}