@use "../../../../styles/abstracts" as *;

.switch {
	--switch-width: 44px;
	--switch-height: 24px;
	--thumb-size: 20px;
	--thumb-margin: 1px;

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

	input {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
		margin: 0;
		pointer-events: none;

		&:checked + .slider {
			background-color: var(--dev-panel-accent-color, #6366f1);
			border-color: var(--dev-panel-accent-color, #6366f1);

			&::before {
				left: calc(100% - var(--thumb-size) - var(--thumb-margin));
				background-color: var(--dev-panel-text-color-on-accent, #ffffff);
			}
		}

		&:focus + .slider {
			box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
		}

		&:focus:not(:focus-visible) + .slider {
			box-shadow: none;
		}

		&:disabled + .slider {
			opacity: var(--dev-panel-opacity-50, 0.5);
			cursor: not-allowed;

			&::before {
				opacity: var(--dev-panel-opacity-70, 0.7);
			}
		}
	}

	.slider {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--dev-panel-input-background-color, #0f172a);
		border: 1px solid var(--dev-panel-input-border-color, #475569);
		border-radius: var(--dev-panel-border-radius-full, 9999px);
		transition: var(--dev-panel-transition, all 0.2s cubic-bezier(0.4, 0, 0.2, 1));
		cursor: pointer;

		&::before {
			content: "";
			position: absolute;
			top: var(--thumb-margin);
			left: var(--thumb-margin);
			width: var(--thumb-size);
			height: var(--thumb-size);
			background-color: var(--dev-panel-text-color-muted, #94a3b8);
			border-radius: var(--dev-panel-border-radius-full, 9999px);
			transition: var(--dev-panel-transition, all 0.2s cubic-bezier(0.4, 0, 0.2, 1));
			box-shadow: var(--dev-panel-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
		}

		&:hover {
			border-color: var(--dev-panel-input-border-color-hover, #64748b);

			&::before {
				box-shadow: var(--dev-panel-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
			}
		}
	}

	// Reset hover/active states when disabled
	input:disabled + .slider {
		&:hover {
			border-color: var(--dev-panel-input-border-color, #475569);

			&::before {
				box-shadow: var(--dev-panel-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
			}
		}
	}
}
