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

[role=switch] {
	display: -ms-inline-grid;
	display: inline-grid;
	border: 1px solid var(--colour-blue);
	background-color: var(--colour-grey-xl);
	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: var(--colour-blue);
}
[role=switch][aria-checked=true] > span {
	margin-left: calc(1.5rem - 5%);
}

//-		DS2 core (c) 2024 Alexander McIlwraith 
//-		Licensed under CC BY-SA 4.0 

@use "sass:math";

$switch-accent: var(--colour-blue) !default;     // switch background when switched right (on/ true)
$switch-background: var(--colour-grey-xl) !default;   // switch background when switched left (off / false)
$switch-color: var(--colour-white) !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%);
			}
		}
	}
}

//-		DS2 core (c) 2024 Alexander McIlwraith 
//-		Licensed under CC BY-SA 4.0 

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;
	}
};

module.exports = {
	init: (p = document) => {
		p.querySelectorAll("[role='switch']").forEach((sw) => {
			sw.innerHTML = "";
			sw.setAttribute("aria-checked", "false");
			sw.setAttribute("tabindex", "0");
			sw.addEventListener("click", flip, false);
			sw.addEventListener("keypress", flip, false);
		})
	}
}