/*
 * Switch — painel-v2
 *
 * Markup:
 * <label class="pn-switch">
 *   <input type="checkbox">
 *   <span class="pn-switch-slider"></span>
 *   <span class="pn-switch-label">Label opcional</span>
 * </label>
 */

.pn-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--gap-md);
	margin: 0;
	color: var(--text-dark-primary);
	font-size: var(--body-6-font-size);
	font-weight: 550;
	line-height: var(--body-6-line-height);
	cursor: pointer;
}

.pn-switch > input[type="checkbox"] {
	position: absolute;
	width: var(--scale-1);
	height: var(--scale-1);
	margin: 0;
	opacity: 0;
}

.pn-switch > input[type="checkbox"]::before,
.pn-switch > input[type="checkbox"]::after {
	content: none !important;
	display: none !important;
}

.pn-switch > .pn-switch-slider {
	position: relative;
	width: var(--scale-40);
	height: var(--scale-24);
	flex: 0 0 var(--scale-40);
	border: var(--border-with-sm) solid var(--border-light-terceary);
	border-radius: var(--border-radius-full);
	background: var(--surface-disable);
	transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

.pn-switch > .pn-switch-slider::after {
	content: '';
	position: absolute;
	top: 50%;
	left: var(--scale-2);
	width: var(--scale-16);
	height: var(--scale-16);
	border-radius: var(--border-radius-full);
	background: var(--surface-action-neutral-light-fixed);
	transform: translateY(-50%);
	transition: transform .15s ease-in-out;
}

.pn-switch > input[type="checkbox"]:checked + .pn-switch-slider {
	border-color: var(--border-blue-default);
	background: var(--surface-action-blue-default);
}

.pn-switch > input[type="checkbox"]:checked + .pn-switch-slider::after {
	transform: translate(var(--scale-16), -50%);
}

.pn-switch:hover > input[type="checkbox"]:not(:disabled):checked + .pn-switch-slider {
	background: var(--surface-action-blue-hover);
}

.pn-switch > input[type="checkbox"]:focus-visible + .pn-switch-slider {
	outline: var(--border-with-md) solid var(--border-dark-primary);
	outline-offset: var(--scale-2);
}

.pn-switch--disabled,
.pn-switch:has(> input[type="checkbox"]:disabled) {
	cursor: not-allowed;
}

.pn-switch > input[type="checkbox"]:disabled + .pn-switch-slider,
.pn-switch > input[type="checkbox"]:disabled ~ .pn-switch-label {
	opacity: .55;
}