@import "@Themes/constants.scss";

.root {
	cursor: pointer;
	display: flex;
	align-items: center;
	&.disabled {
		cursor: not-allowed;
	}

	input[type="checkbox"] {
		appearance: none;
		background-color: transparent;
		width: 16px;
		height: 16px;
		border: 1px solid $turquoise-flash;
		border-radius: 2px;
		margin-right: 16px;
		display: grid;
		place-content: center;

		&:disabled {
			cursor: not-allowed;
		}
	}

	input[type="checkbox"]::before {
		content: url("../../../Assets/Icons/check_white.svg");
		place-content: flex-start;
		display: grid;
		width: 16px;
		height: 16px;
		background-color: $turquoise-flash;
		border-radius: 2px;
		transform: scale(0);
	}

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

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