@use '@lucca-front/scss/src/commons/utils/a11y';

@mixin component {
	position: relative;
	display: flex;

	.radio-input {
		@include a11y.mask;

		&:not(:disabled) ~ .radio-label {
			&:hover {
				&::before {
					border-color: var(--palettes-neutral-600);
				}
			}

			&:active {
				&::before {
					border-color: var(--palettes-neutral-800);
				}
			}
		}

		&:checked ~ .radio-label {
			&::before {
				border-color: var(--palettes-700, var(--palettes-product-700));
			}

			&::after {
				transform: scale(0.6);
				background-color: var(--palettes-700, var(--palettes-product-700));
			}
		}

		&:not(:disabled):checked ~ .radio-label {
			&:hover {
				&::before {
					border-color: var(--palettes-700, var(--palettes-product-700));
				}

				&::after {
					background-color: var(--palettes-700, var(--palettes-product-700));
				}
			}
		}

		&:focus-visible ~ .radio-label::before {
			@include a11y.focusVisible;
		}
	}

	.radio-label {
		color: var(--pr-t-color-text);
		line-height: var(--pr-t-font-body-M-lineHeight);
		min-block-size: var(--pr-t-font-body-M-lineHeight);
		padding: var(--components-radio-label-padding);
		transition-duration: var(--commons-animations-durations-fast);
		transition-property: color;
		display: block;
		cursor: pointer;

		&::before,
		&::after {
			inset-block-start: var(--components-radio-input-top);
			block-size: var(--components-radio-input-size);
			inline-size: var(--components-radio-input-size);
			transition-duration: var(--commons-animations-durations-fast);
			transition-property: background-color, color, transform, border;
			position: absolute;
			border-radius: var(--pr-t-border-radius-full);
			inset-inline-start: 0;
			content: '';
		}

		&::before {
			background-color: var(--palettes-neutral-0);
			border-color: var(--palettes-neutral-700);
			border-width: 2px;
			border-style: solid;
		}

		&::after {
			color: transparent;
			transform: scale(0);
		}
	}

	.radio-label-helper {
		color: var(--palettes-neutral-700);
		font-size: var(--pr-t-font-body-S-fontSize);
		line-height: var(--pr-t-font-body-S-lineHeight);
	}
}