.ui-switcher {
	position: relative;
	display: inline-block;
	height: 22px;
	width: 53px;
	border-radius: 32px;
	overflow: hidden;
	box-sizing: border-box;
	cursor: pointer;
	z-index: 4;
	-webkit-user-select: none;
	        user-select: none;
}

.ui-switcher-enabled,
.ui-switcher-disabled {
	display: inline-block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	color: rgba(var(--ui-color-on-primary-rgb), var(--ui-opacity-40));
	font-size: var(--ui-font-size-6xs);
	line-height: 22px;
	font-family: var(--ui-font-family-open-sans);
	font-weight: var(--ui-font-weight-bold, 700);
	text-transform: uppercase;
	vertical-align: middle;
	transition: opacity .2s ease-out;
	overflow: hidden;
	box-sizing: border-box;
	z-index: 1;
}

.ui-switcher-enabled {
	padding: 0 25px 0 0;
	background-color: var(--ui-color-primary);
	text-align: right;
	z-index: 2;
}

.ui-switcher-disabled {
	padding: 0 0 0 22px;
	background-color: var(--ui-color-base-15);
	color: var(--ui-color-base-40);
}

.ui-switcher-cursor {
	position: absolute;
	top: 50%;
	left: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ui-color-background-primary);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .09);
	transform: translate(33px, -50%);
	transition: transform .2s ease-out;
	z-index: 3;
}

.ui-switcher-cursor svg {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: inherit;
	width: inherit;
	animation: rotate 1s linear infinite;
	transform-origin: center center;
}

.ui-switcher-cursor svg circle {
	stroke: #ccc;
	stroke-dasharray: 60, 200;
	stroke-dashoffset: 0;
	animation: dash 1.5s linear infinite;
	stroke-linecap: round;
}

/* region ---STATES--- */

/* SIZE */
.ui-switcher-size-xs.ui-switcher {
	width: 25px;
	height: 13px;
}

.ui-switcher-size-xs .ui-switcher-cursor {
	/*top: 2px;*/
	width: 9px;
	height: 9px;
}

.ui-switcher-size-xs .ui-switcher-enabled,
.ui-switcher-size-xs .ui-switcher-disabled {
	padding: 0;
	font-size: 0;
}

.ui-switcher-size-xs .ui-switcher-cursor {
	transform: translate(12px, -50%);
}

.ui-switcher-size-sm.ui-switcher {
	width: 43px;
	height: 17px;
}

.ui-switcher-size-sm .ui-switcher-cursor {
	width: 11px;
	height: 11px;
}

.ui-switcher-size-sm .ui-switcher-enabled,
.ui-switcher-size-sm .ui-switcher-disabled {
	font-size: var(--ui-font-size-7xs);
	line-height: 17px;
	font-family: var(--ui-font-family-open-sans);
	font-weight: var(--ui-font-weight-bold, 700);
}

.ui-switcher-size-sm .ui-switcher-enabled {
	padding: 0 21px 0 0;
}

.ui-switcher-size-sm .ui-switcher-disabled {
	padding: 0 0 0 17px;
}

.ui-switcher-size-sm .ui-switcher-cursor {
	transform: translate(27px, -50%);
}

/* COLORS */

.ui-switcher-color-green .ui-switcher-enabled {
	background-color: #bbed22;
	text-align: right;
	color: rgba(var(--ui-color-text-secondary-rgb), var(--ui-opacity-30));
}

.ui-switcher-off .ui-switcher-cursor {
	transform: translate(4px, -50%);
}

.ui-switcher-off .ui-switcher-disabled {
	opacity: 1;
}

.ui-switcher-off .ui-switcher-enabled {
	opacity: 0;
}

.ui-switcher-lock {
	opacity: .4;
	cursor: not-allowed;
}
/* endregion */

/* The ring is drawn outside the box: `overflow: hidden` above clips the children, not the own
   outline, and the switcher is too short for an inset ring to leave the cursor visible.
   [role="switch"] keeps it away from the switchers that never asked for the semantics. */
.ui-switcher[role="switch"]:focus-visible {
	outline: var(--ui-focus-outline-width) solid var(--ui-color-focus-outline);
	outline-offset: var(--ui-focus-outline-offset);
}

.ui-switcher.--air {
	--ui-switcher-width: 30px;
	--ui-switcher-height: 15px;
	--ui-switcher-cursor-size: 11px;
	--ui-switcher-off-cursor-translate: 2px;
	--ui-switcher-on-cursor-translate: calc(var(--ui-switcher-width) - var(--ui-switcher-cursor-size) - var(--ui-switcher-off-cursor-translate));

	width: var(--ui-switcher-width);
	height: var(--ui-switcher-height);
	/* The shorthand and not `background-color`: some designs paint the track with a gradient, and a
	   colour property takes none - one variable has to carry both kinds. */
	background: var(--ui-switcher-bg);
	border-radius: 512px;
	/* The ring is an inset shadow, not a border: a border is taken out of the track (`box-sizing:
	   border-box` in style.css) and would leave the cursor no gap on the smaller sizes, while
	   `outline` is already taken by the focus ring. */
	box-shadow: inset 0 0 0 var(--ui-switcher-stroke-weight) var(--ui-switcher-stroke);
}

/* SIZE */
.ui-switcher.--air.ui-switcher-size-xss {
	--ui-switcher-width: 19px;
	--ui-switcher-height: 10px;
	--ui-switcher-cursor-size: 6px;
	--ui-switcher-off-cursor-translate: 2px;
}

.ui-switcher.--air.ui-switcher-size-xs {
	--ui-switcher-width: 23px;
	--ui-switcher-height: 12px;
	--ui-switcher-cursor-size: 8px;
	--ui-switcher-off-cursor-translate: 2px;
}

.ui-switcher.--air.ui-switcher-size-sm {
	--ui-switcher-width: 27px;
	--ui-switcher-height: 14px;
	--ui-switcher-cursor-size: 10px;
	--ui-switcher-off-cursor-translate: 2px;
}

.ui-switcher.--air.ui-switcher-size-md {
	--ui-switcher-width: 30px;
	--ui-switcher-height: 15px;
	--ui-switcher-cursor-size: 11px;
	--ui-switcher-off-cursor-translate: 2px;
}

.ui-switcher.--air.ui-switcher-size-lg {
	--ui-switcher-width: 40px;
	--ui-switcher-height: 19px;
	--ui-switcher-cursor-size: 15px;
	--ui-switcher-off-cursor-translate: 2px;
}

.ui-switcher.--air.ui-switcher-size-xl {
	--ui-switcher-width: 51px;
	--ui-switcher-height: 25px;
	--ui-switcher-cursor-size: 19px;
	--ui-switcher-off-cursor-translate: 3px;
}

/* STYLE */
.ui-switcher.--air,
.ui-switcher.--air.--style-filled {
	--ui-switcher-bg: var(--ui-color-design-filled-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-filled-content);
	--ui-switcher-stroke: var(--ui-color-design-filled-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-filled-stroke-weight);
}

.ui-switcher.--air.--style-tinted {
	--ui-switcher-bg: var(--ui-color-design-tinted-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-tinted-content);
	--ui-switcher-stroke: var(--ui-color-design-tinted-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-tinted-stroke-weight);
}

.ui-switcher.--air.--style-filled-success {
	--ui-switcher-bg: var(--ui-color-design-filled-success-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-filled-success-content);
	--ui-switcher-stroke: var(--ui-color-design-filled-success-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-filled-success-stroke-weight);
}

.ui-switcher.--air.--style-filled-alert {
	--ui-switcher-bg: var(--ui-color-design-filled-alert-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-filled-alert-content);
	--ui-switcher-stroke: var(--ui-color-design-filled-alert-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-filled-alert-stroke-weight);
}

.ui-switcher.--air.--style-filled-warning {
	--ui-switcher-bg: var(--ui-color-design-filled-warning-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-filled-warning-content);
	--ui-switcher-stroke: var(--ui-color-design-filled-warning-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-filled-warning-stroke-weight);
}

.ui-switcher.--air.--style-filled-black {
	--ui-switcher-bg: var(--ui-color-design-filled-black-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-filled-black-content);
	--ui-switcher-stroke: var(--ui-color-design-filled-black-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-filled-black-stroke-weight);
}

.ui-switcher.--air.--style-filled-white {
	--ui-switcher-bg: var(--ui-color-design-filled-white-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-filled-white-content);
	--ui-switcher-stroke: var(--ui-color-design-filled-white-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-filled-white-stroke-weight);
}

.ui-switcher.--air.--style-filled-na {
	--ui-switcher-bg: var(--ui-color-design-filled-na-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-filled-na-content);
	--ui-switcher-stroke: var(--ui-color-design-filled-na-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-filled-na-stroke-weight);
}

/* The gradient fills. The stops come from the group, but the type, the angle and the percentages are not
   in the tokens: each recipe is taken whole from a component that already draws the group - these two
   from the button of the same module (`ui.air-buttons.css`), the two below from the label. */
.ui-switcher.--air.--style-filled-bitrix-gpt {
	--ui-switcher-bg: linear-gradient(
		263.02deg,
		var(--ui-color-design-filled-bitrix-gpt-bg-gradient-5) 2.92%,
		var(--ui-color-design-filled-bitrix-gpt-bg-gradient-4) 25.99%,
		var(--ui-color-design-filled-bitrix-gpt-bg-gradient-3) 49.07%,
		var(--ui-color-design-filled-bitrix-gpt-bg-gradient-2) 76.77%,
		var(--ui-color-design-filled-bitrix-gpt-bg-gradient-1) 86%
	);
	--ui-switcher-cursor-bg: var(--ui-color-design-filled-bitrix-gpt-content);
	/* the group carries no `-stroke`: its outline is a gradient, which a shadow cannot draw */
	--ui-switcher-stroke: transparent;
	--ui-switcher-stroke-weight: var(--ui-design-filled-bitrix-gpt-stroke-weight);
}

/* Radial and not linear: the shape belongs to the group, and the button draws this group radially. */
.ui-switcher.--air.--style-filled-boost {
	--ui-switcher-bg: radial-gradient(
		110.42% 110.42% at -10.42% 31.25%,
		var(--ui-color-design-filled-boost-bg-gradient-1) 0%,
		var(--ui-color-design-filled-boost-bg-gradient-2) 58.65%,
		var(--ui-color-design-filled-boost-bg-gradient-3) 100%
	);
	--ui-switcher-cursor-bg: var(--ui-color-design-filled-boost-content);
	--ui-switcher-stroke: var(--ui-color-design-filled-boost-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-filled-boost-stroke-weight);
}

.ui-switcher.--air.--style-tinted-a1 {
	--ui-switcher-bg: var(--ui-color-design-tinted-a1-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-tinted-a1-content);
	--ui-switcher-stroke: var(--ui-color-design-tinted-a1-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-tinted-a1-stroke-weight);
}

.ui-switcher.--air.--style-tinted-success {
	--ui-switcher-bg: var(--ui-color-design-tinted-success-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-tinted-success-content);
	--ui-switcher-stroke: var(--ui-color-design-tinted-success-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-tinted-success-stroke-weight);
}

.ui-switcher.--air.--style-tinted-alert {
	--ui-switcher-bg: var(--ui-color-design-tinted-alert-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-tinted-alert-content);
	--ui-switcher-stroke: var(--ui-color-design-tinted-alert-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-tinted-alert-stroke-weight);
}

.ui-switcher.--air.--style-tinted-warning {
	--ui-switcher-bg: var(--ui-color-design-tinted-warning-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-tinted-warning-content);
	--ui-switcher-stroke: var(--ui-color-design-tinted-warning-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-tinted-warning-stroke-weight);
}

.ui-switcher.--air.--style-tinted-green {
	--ui-switcher-bg: var(--ui-color-design-tinted-green-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-tinted-green-content);
	--ui-switcher-stroke: var(--ui-color-design-tinted-green-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-tinted-green-stroke-weight);
}

.ui-switcher.--air.--style-tinted-violet {
	--ui-switcher-bg: var(--ui-color-design-tinted-violet-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-tinted-violet-content);
	--ui-switcher-stroke: var(--ui-color-design-tinted-violet-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-tinted-violet-stroke-weight);
}

.ui-switcher.--air.--style-tinted-na {
	--ui-switcher-bg: var(--ui-color-design-tinted-na-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-tinted-na-content);
	--ui-switcher-stroke: var(--ui-color-design-tinted-na-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-tinted-na-stroke-weight);
}

/* The recipe of the label (`ui.system.label`), whole. The cursor takes `-content-icon` because this
   group has no flat `-content` at all. */
.ui-switcher.--air.--style-tinted-bitrix-gpt {
	--ui-switcher-bg: linear-gradient(
		269.5deg,
		var(--ui-color-design-tinted-bitrix-gpt-bg-gradient-1) 1.77%,
		var(--ui-color-design-tinted-bitrix-gpt-bg-gradient-2) 16.39%,
		var(--ui-color-design-tinted-bitrix-gpt-bg-gradient-3) 50.5%,
		var(--ui-color-design-tinted-bitrix-gpt-bg-gradient-4) 99.23%
	);
	--ui-switcher-cursor-bg: var(--ui-color-design-tinted-bitrix-gpt-content-icon);
	--ui-switcher-stroke: transparent;
	--ui-switcher-stroke-weight: var(--ui-design-tinted-bitrix-gpt-stroke-weight);
}

/* The designs the ring was introduced for: across the outline family the `-bg` equals the surface behind
   them, so without the ring the track would be invisible. One group of the family is left out - it is
   named after a product that no longer exists, and the guard over the build watches for that name. */
.ui-switcher.--air.--style-outline {
	--ui-switcher-bg: var(--ui-color-design-outline-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-outline-content);
	--ui-switcher-stroke: var(--ui-color-design-outline-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-outline-stroke-weight);
}

.ui-switcher.--air.--style-outline-a1 {
	--ui-switcher-bg: var(--ui-color-design-outline-a1-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-outline-a1-content);
	--ui-switcher-stroke: var(--ui-color-design-outline-a1-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-outline-a1-stroke-weight);
}

.ui-switcher.--air.--style-outline-a2 {
	--ui-switcher-bg: var(--ui-color-design-outline-a2-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-outline-a2-content);
	--ui-switcher-stroke: var(--ui-color-design-outline-a2-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-outline-a2-stroke-weight);
}

.ui-switcher.--air.--style-outline-alert {
	--ui-switcher-bg: var(--ui-color-design-outline-alert-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-outline-alert-content);
	--ui-switcher-stroke: var(--ui-color-design-outline-alert-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-outline-alert-stroke-weight);
}

.ui-switcher.--air.--style-outline-boost {
	--ui-switcher-bg: var(--ui-color-design-outline-boost-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-outline-boost-content);
	--ui-switcher-stroke: var(--ui-color-design-outline-boost-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-outline-boost-stroke-weight);
}

.ui-switcher.--air.--style-outline-na {
	--ui-switcher-bg: var(--ui-color-design-outline-na-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-outline-na-content);
	--ui-switcher-stroke: var(--ui-color-design-outline-na-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-outline-na-stroke-weight);
}

.ui-switcher.--air.--style-outline-success {
	--ui-switcher-bg: var(--ui-color-design-outline-success-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-outline-success-content);
	--ui-switcher-stroke: var(--ui-color-design-outline-success-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-outline-success-stroke-weight);
}

.ui-switcher.--air.--style-outline-warning {
	--ui-switcher-bg: var(--ui-color-design-outline-warning-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-outline-warning-content);
	--ui-switcher-stroke: var(--ui-color-design-outline-warning-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-outline-warning-stroke-weight);
}

/* The one design whose ring is a gradient, which `box-shadow` cannot draw: the ring moves to a layer of
   its own (the technique of the label), so the geometry stays the one every design shares - a real
   border would not, see the root rule. The thickness of this group lives in the colour namespace. */
.ui-switcher.--air.--style-outline-bitrix-gpt {
	--ui-switcher-bg: var(--ui-color-design-outline-bitrix-gpt-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-outline-bitrix-gpt-content-icon);
	/* the ring below stands in for the shadow of the root */
	--ui-switcher-stroke: transparent;
	--ui-switcher-stroke-weight: var(--ui-color-design-outline-bitrix-gpt-stroke-weight);
}

/* The layer is cut down to a padding-sized frame by a pair of masks, and clicks go through it: the
   track underneath is the control. */
.ui-switcher.--air.--style-outline-bitrix-gpt::after {
	content: '';
	position: absolute;
	inset: 0;
	padding: var(--ui-color-design-outline-bitrix-gpt-stroke-weight);
	border-radius: inherit;
	background: linear-gradient(
		257.74deg,
		var(--ui-color-design-outline-bitrix-gpt-stroke-gradient-5) 1.67%,
		var(--ui-color-design-outline-bitrix-gpt-stroke-gradient-4) 21.82%,
		var(--ui-color-design-outline-bitrix-gpt-stroke-gradient-3) 52.44%,
		var(--ui-color-design-outline-bitrix-gpt-stroke-gradient-2) 76.41%,
		var(--ui-color-design-outline-bitrix-gpt-stroke-gradient-1) 97.21%
	);
	/* a stencil and not a colour: the layers are subtracted from one another, so their fill never shows */
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	        mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
}

.ui-switcher.--air.--style-selection {
	--ui-switcher-bg: var(--ui-color-design-selection-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-selection-content);
	--ui-switcher-stroke: var(--ui-color-design-selection-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-selection-stroke-weight);
}

/* One off position for the whole set: the state overrides the design entirely, so all four variables are
   declared - leaving one out lets the design back in. The cursor and the ring come from `filled` and not
   from `disabled`: the off look is the look of `filled`, and `-content` of `disabled` reads as blocked. */
.ui-switcher.--air.ui-switcher-off {
	--ui-switcher-bg: var(--ui-color-design-disabled-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-filled-content);
	--ui-switcher-stroke: var(--ui-color-design-filled-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-filled-stroke-weight);
}

/* The track is painted once, on the root, and these two are stretched over it (style.css): `transparent`
   keeps the alpha of a translucent token from stacking and hides the legacy fill of the same selectors. */
.ui-switcher.--air .ui-switcher-enabled,
.ui-switcher.--air .ui-switcher-disabled {
	font-size: 0;
	padding: 0;
	background-color: transparent;
}

/* Blocked comes last on purpose: it holds the same specificity as the designs and as the off rule, so
   only the order makes it win when the classes meet on one node. It declares all four as well - the
   track and the cursor of `disabled`, and the ring of `filled`, the same one the off position takes. */
.ui-switcher.--air.ui-switcher-lock {
	--ui-switcher-bg: var(--ui-color-design-disabled-bg);
	--ui-switcher-cursor-bg: var(--ui-color-design-disabled-content-alt);
	--ui-switcher-stroke: var(--ui-color-design-filled-stroke);
	--ui-switcher-stroke-weight: var(--ui-design-filled-stroke-weight);

	opacity: 1;
	cursor: not-allowed;
}

/* The ring drawn by a layer of its own answers to no variable, so the states take the layer off the
   node instead of recolouring it - `display`, because the only alpha a component may paint with is the
   one inside a token. Both classes are spelled out to outweigh the ring by specificity, not by order. */
.ui-switcher.--air.ui-switcher-off.--style-outline-bitrix-gpt::after,
.ui-switcher.--air.ui-switcher-lock.--style-outline-bitrix-gpt::after {
	display: none;
}

.ui-switcher.--air .ui-switcher-cursor {
	width: var(--ui-switcher-cursor-size);
	height: var(--ui-switcher-cursor-size);
	top: 50%;
	left: 0;
	transform: translate(var(--ui-switcher-on-cursor-translate), -50%);
	background-color: var(--ui-switcher-cursor-bg);
	box-shadow: none;
}

.ui-switcher.--air.ui-switcher-off .ui-switcher-cursor {
	transform: translate(var(--ui-switcher-off-cursor-translate), -50%);
}