.cc-switch {
	appearance: none;
	position: relative;
	display: inline-block;
	width: 34px;
	height: 20px;
	padding: 0;
	margin: 0;
	border: none;
	background-color: #8e95a1;
	cursor: pointer;
	flex-shrink: 0;
	border-radius: 9999px;
	box-sizing: border-box;
	transition: background-color 0.15s;

	&::after {
		content: "";
		position: absolute;
		top: 2px;
		left: 2px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #fff;
		transition: transform 0.15s;
	}

	&:checked {
		background-color: var(--cc-button-color);
	}

	&:checked::after {
		transform: translateX(14px);
	}

	&:checked::before {
		content: "";
		position: absolute;
		top: 2px;
		left: 16px;
		width: 16px;
		height: 16px;
		background-color: var(--cc-button-color);
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
		mask-size: 12px 12px;
		mask-repeat: no-repeat;
		mask-position: center;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
		-webkit-mask-size: 12px 12px;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		pointer-events: none;
		transition: transform 0.15s;
	}

	&:disabled {
		cursor: default;
		pointer-events: none;
		opacity: 0.62;
	}

	&:focus-visible {
		outline: -webkit-focus-ring-color auto 1px;
		outline-offset: 4px;
	}
}
