/**
 * TechBBQ Checkbox — reusable control.
 *
 * Figma: Checkbox (1586:4694)
 * https://www.figma.com/design/5yXrB09CMVaqf3V343o3yZ/Website-%7C-TechBBQ--Copy-?node-id=1586-4694
 */

.techbbq-checkbox {
	--techbbq-checkbox-size: 16px;
	--techbbq-checkbox-gap: 5px;
	--techbbq-checkbox-label-size: var(--techbbq-text-paragraph-xxs-size);
	--techbbq-checkbox-label-line-height: 1.32;
	--techbbq-checkbox-label-letter-spacing: 0.02em;

	display: inline-flex;
	gap: var(--techbbq-checkbox-gap);
	align-items: center;
	margin: 0;
	cursor: pointer;
}

.techbbq-checkbox__control {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: none;
	border-radius: 0;
	transition: none;
}

.techbbq-checkbox__box {
	box-sizing: border-box;
	flex-shrink: 0;
	width: var(--techbbq-checkbox-size);
	height: var(--techbbq-checkbox-size);
	border: 1px solid var(--techbbq-border-tertiary);
	border-radius: var(--techbbq-radius-sm);
	background: var(--techbbq-color-grey-alpha-50-15);
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease;
}

.techbbq-checkbox__box::after {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	margin: 1px;
	background-color: var(--techbbq-content-oncolor-primary);
	opacity: 0;
	-webkit-mask-image: url('../../images/icon-check-16.svg');
	mask-image: url('../../images/icon-check-16.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: opacity 0.2s ease;
}

.techbbq-checkbox__label {
	font-family: var(--techbbq-font-family-body);
	font-size: var(--techbbq-checkbox-label-size);
	font-weight: 400;
	line-height: var(--techbbq-checkbox-label-line-height);
	letter-spacing: var(--techbbq-checkbox-label-letter-spacing);
	color: var(--techbbq-content-primary);
}

.techbbq-checkbox__control:checked + .techbbq-checkbox__box {
	border-color: var(--techbbq-border-secondary);
	background-color: #f5f5f5;
}

.techbbq-checkbox__control:checked + .techbbq-checkbox__box::after {
	opacity: 1;
}

.techbbq-checkbox__control:focus-visible + .techbbq-checkbox__box {
	outline: 2px solid var(--techbbq-content-primary);
	outline-offset: 2px;
}

.techbbq-checkbox__control:disabled + .techbbq-checkbox__box,
.techbbq-checkbox__control:disabled ~ .techbbq-checkbox__label {
	opacity: var(--techbbq-btn-disabled-opacity);
	cursor: not-allowed;
}