@use '@talend/design-tokens/lib/tokens' as tokens;

$radio-size: tokens.$coral-sizing-xxxs;
$mark-size: calc(#{tokens.$coral-sizing-xxs} / 2);

.radio {
	display: inline-flex;
	gap: tokens.$coral-spacing-xs;
	justify-content: flex-start;
	align-items: center;
	position: relative;

	input[type='radio'] {
		margin: 0;
		width: $radio-size;
		height: $radio-size;
		position: relative;
		z-index: 3;
		opacity: 0;
		cursor: pointer;

		&:disabled {
			cursor: not-allowed;
		}
	}

	input[type='radio'] + label {
		&::before,
		&::after {
			content: '';
			border-radius: tokens.$coral-radius-round;
			transition: tokens.$coral-transition-fast;
			display: block;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			margin: 0;
		}
		// Radio
		&::before {
			z-index: 1;
			width: $radio-size;
			height: $radio-size;
			border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
			background: tokens.$coral-color-neutral-background-medium;
		}

		// Mark
		&::after {
			z-index: 2;
			opacity: 0;
			background-image: none;
			background-color: tokens.$coral-color-accent-background-strong;
			width: $mark-size;
			height: $mark-size;
			border: 0;
			left: calc(#{$radio-size} / 2 - #{$mark-size} / 2);
		}
	}

	input[type='radio']:hover + label {
		// Radio
		&::before {
			border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border;
		}
	}

	input[type='radio']:active + label {
		// Radio
		&::before {
			background: tokens.$coral-color-accent-background-active;
		}
	}

	input[type='radio']:focus-visible + label,
	input[type='radio']:global(.focus-visible) + label {
		// Radio
		&::before {
			outline: tokens.$coral-border-m-solid tokens.$coral-color-assistive-border-focus;
			outline-offset: 1px;
		}
	}

	input[type='radio']:checked + label {
		// Radio
		&::before {
			border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border;
		}

		// Mark
		&::after {
			opacity: 1;
		}
	}

	input[type='radio']:checked:not(:disabled):hover + label {
		// Radio
		&::before {
			border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border-hover;
		}

		// Mark
		&::after {
			background: tokens.$coral-color-accent-background-strong-hover;
		}
	}

	input[type='radio']:checked:not(:disabled):active + label {
		// Radio
		&::before {
			border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border-active;
			background: tokens.$coral-color-accent-background-strong-active;
		}
	}

	// Disabled and read-only cases

	input[type='radio']:disabled + label,
	input[type='radio']:checked:disabled + label {
		color: tokens.$coral-color-neutral-text-disabled;
		cursor: not-allowed;

		// Radio
		&::before {
			border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled;
			opacity: tokens.$coral-opacity-s;
			cursor: not-allowed;
			background: tokens.$coral-color-neutral-background-disabled;
		}
	}

	input[type='radio']:checked:disabled + label {
		// Mark
		&::after {
			background-color: tokens.$coral-color-neutral-icon-weak;
			opacity: tokens.$coral-opacity-m;
		}
	}

	&_readOnly {
		input[type='radio'] {
			cursor: not-allowed;
		}

		input[type='radio']:not(:checked) + label,
		input[type='radio']:checked + label {
			color: tokens.$coral-color-neutral-text;
			cursor: not-allowed;

			// Radio
			&::before {
				border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
				background: tokens.$coral-color-neutral-background-strong;
				opacity: 1;
			}

			// Mark
			&::after {
				opacity: 0;
			}
		}

		input[type='radio']:checked + label,
		input[type='radio']:checked:not(:disabled):hover + label,
		input[type='radio']:checked:not(:disabled):active + label {
			// Radio
			&::before {
				border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
				background: tokens.$coral-color-neutral-background-strong;
			}

			// Mark
			&::after {
				background-color: tokens.$coral-color-neutral-icon-weak;
				opacity: 1;
			}
		}
	}
}