/* Reusable toggle switch (mbp-toggle).
 *
 * Generalized from the live .mbp-chat-switch in admin/extra/chat.blade.php.
 * A label wraps a visually-hidden checkbox and a .track span; the track is
 * red (#b7431f) when off and green (#2e8b3d) when on, with an animated knob.
 * Used by the <x-ui.toggle> component to replace single yes/no setting
 * checkboxes with a switch.
 */
.mbp-toggle {
	display: inline-block;
	position: relative;
	width: 52px;
	height: 26px;
	vertical-align: middle;
	line-height: normal;
}

/* Visually hidden, but still focusable and hit-testable so the switch stays
 * keyboard operable (Space toggles) and clickable across the whole label. */
.mbp-toggle input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.mbp-toggle .track {
	position: absolute;
	inset: 0;
	cursor: pointer;
	background: #b7431f;
	border-radius: 26px;
	transition: background .15s;
}

.mbp-toggle .track:before {
	content: "";
	position: absolute;
	height: 20px;
	width: 20px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform .15s;
}

.mbp-toggle input:checked + .track {
	background: #2e8b3d;
}

.mbp-toggle input:checked + .track:before {
	transform: translateX(26px);
}

/* Visible focus ring for keyboard users only. */
.mbp-toggle input:focus-visible + .track {
	outline: 2px solid #1c5fb0;
	outline-offset: 2px;
}

/* Disabled state (e.g. locked admin permission rows). */
.mbp-toggle input:disabled {
	cursor: not-allowed;
}

.mbp-toggle input:disabled + .track {
	cursor: not-allowed;
	opacity: .5;
}