@use "../mixins" as *;

.radio-button {
	@include flex($inline: true, $align: center, $justify: center);
	@include typography-body;

	position: relative;
	margin: 0;
	border: 1px solid var(--control-strong-stroke-default);
	border-radius: 20px;
	outline: none;
	background-clip: padding-box;
	background-color: var(--control-alt-fill-secondary);
	appearance: none;
	inline-size: 20px;
	block-size: 20px;

	&::before {
		content: "";
		inline-size: 4px;
		block-size: 4px;
		visibility: hidden;
		position: absolute;
		border-radius: 12px;
		background-color: var(--text-on-accent-primary);
	}

	&:focus-visible {
		box-shadow: var(--focus-stroke);
	}

	&:hover {
		background-color: var(--control-alt-fill-tertiary);
	}

	&:active {
		border-color: var(--control-strong-stroke-disabled);
		background-color: var(--control-alt-fill-quarternary);

		&::before {
			transition: var(--control-normal-duration) var(--control-fast-out-slow-in-easing);
			visibility: visible;
			inline-size: 10px;
			block-size: 10px;
		}
	}

	&:disabled {
		border-color: var(--control-strong-stroke-disabled);
		background-color: var(--control-alt-fill-disabled);

		&::before {
			visibility: hidden;
		}

		+ span {
			color: var(--text-disabled);
		}
	}

	&:checked {
		border: none;
		background-color: var(--accent-default);

		&::before {
			visibility: visible;
			transition: var(--control-normal-duration) var(--control-fast-out-slow-in-easing);
			box-shadow: 0 0 0 1px var(--control-stroke-default);
			inline-size: 12px;
			block-size: 12px;
		}

		&:hover {
			background-color: var(--accent-secondary);

			&::before {
				inline-size: 14px;
				block-size: 14px;
			}
		}

		&:active {
			background-color: var(--accent-tertiary);

			&::before {
				inline-size: 10px;
				block-size: 10px;
			}
		}

		&:disabled {
			background-color: var(--accent-disabled);

			&::before {
				box-shadow: none;
				inline-size: 12px;
				block-size: 12px;
			}
		}
	}

	&-container {
		@include flex($inline: true, $align: center);
		@include typography-body;

		color: var(--text-primary);
		user-select: none;
		min-block-size: 32px;

		> span {
			padding-inline-start: 8px;
		}
	}
}