label[theme] {
    align-items: center;
    display: flex;
    font-size: 0.9em;
    height: var(--size-header-height);
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: var(--size-header-height);
}

label[theme]::before {
    background-color: var(--color-keyboard-focus);
    border-radius: calc(var(--size-navigation-size) * 0.5);
    content: '';
    height: var(--size-navigation-size);
    left: 50%;
    opacity: 0;
    position: absolute;
    top: calc(var(--size-navigation-size) * 3);
    transform: translateX(-50%);
    transition: opacity var(--time-active-transition);
    width: 1em;
}

label[theme]:has(input:focus-visible) span {
    color: var(--color-keyboard-focus);
}

label[theme]:has(input:focus-visible):hover span {
    color: var(--color-active);
}

label[theme]:has(input:focus-visible)::before {
    opacity: 1;
}

label[theme]:has(input:checked) span:nth-child(1) {
    opacity: 1;
    top: 0;
}

label[theme]:has(input:checked) span:nth-child(2) {
    opacity: 0;
    top: 100%;
    transition: opacity calc(var(--time-active-transition) * 0.5),
        top var(--time-active-transition);
}

label[theme]:hover span {
    color: var(--color-active);
}

label[theme]:not(label[theme]:has(input:checked)) span:nth-child(1) {
    opacity: 0;
    top: -100%;
    transition: opacity calc(var(--time-active-transition) * 0.5),
        top var(--time-active-transition);
}

label[theme]:not(label[theme]:has(input:checked)) span:nth-child(2) {
    opacity: 1;
    top: 0;
}

label[theme] input {
    bottom: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

label[theme] span {
    align-items: center;
    display: flex;
    height: var(--size-header-height);
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    transition: color var(--time-active-transition),
        opacity calc(var(--time-active-transition) * 0.5) calc(var(--time-active-transition) * 0.5),
        top var(--time-active-transition);
    width: var(--size-header-height);
}