@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/scss/src/commons/utils/namespace';
@use '@lucca-front/scss/src/components/numericBadge/exports' as numericBadge;

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: flex;

	@at-root ($atRoot) {
		.radioButtons-item {
			position: relative;
			margin-inline-start: 1px;

			&:first-child {
				margin-inline-start: 0;

				.radioButtons-item-label {
					border-radius: var(--pr-t-border-radius-default) 0 0 var(--pr-t-border-radius-default);
				}
			}

			&:last-child {
				.radioButtons-item-label {
					border-radius: 0 var(--pr-t-border-radius-default) var(--pr-t-border-radius-default) 0;
				}
			}
		}

		.radioButtons-item-label {
			display: flex;
			align-items: center;
			gap: var(--pr-t-spacings-100);
			background-color: var(--palettes-neutral-0);
			padding: var(--components-radioButtons-padding);
			font: var(--components-radioButtons-font);
			color: var(--palettes-neutral-700);
			box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-neutral-300);
			transition-duration: var(--commons-animations-durations-fast);
			transition-property: background-color, color, box-shadow;
			overflow: hidden;
			position: relative;
			block-size: 100%;
			cursor: pointer;
		}

		.radioButtons-item-input {
			@include a11y.mask;

			&:checked,
			&:focus {
				~ .radioButtons-item-label {
					z-index: 2;
				}
			}

			&:not(:disabled, .is-disabled) {
				~ .radioButtons-item-label {
					&:hover {
						background-color: var(--palettes-neutral-50);
					}
				}

				&:focus-visible {
					~ .radioButtons-item-label {
						@include a11y.focusVisible($offset: 3px);
					}
				}

				&:checked {
					~ .radioButtons-item-label {
						background-color: var(--palettes-product-50);
						box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-product-500);
						color: var(--palettes-product-800);

						.numericBadge {
							@include numericBadge.inherit;
						}
					}
				}
			}
		}
	}
}