@component OpalCheckbox {
	position: relative;
	display: inline-block;

	@el label {
		&:hover {
			@el control {
				border-color: hsl(0,0%,54%);

				&:focus {
					border-color: hsl(208,100%,60%);
				}
			}
		}
	}
		@el input {
			display: none;
		}

		@el control {
			position: relative;
			top: -2px;
			display: inline-block;
			box-sizing: border-box;
			width: 22px;
			height: 22px;
			border: 2px solid hsl(0,0%,64%);
			border-radius: 3px;
			background: #fff;
			vertical-align: middle;
			user-select: none;

			&:focus {
				outline: none;
				border-color: hsl(208,100%,60%);
			}
		}

		@el contentSlot {
		}

	@mod checked {
		@el control {
			&::before {
				position: absolute;
				top: 1px;
				left: 6px;
				width: 5px;
				height: 10px;
				border: solid #000;
				border-width: 0 2px 2px 0;
				content: '';
				transform: rotate(45deg);
			}
		}
	}

	@mod indeterminate {
		@el control {
			&::before {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				width: 12px;
				height: 2px;
				background: #000;
				content: '';
			}
		}
	}

	@mod disabled {
		opacity: .5;
		pointer-events: none;

		@el control {
			background: hsl(0,0%,90%);
		}
	}
}