@use '../styles/mixins';

.modula-admin-toggle {
	@include mixins.button-reset;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: flex-end;
	width: var(--modula-admin-hit-target);
	height: var(--modula-admin-hit-target);
	border-radius: var(--modula-admin-radius-lg);

	&:disabled {
		opacity: var(--modula-admin-disabled-opacity);
		cursor: default;
	}
}

.modula-admin-toggle__track {
	position: relative;
	display: block;
	width: 40px;
	height: 22px;
	border-radius: 11px;
	background: var(--modula-admin-border-field);
	transition: background var(--modula-admin-transition);

	.is-checked > & {
		background: var(--modula-admin-ink);
	}
}

.modula-admin-toggle__knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	background: var(--modula-admin-surface);
	transition: left var(--modula-admin-transition);

	.is-checked & {
		left: 21px;
	}
}