.toggle {
	--uiToggleSize: var(--toggleSize, 20px);
	--uiToggleIndent: var(--toggleIndent, .4em);
	--uiToggleBorderWidth: var(--toggleBorderWidth, 2px);
	--uiToggleColor: var(--toggleColor, #000);
	--uiToggleDisabledColor: var(--toggleDisabledColor, #868e96);
	--uiToggleBgColor: var(--toggleBgColor, #fff);
	--uiToggleArrowWidth: var(--toggleArrowWidth, 2px);
	--uiToggleArrowColor: var(--toggleArrowColor, #fff);
	display: inline-block;
	position: relative;
}
.toggle__input {
	position: absolute;
	left: -99999px;
}
.toggle__label {
	display: inline-flex;
	cursor: pointer;
	min-height: var(--uiToggleSize);
	padding-left: calc(var(--uiToggleSize) + var(--uiToggleIndent));
}
.toggle__label:before,
.toggle__label:after {
	content: "";
	box-sizing: border-box;
	width: 25px;
	height: 25px;
	font-size: var(--uiToggleSize);
	position: absolute;
	left: 0;
}
.toggle__label:before {
	border: var(--uiToggleBorderWidth) solid var(--uiToggleColor);
	z-index: 2;
}
.toggle__input:disabled ~ .toggle__label:before {
	border-color: var(--uiToggleDisabledColor);
}
.toggle__input:focus ~ .toggle__label:before {
	box-shadow: 0 0 0 2px var(--uiToggleBgColor), 0 0 0px 4px var(--uiToggleColor);
}
.toggle__input:not(:disabled):checked:focus ~ .toggle__label:after {
	box-shadow: 0 0 0 2px var(--uiToggleBgColor), 0 0 0px 4px var(--uiToggleColor);
}
.toggle__input:not(:disabled) ~ .toggle__label:after {
	background-color: var(--uiToggleColor);
	opacity: 0;
}
.toggle__input:not(:disabled):checked ~ .toggle__label:after {
	opacity: 1;
}
.toggle__text {
	margin-top: auto;
	margin-bottom: auto;
	color: #6a6a6a;
	font-weight: normal;
	font-size: 14px;
	line-height: 14px;
	text-align: left;
}
/*
			The arrow size and position depends from sizes of square because I needed an arrow correct positioning from the top left corner of the element toggle
			*/

.toggle__text:before {
	content: "";
	box-sizing: border-box;
	width: 0;
	height: 0;
	font-size: var(--uiToggleSize);
	border-left-width: 0;
	border-bottom-width: 0;
	border-left-style: solid;
	border-bottom-style: solid;
	border-color: var(--uiToggleArrowColor);
	position: absolute;
	left: 5px;
	z-index: 3;
	transform-origin: left top;
	transform: rotate(-40deg) skew(10deg);
}
.toggle__input:not(:disabled):checked ~ .toggle__label .toggle__text:before {
	width: 10px;
	height: 10px;
	border-left-width: var(--uiToggleArrowWidth);
	border-bottom-width: var(--uiToggleArrowWidth);
	will-change: width, height;
	transition: width .1s ease-out .2s, height .2s ease-out;
	margin-top: 4px;
}
/*
			=====
			LEVEL 2. PRESENTATION STYLES
			=====
			*/

/* 
			The demo skin
			*/

.toggle__label:before,
.toggle__label:after {
	border-radius: 2px;
}
/* 
			The animation of switching states
			*/

.toggle__input:not(:disabled) ~ .toggle__label:before,
.toggle__input:not(:disabled) ~ .toggle__label:after {
	opacity: 1;
	transform-origin: center center;
	will-change: transform;
	transition: transform .2s ease-out;
}
.toggle__input:not(:disabled) ~ .toggle__label:before {
	transform: rotateY(0deg);
	transition-delay: .2s;
}
.toggle__input:not(:disabled) ~ .toggle__label:after {
	transform: rotateY(90deg);
}
.toggle__input:not(:disabled):checked ~ .toggle__label:before {
	transform: rotateY(-90deg);
	transition-delay: 0s;
}
.toggle__input:not(:disabled):checked ~ .toggle__label:after {
	transform: rotateY(0deg);
	transition-delay: .2s;
}
.toggle__text:before {
	opacity: 0;
}
.toggle__input:not(:disabled):checked ~ .toggle__label .toggle__text:before {
	opacity: 1;
	transition: opacity .1s ease-out .3s, width .1s ease-out .5s, height .2s ease-out .3s;
}
/*
			=====
			LEVEL 3. SETTINGS
			=====
			*/

.toggle {
	--toggleColor: #4C8DF7;
	--toggleBgColor: #4C8DF7;
	--toggleSize: 30px;
}
/*
			=====
			DEMO
			=====
			*/

.page {} .page__toggle {
	font-size: 28px;
	font-weight: 700;
	color: #fff;
}
.page__toggle:nth-child(n+2) {
	margin-top: 50px;
}