.ac-toggle-container {
	display: inline-flex;

	.ac-toggle-label {
		margin-left: 7px;
		transform: translateY(-1px);
	}
}

.ac-toggle {
	display: inline-block;
	white-space: nowrap;

	input {
		position: absolute;
		left: -3000em;

		.rtl & {
			left: inherit;
			right: -3000em;
		}
	}

	&__switch {
		display: inline-block;
		background: #ccc;
		border-radius: 8px;
		width: 30px;
		height: 16px;
		position: relative;
		transition: background-color .3s;

		&__on,
		&__off {
			font-size: 11px;
			font-weight: bold;
			color: #fff;
			position: absolute;
			top: 5px;
			line-height: 11px;
		}

		&__off {
			right: 6px;
			color: #555;
		}

		&__on {
			left: 8px;
		}

		&__track {
			border-radius: 50%;
			display: inline-block;
			background: #fff;
			position: absolute;
			left: 3px;
			top: 3px;
			height: 10px;
			width: 10px;
			transition: all .1s;
		}

	}

	input:checked {
		+ .ac-toggle__switch {
			background: var(--ac-primary-color);

			.ac-toggle__switch__track {
				left: calc(100% - 13px);
			}
		}
	}

}

.ac-toggle-v2 {
	$e: &;
	position: relative;

	&.-disabled {
		cursor: not-allowed;

		* {
			cursor: not-allowed;
		}
	}

	&__toggle {
		position: relative;
		display: inline-block;
		margin-right: 5px;

		input[type=checkbox] {
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
			width: 100%;
			height: 100%;
			cursor: pointer;
			z-index: 2;
			border: none;
			margin: 0 !important;

			&:focus:not(:disabled), &:active:not(:disabled) {
				~ .ac-toggle-v2__toggle__track {
					box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ac-primary-color);
				}
			}

			&:checked {
				~ .ac-toggle-v2__toggle__thumb {
					transform: translateX(14px);
				}

				~ .ac-toggle-v2__toggle__track {
					background: var(--ac-primary-color);
				}
			}

			&:disabled {
				cursor: not-allowed;

				~ .ac-toggle-v2__toggle__track {
					background: #ddd !important;
					cursor: not-allowed;
				}

				~ .ac-toggle-v2__toggle__thumb {
					cursor: not-allowed;
				}
			}
		}

		&__track {
			content: "";
			display: inline-block;
			box-sizing: border-box;
			vertical-align: top;
			background-color: #D8D8D8;
			width: 36px;
			height: 22px;
			border-radius: 11px;
			transition: background .2s ease;
		}

		&__thumb {
			display: block;
			position: absolute;
			box-sizing: border-box;
			top: 3px;
			left: 3px;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			transition: transform .1s ease;
			background-color: #fff;
			border: 5px solid #fff;
		}
	}

	&.-small {
		margin-bottom: 10px;

		#{$e}__toggle {
			transform: translateY(2px);

			&__track {
				width: 30px;
				height: 18px;
			}

			&__thumb {
				top: 2px;
				left: 2px;
				width: 14px;
				height: 14px;
			}

			input[type=checkbox] {
				&:checked {
					~ .ac-toggle-v2__toggle__thumb {
						transform: translateX(12px);
					}
				}
			}
		}
	}
}