.ObCheckbox-root {
	--check-width: 2rem;
	--bg-color: var(--brand-dark, rgba(42, 65, 50, 0.5));
	--bg-color-hover: var(--brand-primary, rgba(42, 65, 50, 0.8));
	--bg-color-selected: var(--brand-light);

	display: inline-block;
	height: var(--check-width);
	margin-bottom: 0;

	&:focus-within .ObCheckbox-box {
		border: 0.1rem solid black;
	}

	&.Ob-disabled {
		--bg-color: rgba(150, 150, 150, 0.5);
		--bg-color-hover: var(--bg-color);
	}
}

.ObCheckbox-box {
	position: relative;

	background: var(--bg-color);
	transition: background 300ms ease;

	overflow: hidden;

	border-radius: calc(var(--check-width) / 15);
	height: var(--check-width);
	width: var(--check-width);

	&:hover {
		background: var(--bg-color-hover);
	}
}

.ObCheckbox-label {
	position: relative;
	margin-bottom: 0;
	overflow: hidden;

	&:focus {
		outline: none;
	}
}

.ObCheckbox-mark {
	color: #fff;
	display: inline-block;
	font-size: calc(var(--check-width) * 0.4);
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transition: all 300ms ease-in-out;
	transition-delay: 0ms;
	transform: translate(-50%, -50%) scale(6);
}

.ObCheckbox-input {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;

	&:focus {
		outline: none;
	}
}

.ObCheckbox-label {
	display: flex;
	gap: 0.5rem;
	align-items: center;

	overflow: visible;
}

.ObCheckbox-root.Ob-reverse .ObCheckbox-label {
	flex-direction: row-reverse;
}

.ObCheckbox-input:checked:not(:disabled) + .ObCheckbox-label .ObCheckbox-box {
	animation: animOn 600ms 1 forwards;
}

.ObCheckbox-input:checked:not(:disabled) + .ObCheckbox-label .ObCheckbox-box {
	background: var(--bg-color-selected);
}

.ObCheckbox-input:checked + .ObCheckbox-label .ObCheckbox-box .ObCheckbox-mark {
	transform: translate(-50%, -50%) scale(1);
	transition-delay: 200ms;
	opacity: 1;
}

.ObCheckbox-root.Ob-disabled .ObCheckbox-box {
	cursor: not-allowed;
}

@keyframes animOn {
	40% {
		transform: scaleY(0.4) scaleX(2);
	}

	50% {
		transform: scaleY(1.2) scaleX(0.6);
	}

	60% {
		transform: scaleY(0.8) scaleX(1.4);
	}

	70% {
		transform: scaleY(1.1) scaleX(0.9);
	}

	100% {
		transform: scaleY(1) scaleX(1);
	}
}