@import "@Themes/constants.scss";

.root {
	cursor: pointer;
	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="checkbox"] {
		cursor: pointer;
		display: flex;
		width: 20px;
		height: 20px;
		flex-direction: column;
		align-items: flex-start;
		margin-right: 16px;
		gap: 8px;
		border-radius: var(--radius-xs, 2px);
		border: 2px solid var(--select-option-unselected-default-border, #6d7e8a);

		&: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="checkbox"]::before {
	// 	content: url("../../../Assets/Icons/check_white.svg");
	// 	place-content: flex-start;
	// 	display: grid;
	// 	width: 16px;
	// 	height: 16px;
	// 	background-color: var(--color-secondary-500);
	// 	border-radius: 2px;
	// 	transform: scale(0);
	// }

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

	// .tooltip {
	// }
}