.root {
	display: flex;
	gap: 16px;
	cursor: pointer;
	width: fit-content;

	.disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}

	.switch-container {
		position: relative;
		width: 46px;
		height: 24px;
		background-color: var(--color-neutral-200);
		border-radius: 64px;

		transition: all 200ms ease-in-out;
		&[data-checked="true"] {
			background-color: var(--color-secondary-500);

			.round {
				left: 24px;
			}
		}

		.checkbox {
			display: none;
		}

		.round {
			transition: all 200ms ease-in-out;
			width: 20px;
			height: 20px;
			border-radius: 100px;
			position: absolute;
			top: 2px;
			left: 2px;
			background: white;
		}
	}
}