.theme-switcher {
    position: relative;
    border: 2px solid var(--gray-light);
    border-radius: 1.6em;
    box-shadow: var(--shadow--lighter);
    padding: 0.2em 0.3em;
	width: 4em;
	height: calc(2.3em + 1px);
    cursor: pointer;
}
    .theme-switcher__indicator {
        border-radius: 50%;
        display: inline-block;
        padding: 0.75em;
        position: absolute;
        box-shadow: var(--shadow--light);
        transition: 0.1s;
    }
        .theme-switcher--dark .theme-switcher__indicator {
            transform: translateX(1.5em);
            padding: 0.85em;
            background-color: var(--primary);
        }
        .theme-switcher--light .theme-switcher__indicator {
            transform: translateX(-4%);
            top: 14%;
            background-color: var(--secondary);
        }
    
    .theme-switcher__icon {
        z-index: 2;
    }
        .theme-switcher__icon--dark {
            position: absolute;
            right: 16%;
            top: 25%;
            color: var(--dark);
        }
        .theme-switcher__icon--light {
            position: absolute;
            left: 13%;
            top: 24%;
            color: white;
        }