# Pattern

## What is it

## When to use it

## How to use it

## Example

Switch label

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

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