.si-checkbox {
	display: inline-block;
	cursor: pointer;
	margin-right: 0.5em;

	&__input {
		display: inline-block;
		position: relative;
		width: 23px;
		height: 23px;
		border-radius: 9px;
		vertical-align: bottom;
	}
	&__original {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		opacity: 0;
		cursor: pointer;
	}
	&__effect {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		box-sizing: border-box;
		border-radius: 32%;
		transition: all 0.25s ease;
		pointer-events: none;

		&:before {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			box-sizing: border-box;
			border: 2px solid hsl(var(--si-gray-4));
			border-radius: inherit;
			content: '';
			transition: all 0.25s ease;
		}
		.checkbox-icon {
			position: absolute;
			z-index: 1;
		}
		&:after {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: 0;
			border-radius: inherit;
			background: hsl(var(--si-color));
			content: '';
			transition: all 0.25s ease;
			transform: scale(0.5);
		}
	}
	&__label {
		padding: 0 7px;
		font-size: 15px;
		transition: all 0.25s ease;
	}

	&:last-of-type {
		margin-right: 0;
	}

	&:hover {
		.si-checkbox__effect {
			background: hsl(var(--si-gray-3));
			&:before {
				border: 2px solid hsla(var(--si-gray-4), 0);
			}
		}
	}
	&:active {
		.si-checkbox__effect {
			background: hsl(var(--si-gray-4));
		}
	}

	&.checked {
		.si-checkbox__effect {
			box-shadow: 0 0 0 0 hsl(var(--si-color), 0.35);

			&::before {
				opacity: 0;
				transform: scale(1.2);
			}
			&::after {
				opacity: 1;
				transform: scale(1);
			}
		}
		&:hover {
			.si-checkbox__effect {
				box-shadow: 0 3px 15px 0 hsla(var(--si-color), 0.35);
			}
		}
	}
}