@layer components {
	.yst-root {
		.yst-radio {
			@apply yst-flex yst-items-center;
		}

		/* Variants */
		.yst-radio--disabled {
			.yst-radio__input,
			.yst-radio__label,
			.yst-radio__check {
				@apply
				yst-opacity-50
				yst-cursor-not-allowed
				focus:yst-ring-0;
			}
		}

		.yst-radio--inline-block {
			@apply yst-inline-flex;

			/* Elements of the inline-block variant */

			.yst-radio__input {
				@apply yst-sr-only;
				&:checked + .yst-radio__content {
					.yst-radio__label {
						@apply yst-border-transparent yst-ring-2 yst-ring-primary-500;
					}

					.yst-radio__check {
						@apply yst-visible;
					}
					
				}

				&:focus + .yst-radio__content {
					.yst-radio__label {
						@apply yst-ring-2 yst-ring-primary-500 yst-ring-offset-2;
					}
				}

				&:checked {
					&:focus + .yst-radio__content {
						.yst-radio__label {
							@apply yst-ring-offset-1 yst-ring-[3px];
						}
					}
				} 
			}

			.yst-radio__content {
				@apply yst-relative;
			}

			.yst-radio__label {
				@apply
				yst-flex
				yst-h-14
				yst-w-14
				yst-ml-0
				yst-justify-center
				yst-items-center
				yst-text-base
				yst-bg-white
				yst-border
				yst-rounded-lg
				yst-shadow-sm
				yst-cursor-pointer
				yst-border-slate-300
				focus:yst-ring-2 focus:yst-ring-primary-500 focus:yst-ring-offset-2
				hover:yst-border-slate-400
				focus:yst-outline-none;
			}

			.yst-radio__check {
				@apply
				yst-invisible
				yst-absolute
				yst-top-0.5
				yst-right-0.5
				yst-h-5
				yst-w-5
				yst-text-primary-600;
			}
		}

		/* State */

		.yst-radio__input {
			@apply
			yst-h-4
			yst-w-4
			yst-text-primary-500
			yst-border-slate-300

			focus:yst-ring-primary-500;
		}

		.yst-radio__label {
			@apply yst-ml-3;
		}
	}
}
