@import '../../../styles/_partials/index';
@import '../../../common/styles/themeUtils';

.RadioButton {
	position: relative;

	input {
		position: absolute;
		opacity: 0;
	}

	label {
		@include setupThemeVars (
			'--RadioButton_BorderColor',
			'--RadioButton_DotColor',
			'--RadioButton_OutlineColor',
			'--RadioButton_TextColor'
		);
		@include setThemeVar('--RadioButton_TextColor', $gray-dark, $white);
		@include setThemeVar('--RadioButton_BorderColor', $gray75);
		@include setThemeVar('--RadioButton_DotColor', transparent);
		@include setThemeVar('--RadioButton_OutlineColor', transparent);

		display: flex;
		gap: 8px;
		align-items: center;
		color: var(--RadioButton_TextColor);
	}

	* {
		cursor: pointer;
	}

	&.RadioButton_Disabled {
		* {
			cursor: not-allowed;
		}
		opacity: 0.6;
	}

	.RadioButton_Graphics {
		position: relative;
		width: 18px;
		height: 18px;
		border-radius: 100%;
		border: 2px solid var(--RadioButton_BorderColor);

		// focus-visible outline
		&:after {
			box-shadow: 0 0 0 2px var(--RadioButton_OutlineColor);
			content: '';
			position: absolute;
			top: -4px;
			left: -4px;
			width: 22px;
			height: 22px;
			border-radius: 100%;
		}

		// Checked dot
		&:before {
			content: '';
			position: absolute;
			top: 3px;
			left: 3px;
			width: 8px;
			height: 8px;
			border-radius: 100%;
			transform: scale(0);
			background: var(--RadioButton_DotColor);
			transition: background-color 0s 0.15s, transform 0.15s ease;
		}
	}

	input:focus-visible + label {
		@include setThemeVar('--RadioButton_OutlineColor', $green-dark, $green);
	}

	input:not(:disabled):not(:checked) + label:hover , input:focus-visible + label {
		@include setThemeVar('--RadioButton_BorderColor', $gray, $gray25);
	}

	input:checked {

		+ label  {
			@include setThemeVar('--RadioButton_BorderColor', $green-dark, $green);
			@include setThemeVar('--RadioButton_DotColor', $green-dark, $green);

			.RadioButton_Graphics:before {
				transform: scale(1);
				transition-delay: 0s;
			}
		}

		&:disabled + label {
			@include setThemeVar('--RadioButton_BorderColor', $gray75);
			@include setThemeVar('--RadioButton_DotColor', $gray75);

		}
	}
}

.RadioButton_Group {
	border: none;
	padding: 0;

	legend {
		@include visuallyHidden;
	}

	.RadioButton:not(:last-child) {
		margin-bottom: 10px;
	}
}