//------------------------------------------------------------------------------------------------
// SWITCH
//------------------------------------------------------------------------------------------------

/*
Switch component for toggling options on/off.
*/


// COMPONENT COLOURS
//------------------------------------------------------------------------------------------------

/*
Easily assign colours to the component without having to
find/replace variables.
*/

$component-switch-background-color: 'very-light' !default;
$component-switch-border-color: 'light' !default;
$component-switch-button-color: 'white' !default;
$component-switch-focus-color: 'primary' !default;


// BLOCK & ELEMENTS
//------------------------------------------------------------------------------------------------

.c-switch__input {
	width: rem(60px);
	height: rem(30px);
	background-color: color($component-switch-background-color);
	border: rem(1px) solid color($component-switch-border-color);
	border-radius: rem(15px);
	transition: box-shadow $global-transition-duration, background-color $global-transition-duration;
	position: relative;
	cursor: pointer;
	&:before {
		content: '';
		width: rem(30px);
		height: rem(30px);
		border-radius: 50%;
		background-color: color($component-switch-button-color);
		border: rem(1px) solid color($component-switch-border-color);
		display: block;
		position: absolute;
		top: rem(-1px);
		left: rem(-1px);
		transition: left $global-transition-duration;
	}
	&:focus {
		outline: none;
		box-shadow: 0 rem(1px) rem(3px) rgba(0,0,0, 0.25), 0 0 rem(15px) rem(3px) rgba(color($component-switch-focus-color), 0.5) /* [3] */
	}
}

.c-switch__checkbox {
	display: none;
}

.c-switch__checkbox:checked + .c-switch__input {
	background-color: color('positive');
	&:before {
		left: rem(29px);
	}
}

.c-switch__label {
	display: block;
	cursor: pointer;
	white-space: nowrap;
	font-weight: bold;
	margin-bottom: rem(10px);
}

// STATE MODIFIERS
//------------------------------------------------------------------------------------------------

.c-switch.is-disabled,
.is-disabled .c-switch:not(.c-switch--disable-state-inheritance),
*[disabled] .c-switch:not(.c-switch--disable-state-inheritance) {
	pointer-events: none;
	.c-switch__input {
		background-color: color($component-switch-border-color);
		&:before {
			background-color: color($component-switch-background-color);
		}
	}
}