:root {
    --toggle-bg: #00000066;
    --toggle-border: black;
    --toggle-handle: #f55139;
}

html[data-theme='light'] {
    --toggle-bg: #0000006d;
    --toggle-border: transparent;
    --toggle-handle: #ebe7d9;
}

.theme-switch-wrapper {
    display:flex;
    align-items: center;
    justify-content: left;
    width: 30%;
}

.theme-switch-checkbox {
    opacity: 0;
    pointer-events: none;
}

.theme-switch-label {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 1rem;
    width: 80px;
    height: 35px;
    background-color: var(--toggle-bg);
    border-radius: 15px;
    cursor: pointer;
    border: 2px solid var(--toggle-border);
    transition: background-color 0.3s;
}

.switch-slider {
    position: absolute;
    left: 4px;
    width: 30px;
    height: 28px;
    background-color: var(--toggle-handle);
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sun-icon, .moon-icon {
    position: absolute;
    font-size: 18px;
    transition: opacity 0.3s ease;
    color:var(--toggle-handle);
}

.sun-icon{left:8px; opacity:0;}
.moon-icon{right:8px; opacity:1;}

.theme-switch-checkbox:checked + .theme-switch-label .switch-slider {
    transform: translateX(40px);
}

.theme-switch-checkbox:checked + .theme-switch-label .sun-icon {
    opacity: 1;
}

.theme-switch-checkbox:checked + .theme-switch-label .moon-icon {
    opacity: 0;
}