.rrui__switch
{
	display     : inline-flex;
	align-items : center;

	/* The label is `display: inline-flex`
	   so it behaves like an "inline" element
	   and so its width is not limited to `100%`
	   when `overflow: hidden`. */
	max-width : 100%;

	cursor      : pointer;
	user-select : none;

	-webkit-tap-highlight-color : transparent;
	tap-highlight-color         : transparent;
}

.rrui__switch--disabled
{
	cursor : default;
}

.rrui__switch--label
{
	display     : inline-flex;
	align-items : center;
}

.rrui__switch__switch
{
	display         : flex;
	align-items     : center;
	justify-content : center;
	position        : relative;
	line-height     : 0;
}

.rrui__switch__input
{
	left   : calc(var(--rrui-switch-clickable-padding) * -1);
	right  : calc(var(--rrui-switch-clickable-padding) * -1);
	width  : calc(100% + var(--rrui-switch-clickable-padding) * 2);
	height : calc(100% + var(--rrui-switch-clickable-padding) * 2);
	cursor : pointer;
}

.rrui__switch__label--on
{
	color : var(--rrui-switch-label-color-on);
}

.rrui__switch__label--left
{
	margin-right : var(--rrui-control-label-margin);
}

.rrui__switch__label--right
{
	margin-left : var(--rrui-control-label-margin);
}

.rrui__switch__groove
{
	position : relative;
	display  : inline-block;

	width  : var(--rrui-switch-width);
	height : var(--rrui-switch-height);

	color            : var(--rrui-switch-accent-color);
	background-color : var(--rrui-switch-background-color);
	/* Using `* 0.5` instead of `/ 2` because of an IE11 bug:
	   https://stackblitz.com/edit/ie11-border-radius-calc-issue?file=style.css */;
	border-radius    : calc(var(--rrui-switch-height) * 0.5);
	border           : var(--rrui-switch-groove-border-width) solid var(--rrui-switch-groove-border-color);
	transition       : var(--rrui-switch-groove-transition);
	box-sizing       : border-box;
}

.rrui__switch__input:focus + .rrui__switch__groove
{
	box-shadow: var(--rrui-switch-focus-outline-shadow);
}

.rrui__switch__groove--on
{
	border-color: currentColor;
	background-color: currentColor;
}

.rrui__switch__knob
{
	position      : absolute;
	width         : var(--rrui-switch-knob-size);
	height        : var(--rrui-switch-knob-size);
	/* Using `* 0.5` instead of `/ 2` because of an IE11 bug:
   https://stackblitz.com/edit/ie11-border-radius-calc-issue?file=style.css */;
	border-radius : calc(var(--rrui-switch-knob-size) * 0.5);
	top           : calc((var(--rrui-switch-height) - var(--rrui-switch-knob-size)) / 2);
	left          : calc((var(--rrui-switch-height) - var(--rrui-switch-knob-size)) / 2);
	background-color : var(--rrui-switch-knob-background-color);
	box-shadow    : var(--rrui-switch-knob-box-shadow);
	/* `transform` uses pre-calculated `translateX` because IE11
	    doesn't know how to handle `calc()` inside `transofrm`. */
	/* https://stackoverflow.com/questions/21469350/not-possible-to-use-css-calc-with-transformtranslatex-in-ie */
	transition    : var(--rrui-switch-knob-transition);
}

.rrui__switch__knob--on
{
	background-color: var(--rrui-switch-knob-background-color-on);
	transform: translateX(var(--rrui-switch-knob-translate-on));
}

.rrui__switch__input:focus + .rrui__switch__groove + .rrui__switch__knob
{
	box-shadow: var(--rrui-switch-knob-box-shadow), inset 0 0 0 0.03em var(--rrui-switch-knob-border-color-focus);
}