/* This is CSS utility code that is always included, for Filmchief external/Hub/Shop/admin/support */


/* ==========================================================================
   Filmchief switch buttons
   ========================================================================== */
.fc-switch {
	--switch-width: 50px;
	--switch-height: 24px;
	--switch-knob-size: 16px;
	--switch-knob-offset: 4px;

	position: relative;
	display: inline-block;
	width: var(--switch-width);
	height: var(--switch-height);
	margin: 0;

	/* Input */
	> input {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;

		&:checked + .fc-switch-slider::before {
			transform: translateX(
				calc(
					var(--switch-width)
					- var(--switch-knob-size)
					- var(--switch-knob-offset)
					- var(--switch-knob-offset)
				)
			);
		}
	}

	/* Slider */
	> .fc-switch-slider {
		position: absolute;
		inset: 0;
		cursor: pointer;
		transition: .3s;

		&::before {
			position: absolute;
			content: "";
			width: var(--switch-knob-size);
			height: var(--switch-knob-size);
			left: var(--switch-knob-offset);
			bottom: var(--switch-knob-offset);
			background-color: white;
			transition: .3s;
		}
	}

	/* Color variants */
	&.fc-switch-default {
		background-color: #ccc;
	}

	&.fc-switch-red-green {
		background-color: #f44336;
	}

	&:is(.fc-switch-default, .fc-switch-red-green) {
		> input {
			&:checked + .fc-switch-slider {
				background-color: #4CAF50;
			}

			&:focus + .fc-switch-slider {
				box-shadow: 0 0 1px #4CAF50;
			}

			&:focus-visible + .fc-switch-slider {
				outline: 2px solid #4CAF50;
				outline-offset: 2px;
			}
		}
	}

	/* Rounded */
	&.fc-switch-rounded {
		border-radius: var(--switch-height);

		> .fc-switch-slider {
			border-radius: inherit;

			&::before {
				border-radius: 50%;
			}
		}
	}

	/* Small (sm) */
	&.fc-switch-sm {
		--switch-width: 28px;
		--switch-height: 16px;
		--switch-knob-size: 10px;
		--switch-knob-offset: 3px;
	}

	/* Extra small (xs) */
	&.fc-switch-xs {
		--switch-width: 24px;
		--switch-height: 12px;
		--switch-knob-size: 8px;
		--switch-knob-offset: 2px;
	}
}