.wc-block-components-checkbox {
	@include reset-typography();
	align-items: center;
	display: flex;
	height: 1em;
	position: relative;

	.wc-block-components-checkbox__input[type="checkbox"] {
		appearance: none;
		border: 2px solid currentColor;
		border-radius: 2px;
		height: em(18px);
		width: em(18px);
		margin: 0;
		min-height: 18px;
		min-width: 18px;
		overflow: hidden;
		position: static;
		vertical-align: middle;
		background-color: #fff;

		&:checked {
			background: currentColor;
			border-color: currentColor;
		}

		&:not(:checked) + .wc-block-components-checkbox__mark {
			display: none;
		}

		.has-dark-controls & {
			border-color: $controls-border-dark;
			background-color: transparent;

			&:checked {
				background: transparent;
				border-color: $controls-border-dark;
			}
		}
	}

	.wc-block-components-checkbox__mark {
		fill: #fff;
		position: absolute;
		left: em(1px);
		top: em(-2px);
		width: em(16px);
		height: em(16px);
	}

	.wc-block-components-checkbox__label {
		padding-left: $gap-smaller;
		vertical-align: middle;
	}
}

// Hack to hide the check mark in IE11
// See comment: https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/2320/#issuecomment-621936576
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.wc-block-components-checkbox__mark {
		display: none;
	}
}

.theme-twentytwentyone {
	.wc-block-components-checkbox__input[type="checkbox"],
	.has-dark-controls .wc-block-components-checkbox__input[type="checkbox"] {
		background-color: #fff;
		border-color: var(--form--border-color);
		position: relative;
	}

	.wc-block-components-checkbox__input[type="checkbox"]:checked,
	.has-dark-controls .wc-block-components-checkbox__input[type="checkbox"]:checked {
		background-color: #fff;
		border-color: var(--form--border-color);
	}

	.wc-block-components-checkbox__mark {
		display: none;
	}
}