@use "../../00-base/colors/colors";
@use "../../00-base/mixin/core.mixin";

.hoo-checkbox {
	position: absolute;

	opacity: 0;

	&+label {
		font-size: core.px2rem(16px);
		line-height: core.px2rem(20px);

		position: relative;
		top: 2px;

		padding: 0;

		cursor: pointer;
		display: flex;
	}

	// Box.
	&+label:before {
		// display: inline-block;
		position: relative;
		top: -1px;

		display: inline-flex;
		justify-content: center;

		box-sizing: border-box;
		width: core.px2rem(20px);
		height: core.px2rem(20px);
		margin-right: core.px2rem(10px);
		flex-shrink: 0;

		content: "";
		transition-timing-function: cubic-bezier(.4, 0, .23, 1);
		transition-duration: 200ms;
		transition-property: background, border, border-color;
		vertical-align: text-top;

		border: 1px colors.$neutral-450 solid;
		border-radius: 2px;
		background: white;

		align-items: center;
	}

	&:not(:disabled) {

		// Box hover
		&:hover+label:before {
			// background: $inputIcon;
		}

		// Box hover
		&:active+label:before {
			border-color: colors.$theme-800;
			// background: #f35429;
			background: colors.$theme-800;
		}

		// Box focus
		&:focus+label:before {
			box-shadow: 0 0 0 3px rgba(0, 0, 0, .12);
		}

		// Box checked
		&:checked+label:before {
			// background: #f35429;
		}

		// Checkmark. Could be replaced with an image
		&:hover+label:after,
		&:checked+label:after {
			position: absolute;
			top: core.px2rem(8px);
			left: core.px2rem(5px);

			width: core.px2rem(2px);
			height: core.px2rem(2px);

			content: "";
			transform: rotate(45deg);

			background: colors.$inputIcon;
			box-shadow: 2px 0 0 colors.$inputIcon,
				4px 0 0 colors.$inputIcon,
				4px -2px 0 colors.$inputIcon,
				4px -4px 0 colors.$inputIcon,
				4px -6px 0 colors.$inputIcon,
				4px -8px 0 colors.$inputIcon;
		}

		&:checked+label:before {
			background-color: colors.$theme-600;
			border-color: colors.$theme-600;
		}

		&:checked:hover+label:before {
			border-color: colors.$theme-800;
			background-color: colors.$theme-800;
		}

		&:checked+label:after {
			position: absolute;
			top: core.px2rem(8px);
			left: core.px2rem(5px);

			width: core.px2rem(2px);
			height: core.px2rem(2px);

			content: "";
			transform: rotate(45deg);

			background: colors.$neutral-000;
			box-shadow: 2px 0 0 colors.$neutral-000,
				4px 0 0 colors.$neutral-000,
				4px -2px 0 colors.$neutral-000,
				4px -4px 0 colors.$neutral-000,
				4px -6px 0 colors.$neutral-000,
				4px -8px 0 colors.$neutral-000;
		}
	}

	&:not(:disabled):not(:checked):hover+label:after {
		position: absolute;
		top: core.px2rem(8px);
		left: core.px2rem(5px);

		width: core.px2rem(2px);
		height: core.px2rem(2px);

		content: "";
		transform: rotate(45deg);

		background: colors.$inputIcon;
		background: colors.$neutral-500;
		box-shadow: 2px 0 0 colors.$neutral-500,
			4px 0 0 colors.$neutral-500,
			4px -2px 0 colors.$neutral-500,
			4px -4px 0 colors.$neutral-500,
			4px -6px 0 colors.$neutral-500,
			4px -8px 0 colors.$neutral-500;
	}

	&:active:hover+label:after {
		position: absolute;
		top: core.px2rem(8px);
		left: core.px2rem(5px);

		width: core.px2rem(2px);
		height: core.px2rem(2px);

		content: "";
		transform: rotate(45deg);

		background: colors.$neutral-000;
		box-shadow: 2px 0 0 colors.$neutral-000,
			4px 0 0 colors.$neutral-000,
			4px -2px 0 colors.$neutral-000,
			4px -4px 0 colors.$neutral-000,
			4px -6px 0 colors.$neutral-000,
			4px -8px 0 colors.$neutral-000;
	}

	// Disabled state label.
	&:disabled+label {
		cursor: auto;
		pointer-events: none;

		color: colors.$neutral-400;

		&>* {
			pointer-events: none;
		}

		&:hover {
			&>* {
				pointer-events: none;
			}
		}
	}

	// Disabled box.
	&:disabled+label:before {
		pointer-events: none;

		border-color: colors.$neutral-350;
		box-shadow: none;
	}

	&:disabled+label:after {
		pointer-events: none;

		border-color: colors.$neutral-350;
		box-shadow: none;
	}
}