@import "/UI/Theme.scss";

UICheckbox
{
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: $ui-check-bg;
	border: 1px solid $ui-control-border;
	cursor: pointer;
	pointer-events: all;

	.tick
	{
		font-size: 15px;
		font-weight: 700;
		color: white;
		opacity: 0;
		pointer-events: none;
	}

	&:hover
	{
		background-color: white;
		sound-in: ui.hover;
	}

	&.checked
	{
		background-color: $ui-blue;
		border-color: $ui-blue;

		.tick
		{
			opacity: 1;
		}
	}
}