@layer components {
	.yst-root {
		.yst-toggle-field {
			@apply
			yst-flex
			yst-flex-col
			yst-gap-1;
		}

		.yst-toggle-field--disabled {
			.yst-toggle-field__label-wrapper,
			.yst-toggle-field__description {
				@apply yst-opacity-50;
			}

			.yst-toggle-field__label,
			.yst-toggle-field__label-wrapper {
				@apply yst-cursor-not-allowed;
			}
		}

		.yst-toggle-field__header {
			@apply
			yst-flex
			yst-flex-row
			yst-items-center
			yst-justify-between
			yst-gap-6;
		}

		.yst-toggle-field__label-wrapper {
			@apply yst-flex yst-items-center yst-gap-1;
		}

		.yst-toggle-field__description {
			@apply yst-mr-[4.25rem];
		}
	}
}
