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

@use "sass:math";

$switch-accent: #2e51a1 !default;     // switch background when switched right (on/ true)
$switch-background: #d8d8d8 !default;   // switch background when switched left (off / false)
$switch-color: 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%);
			}
		}
	}
}