/* Hide the default checkbox */
.checkbox {
	margin: var(--hr-spacing-1) 0;
	position: relative;
	display: inline-block;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.2rem;
	width: fit-content;
}

.checkbox input[type='checkbox'] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create custom checkbox design */
.checkbox .checkmark {
	position: relative;
	display: inline-block;
	height: 24px;
	width: 24px;
	flex-shrink: 0;
	border: 2px solid var(--color-border);
	border-radius: 8px; /* Less rounded than buttons but still soft */
	background-color: transparent;
}

/* Hover effect */
.checkbox:hover .checkmark {
	background-color: rgba(0, 0, 0, 0.05);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox .checkmark:after {
	content: '';
	position: absolute;
	display: none;
	left: 50%;
	top: 50%;
	width: 5px;
	height: 10px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -60%) rotate(45deg);
}

/* Show the checkmark when checked */
.checkbox input[type='checkbox']:checked ~ .checkmark:after {
	display: block;
}

.checkbox input[type='checkbox']:checked ~ .checkmark {
	background-color: var(--color-light-gray);
}

/* Focus state */
.checkbox input[type='checkbox']:focus ~ .checkmark {
	outline: none;
	border-color: var(--color-border-focus, currentColor);
}