@import "/ui/styles/_theme.scss";

MenuRadio {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

.menu-radio .radio-card {
	pointer-events: all;
	cursor: pointer;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background-color: $bg-2;
	border: 1px solid $line;
	min-width: 200px;
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;

	&:hover {
		border-color: $line-strong;
		background-color: $bg-1;
	}

	&.active {
		background-color: $primary-soft;
		border-color: $primary-line;
		color: $primary;
	}

	.radio-text {
		flex-direction: column;
		gap: 4px;
	}

	.radio-label {
		font-family: $font-primary;
		font-size: $fs-3;
		letter-spacing: $ls-wide;
		text-transform: uppercase;
		color: $text;
	}

	&.active .radio-label { color: $primary; }

	.radio-hint {
		font-family: $font-secondary;
		font-size: $fs-1;
		color: $text-faint;
	}
}