.si-switch {
	position: relative;
	display: inline-flex;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 28px;
	padding: 5px;
	color: white;
	border: 0;
	border-radius: 20px;
	background: hsl(var(--si-gray-3));
	cursor: pointer;
	transition: all 0.25s ease;
	&__input {
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0;
		opacity: 0;
		border-radius: inherit;
		cursor: pointer;
	}

	&__background {
		position: absolute;
		left: -100%;
		display: inline-block;
		width: 100%;
		height: auto;
		padding-bottom: 100%;
		border-radius: 50%;
		background: hsl(var(--si-color));
		transition: all 0.25s ease-out;
	}

	&__circle {
		position: absolute;
		left: 4px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		color: hsl(var(--si-text));
		border-radius: 20px;
		background: hsl(var(--si-background));
		transition: all 0.25s ease;
		i {
			font-size: 0.8rem;
		}
	}

	&:hover {
		background: hsl(var(--si-gray-4));
	}
	&:active {
		transform: scale(0.9);
		.si-switch__circle {
			width: 25px;
		}
	}
	&.checked {
		.si-switch__background {
			left: 0;
		}
		.si-switch__circle {
			left: calc(100% - 24px);
			color: hsl(var(--si-color));
			box-shadow: -5px 0 25px 0 hsla(var(--si-background), 0.6);
		}
	}
	&:active.checked {
		.si-switch__circle {
			left: calc(100% - 30px);
		}
	}

	& + & {
		margin-left: 0.5em;
	}
}