.theme-switcher {
    --option-height: 56px;
    --option-gap: 6px;
    position: fixed;
    z-index: 10000;
    bottom: 6rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--option-gap);
    width: 56px;
    padding: 8px 12px 6px;
    margin: 0;
    border: none;
    border-radius: 99em;
    font-size: 1rem;
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
    backdrop-filter: blur(8px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow: var(--glass-shadow);
    transform-origin: bottom center;
    transform: translateY(calc(100% + 4rem)) scale(0);
    opacity: 0;
    visibility: hidden;
    transition:
            transform 600ms var(--ease-out),
            opacity 400ms var(--ease-out),
            visibility 0s linear 600ms,
            background-color 400ms var(--ease-theme),
            box-shadow 400ms var(--ease-theme);
}

.theme-switcher.visible {
    transform: translateY(-4rem) scale(1);
    opacity: 1;
    visibility: visible;
    transition:
            transform 600ms var(--ease-out),
            opacity 400ms var(--ease-out),
            visibility 0s,
            background-color 400ms var(--ease-theme),
            box-shadow 400ms var(--ease-theme);
}

.theme-switcher .theme-switcher__icon {
    opacity: 0;
    transition: opacity 300ms var(--ease-out), scale 200ms cubic-bezier(0.5, 0, 0, 1);
}

.theme-switcher.visible .theme-switcher__icon {
    opacity: 1;
    transition-delay: 250ms, 0ms;
}

.theme-switcher__legend,
.theme-switcher__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.theme-switcher__icon {
    display: block;
    width: 100%;
}

.theme-switcher__option {
    --c: var(--c-content);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
    width: 100%;
    height: var(--option-height);
    border-radius: 99em;
    cursor: pointer;
}

@media (hover: hover) {
    .theme-switcher__option:hover {
        --c: var(--c-action);
    }

    .theme-switcher__option:hover .theme-switcher__icon {
        scale: 1.2;
    }
}

.theme-switcher__option:has(input:focus-visible) {
    outline: 2px solid var(--c-action);
    outline-offset: -2px;
}

.theme-switcher__option:has(input:checked) {
    --c: var(--c-content);
    cursor: auto;
}

.theme-switcher__option:has(input:checked) .theme-switcher__icon {
    scale: 1;
}

.theme-switcher::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
    display: block;
    width: calc(100% - 10px);
    height: calc(var(--option-height) + 12px);
    border-radius: 99em;
    background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
    z-index: -1;
    box-shadow: var(--glass-shadow-thumb);
    transition:
            background-color 400ms var(--ease-theme),
            box-shadow 400ms var(--ease-theme),
            translate 400ms var(--ease-theme);
}

.theme-switcher:has(input[c-option="1"]:checked)::after {
    translate: 0 0;
    transform-origin: bottom;
    animation: scaleToggleVertical 440ms ease;
}

.theme-switcher:has(input[c-option="2"]:checked)::after {
    translate: 0 calc(var(--option-height) + var(--option-gap));
    animation: scaleToggleVertical2 440ms ease;
}

.theme-switcher[c-previous="1"]:has(input[c-option="2"]:checked)::after {
    transform-origin: top;
}

.theme-switcher[c-previous="3"]:has(input[c-option="2"]:checked)::after {
    transform-origin: bottom;
}

.theme-switcher:has(input[c-option="3"]:checked)::after {
    translate: 0 calc(2 * (var(--option-height) + var(--option-gap)));
    transform-origin: top;
    animation: scaleToggleVertical3 440ms ease;
}

@keyframes scaleToggleVertical { 50% { scale: 1 1.1; } }
@keyframes scaleToggleVertical2 { 50% { scale: 1 1.2; } }
@keyframes scaleToggleVertical3 { 50% { scale: 1 1.1; } }

.theme-toggle {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--c-glass) 16%, transparent);
    backdrop-filter: blur(12px) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(12px) saturate(var(--saturation));
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out), background-color 0.3s, box-shadow 0.3s;
    box-shadow: var(--glass-shadow-button);
}

@media (hover: hover) {
    .theme-toggle:hover {
        transform: translateY(-2px) scale(1.05);
        background-color: color-mix(in srgb, var(--c-glass) 24%, transparent);
        box-shadow: var(--glass-shadow-hover);
    }

    .theme-toggle:hover svg.active {
        transform: rotate(15deg) scale(1.1);
        color: var(--c-action);
    }
}

.theme-toggle:active {
    transform: translateY(0px) scale(1);
}

.theme-toggle svg {
    position: absolute;
    width: 24px;
    height: 24px;
    color: var(--c-content);
    opacity: 0;
    transition:
            transform 0.3s var(--ease-out),
            color 0.3s var(--ease-out),
            opacity 0.3s var(--ease-out);
}

.theme-toggle svg.active {
    opacity: 1;
}

.theme-toggle[aria-expanded="true"] svg.active {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .theme-switcher {
        --option-height: 48px;
        width: 48px;
        bottom: 5rem;
        right: 1.5rem;
    }

    .theme-switcher.visible {
        transform: translateY(-3rem) scale(1);
    }

    .theme-switcher__option {
        padding: 10px 0;
    }

    .theme-toggle {
        width: 48px;
        height: 48px;
        bottom: 1.5rem;
        right: 1.5rem;
    }

    .theme-toggle svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .theme-switcher {
        --option-height: 44px;
        --option-gap: 4px;
        width: 44px;
        bottom: 4.5rem;
        right: 1.2rem;
    }

    .theme-switcher.visible {
        transform: translateY(-2.8rem) scale(0.95);
    }

    .theme-toggle {
        width: 44px;
        height: 44px;
        bottom: 1.2rem;
        right: 1.2rem;
    }

    .theme-toggle svg {
        width: 18px;
        height: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-switcher:has(input[c-option]:checked)::after {
        animation-duration: 0.01ms;
    }

    .theme-switcher,
    .theme-switcher.visible {
        transition-duration: 0.01ms;
    }
}