/* scss/Atoms/_Checkbox.scss */

label.checkbox {
	display: flex;
	align-items: center;

	input[type="checkbox"] {
		@include appearance(none);
		border: 1px solid $tertiary-color-1;
		width: 2em;
		height: 2em;
		margin-right: 1em;
		cursor: pointer;
		@include borderRadius(1px);

		&:hover {
			border-color: $link-active-color;
		}

		&:checked {
			border-color: $link-active-color;
			color: $link-active-color;


			&::before  {
				color: $link-active-color;
				content: "\f00c";
				font-family: "FontAwesome"; //TODO: Replace with SVG icons instead, https://css-tricks.com/icon-fonts-vs-svg/
				align-self: center;
				position: relative;
				font-size: 1.5em;
				display: inline-block;
				top: 0.1em;
				left: 0.1em;
			}
		}

		&[intermediate] {
			border-color: $link-active-color;
			color: $link-active-color;

			&::before  {
				color: $link-active-color;
				content: "\f068";
				font-family: "FontAwesome"; //TODO: Replace with SVG icons instead, https://css-tricks.com/icon-fonts-vs-svg/
				align-self: center;
				position: relative;
				font-size: 1.5em;
				display: inline-block;
				top: 0.1em;
				left: .2em;
			}
		}


	}

	&[disabled] {
			opacity: 0.5;
			cursor: initial;
			pointer-events: none;
		}
}