_custom.css

body {
    /* MARK: Toggle Button Checkbox */
    /* INFO: gr.Checkbox elem_classes".toggle-btn" */
    
    .toggle-btn {
    	display: flex;
    	flex-direction: column-reverse;
    
    	&>div.wrap {
    		display: none;
    	}
    
    	&>div:not(.wrap) {
    		margin-top: var(--spacing-lg);
    		margin-bottom: 0;
    	}
    
    	&>label {
    		position: relative;
    		width: 57px;
    		height: 27px;
    		display: inline-block;
    		border-radius: 13px;
    		background: var(--neutral-700);
    		box-shadow: var(--shadow-inset);
    		transition: background-color 0.3s, cursor 0.3s;
    		border: solid 0.4px var(--border-color-primary);
    		cursor: pointer;
    
    		&>input[type="checkbox"] {
    			width: 0;
    			height: 0;
    			opacity: 0;
    		}
    
    		&>span {
    			position: absolute;
    			left: 60px;
    			height: 27px;
    			min-width: 140px;
    			line-height: 27px;
    		}
    	}
    
    	&>label:has(input[type="checkbox"])::after {
    		content: "";
    		position: absolute;
    		top: 3px;
    		left: 3px;
    		width: 20px;
    		height: 20px;
    		border-radius: 50%;
    		background: var(--neutral-900);
    		box-shadow: var(--shadow-inset);
    		transition: left 0.2s ease-in-out, background 0.2s ease-in-out;
    	}
    
    	&>label:has(input[type="checkbox"]:checked)::after {
    		content: "";
    		position: absolute;
    		background: var(--neutral-900);
    		opacity: 0.8;
    		left: 32px;
    	}
    
    	&>label:has(input[type="checkbox"]:checked) {
    		background: var(--primary-600);
    	}
    }
}