/* http://tympanus.net/codrops/2013/10/15/animated-checkboxes-and-radio-buttons-with-svg/ */

.rrui__checkbox .rrui__input
{
	display     : inline-flex;
	align-items : center;
}

.rrui__checkbox .rrui__input--multiline
{
	/* IE and Edge have a bug with `inline-flex`:
	   the multiline content shrinks in width. */
	display     : flex;
	align-items : flex-start;
}

.rrui__checkbox__label
{
	display        : inline-block;
	/* Using padding instead of margin here to make the gap clickable. */
	padding-left   : var(--rrui-control-label-margin);
	vertical-align : bottom;
	color          : inherit;
	user-select    : none;
}

.rrui__checkbox__label:not(.rrui__checkbox__label--multiline)
{
	white-space : nowrap;
}

.rrui__checkbox__label--multiline
{
	/* A fix for IE 11 to force it wrap `<label/>` text */
	flex : 1 0 0;
}

.rrui__checkbox--multiline .rrui__checkbox__checkbox
{
	margin-top: 0.12em;
}

.rrui__checkbox__input,
.rrui__checkbox__label
{
	cursor : pointer;
}

.rrui__checkbox--disabled
{
	pointer-events : none;
}

.rrui__checkbox__checkbox
{
	position    : relative;
	z-index     : 0;
	flex-shrink : 0;
	width       : var(--rrui-checkbox-size);
	height      : var(--rrui-checkbox-size);
	color       : var(--rrui-checkbox-stroke-color);
}

.rrui__checkbox__input
{
	position : absolute;
	z-index  : 3;
	left     : -40%;
	top      : -40%;
	width    : 180%;
	height   : 180%;
	margin   : 0;
	opacity  : 0;
}

.rrui__checkbox__box
{
	display        : block;
	position       : relative;
	z-index        : 2;
	width          : 100%;
	height         : 100%;
	fill           : currentColor;
	user-select    : none;
	pointer-events : none;
}

/* Checkbox color (:checked) */
.rrui__checkbox__box--checked
{
	color : var(--rrui-checkbox-color-checked);
}

/* Checkbox color (:focus) */
.rrui__checkbox__input:focus + .rrui__checkbox__box
{
	color : var(--rrui-checkbox-color-focus);
}

/* Checkbox color (:focus) (:checked) */
.rrui__checkbox__input:focus + .rrui__checkbox__box--checked
{
	color : var(--rrui-checkbox-color-checked-focus);
}

/* Checkbox color (:checked / :active) */
.rrui__checkbox__input:active + .rrui__checkbox__box
{
	color : var(--rrui-checkbox-color-active);
}

.rrui__checkbox__box-background
{
	position : absolute;
	top      : 0;
	left     : 0;
	z-index  : 1;
	width    : 100%;
	height   : 100%;
	background-color : var(--rrui-checkbox-fill-color);
	border-radius    : 10%;
	transform        : scale(0.9);
}

.rrui__checkbox--invalid .rrui__checkbox__box-background
{
	background-color : var(--rrui-input-field-background-color-error);
}

/* Checkbox color (:invalid) */
.rrui__checkbox--invalid .rrui__checkbox__box
{
	color : var(--rrui-input-field-border-color-error);
}

/* Checkbox color (:invalid) :focus */
.rrui__checkbox--invalid .rrui__checkbox__box:focus
{
	color : var(--rrui-input-field-border-color-error-focus);
}

/* Focus ring. */

.rrui__checkbox__focus-ring
{
	display: block;
	position: absolute;
	left: calc(-1 * (var(--rrui-checkbox-focus-ring-size) - 100%) / 2);
	top: calc(-1 * (var(--rrui-checkbox-focus-ring-size) - 100%) / 2);
	width: var(--rrui-checkbox-focus-ring-size);
	height: var(--rrui-checkbox-focus-ring-size);
	border-radius: 50%;
	z-index: 0;
}

.rrui__checkbox__input:focus + .rrui__checkbox__box + .rrui__checkbox__box-background + .rrui__checkbox__focus-ring
{
	background-color: var(--rrui-checkbox-focus-ring-background-color);
}

.rrui__checkbox__input:active + .rrui__checkbox__box + .rrui__checkbox__box-background + .rrui__checkbox__focus-ring
{
	background-color: var(--rrui-checkbox-focus-ring-background-color-active);
}