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

$tt-radio-size: 0.875rem !default;

input[type='radio'] {
	&::before,
	&::after,
	+ *::before,
	+ *::after {
		@include transition(240ms);
		width: $tt-radio-size;
		height: $tt-radio-size;
		border-radius: 50%;
	}

	&::before,
	+ *::before {
		@include scale(0);
		background-color: tokens.$coral-color-neutral-background-medium;
		z-index: 1;
	}

	&::after,
	+ *::after {
		background-color: tokens.$coral-color-neutral-background-medium;
		border: 1px solid tokens.$coral-color-neutral-border;
	}

	&:checked {
		&::before,
		+ *::before {
			@include scale(0.5);
			background-color: tokens.$coral-color-accent-border;
		}

		&::after,
		+ *::after {
			border-color: tokens.$coral-color-accent-border;
		}
	}

	&:hover,
	+ *:hover {
		&,
		&:checked {
			&::after,
			+ *::after {
				border-color: tokens.$coral-color-accent-border;
			}
		}
	}

	&:disabled {
		&:checked::before,
		&:checked + *::before {
			background-color: tokens.$coral-color-neutral-background-disabled;
		}

		&::after,
		+ *::after,
		&:checked::after,
		&:checked + *::after {
			border-color: tokens.$coral-color-neutral-background-disabled;
		}
	}
}