span#example-id(role="switch")

[role=switch] {
	display: -ms-inline-grid;
	display: inline-grid;
	border: 1px solid #2e51a1;
	background-color: #e9e9ea;
	border-radius: 0.75rem;
	height: 1.5rem;
	width: 3rem;
	-webkit-transition: all 500ms;
	transition: all 500ms;
}
[role=switch] > span {
	display: inline-block;
	background-color: white;
	border-radius: 50%;
	margin: 2%;
	width: calc(1.5rem - 2%);
	-webkit-transition: all 500ms;
	transition: all 500ms;
}
[role=switch][aria-checked=true] {
	background-color: #2e51a1;
}
[role=switch][aria-checked=true] > span {
	margin-left: calc(1.5rem - 5%);
}

@use "sass:math";

$switch-accent: #2e51a1 !default;     // switch background when switched right (on/ true)
$switch-background: #e9e9ea !default;   // switch background when switched left (off / false)
$switch-color: #ffffff !default;    // the colour of the switch
$switch-height: 1.5rem !default;

@mixin switch {  
	[role='switch'] {
		display: inline-grid;
		border: 1px solid $switch-accent;
		background-color: $switch-background;
		border-radius: math.div($switch-height, 2);
		height: $switch-height;
		width: #{$switch-height * 2};
		transition: all 500ms;
		> span {
			display: inline-block;
			background-color: white;
			border-radius: 50%;
			margin: 2%;
			width: calc(#{$switch-height} - 2%);
			transition: all 500ms;
		}
	
		&[aria-checked="true"] {
			background-color: $switch-accent;
			> span {
				margin-left: calc(#{$switch-height} - 5%);
			}
		}
	}
}

function flip(e) {
	let sw = e.currentTarget;
	switch(sw.getAttribute("aria-checked")) {
		case "true": 
			sw.setAttribute("aria-checked", "false");
		break;
		case "false": 
			sw.setAttribute("aria-checked", "true");
		break;
	}
};


function init(callback){
	let sw = document.querySelectorAll("[role='switch']");
	for (let i=0; i < sw.length; i++) {
		sw[i].innerHTML = "";
		sw[i].setAttribute("aria-checked", "false");
		sw[i].setAttribute("tabindex", "0");
		sw[i].addEventListener("click", flip, false);
		sw[i].addEventListener("keypress", flip, false);
	}
}

export {init};