.theme-switch {
	position: relative;
        display: flex;
        align-items: center;
        width: 3.5em;   
        height: 1.5em;
        padding: 0.15em;
        border-radius: 999px;   
        background:
                rgba(255,255,255,0.10);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border:
                1px solid rgba(255,255,255,0.08);
        box-shadow:
                0 4px 14px rgba(0,0,0,0.08);
        overflow: hidden;  
}

.theme-option { 
        position: relative;
        z-index: 2;     
        flex: 1;
        height: 100%;
        border: none;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;    
        justify-content: center;
        padding: 0;
        transition:
                transform 0.2s ease;
}
                
.theme-icon {
        width: 1.1em;
        height: 1.1em;
        opacity: 0.8;
        filter:
                grayscale(1)
                brightness(0.7);

        transition:
                filter 0.25s ease,
                opacity 0.25s ease,
                transform 0.2s ease;
}

.theme-option.active .theme-icon {
        opacity: 1;
        filter:
                brightness(0)
                invert(1)
                drop-shadow(
                        0 0 2px rgba(255,255,255,0.12)
                );
}

.theme-switch-slider {
        position: absolute;
        top: 0.15em;
        left: 0.15em;
        width: calc(50% - 0.15em);
        height: calc(100% - 0.3em);
        border-radius: 999px;
        background: var(--bup-color);
        box-shadow:
                0 4px 12px rgba(52,126,177,0.35);
        transition:
                transform 0.3s ease,
                background 0.25s ease;
}

.theme-switch.is-dark .theme-switch-slider {
        transform: translateX(100%);
}

[data-theme="dark"] .theme-switch {
        background:
                rgba(255,255,255,0.05);
}