@import "@Themes/constants.scss";

.root {
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: flex-start;
	color: var(--text-primary, #24282e);

	font-size: 16px;
	font-style: normal;
	font-weight: var(--font-text-weight-regular, 400);
	line-height: normal;
	letter-spacing: 0.08px;
	gap: var(--Radius-lg, 16px);

	.content {
		cursor: pointer;
		display: flex;
		flex-direction: column;
		.label {
			color: var(--text-primary, #24282e);
			font-weight: var(--font-text-weight-regular, 400);
		}
		.description {
			color: var(--text-secondary, #47535d);
			font-weight: var(--font-text-weight-light, 300);
		}
	}

	&.disabled {
		opacity: var(--opacity-disabled, 0.3);
	}

	input[type="radio"] {
		cursor: pointer;
		width: 20px;
		height: 20px;
		min-width: 20px;
		max-width: 20px;
		border-radius: var(--radius-full, 360px);
		border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
		margin-right: 16px;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;

		&:hover {
			border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
		}

		&:active {
			border: 2px solid var(--select-option-unselected-pressed-border, #3e474e);
		}

		&:disabled {
			cursor: not-allowed;
			border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);
		}
	}

	// input[type="radio"]::before {
	// 	content: "";
	// 	width: 11px;
	// 	height: 11px;
	// 	background-color: var(--color-secondary-500);
	// 	border-radius: 100px;
	// 	transform: scale(0);
	// }

	// input[type="radio"]:checked::before {
	// 	transform: scale(1);
	// }

	// .tooltip {
	// 	margin-left: 16px;
	// }
}