@use 'theme';

.snippet-execution-button,
.snippet-activation-switch,
input[type='checkbox'].switch {
	display: block;
	position: relative;
}

// Activation switch: an accent-coloured 36x19 pill shared by the list-table
// activate column, snippet cards and settings toggles.
.snippet-activation-switch,
input[type='checkbox'].switch {
	appearance: none;
	outline: 0;
	cursor: pointer;
	margin: 0;
	inline-size: 36px;
	block-size: 19px;
	border-radius: 34px;
	text-align: start;
	border: 1px solid theme.$accent;
	box-sizing: border-box;

	&::before {
		transition: all .1s;
		content: '';
		block-size: 13px;
		inline-size: 13px;
		display: inline-block;
		background-color: theme.$accent;
		border-radius: 50%;
		margin: 2px;

		@media (prefers-reduced-motion: reduce) {
			transition-duration: 0.01s;
		}
	}
}

.active-snippet .snippet-activation-switch,
input[type='checkbox'].switch:checked {
	background-color: theme.$accent;

	// Travel distance: pill width minus the knob, its margins and the borders.
	&::before {
		background-color: white;
		transform: translateX(calc((100% + 4px) * var(--cs-direction-multiplier)));
	}
}

.erroneous-snippet .snippet-activation-switch::before {
	content: '!';
	transform: translateX(calc(50% * var(--cs-direction-multiplier)));
	text-align: center;
	font-weight: bold;
	line-height: 1;
	color: #1d2327;
}

a.snippet-condition-count {
	border-radius: 50%;
	border: 1.8px solid currentcolor;
	block-size: 29px;
	inline-size: 29px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;

	.inactive-snippet & {
		color: #ccc;
	}

	.active-snippet & {
		font-weight: bold;
		color: theme.$accent;
	}
}

.snippet-execution-button {
	margin-inline-start: 11px;
	margin-block-start: 9px;
	inline-size: 0;
	block-size: 0;
	border-block: 9px solid transparent;
	border-inline-start: 10px solid #ccc;

	&::before {
		content: '';
		position: absolute;
		inset: -14px -8px -14px -21px;
		border-radius: 50%;
		border: 1.8px solid #ccc;
		z-index: 2;
	}

	&:hover {
		border-inline-start-color: theme.$accent;
		transition: border-inline-start-color 0.6s;

		&::before {
			border-color: theme.$accent;
			transition: border-color 0.6s;
		}

		@media (prefers-reduced-motion: reduce) {
			transition-duration: 0.01s;

			&::before {
				transition-duration: 0.01s;
			}
		}
	}
}

.code-snippets-card .snippet-execution-button {
	margin-block-start: 0;
	margin-inline-end: 9px;
}