.checkbox {
	cursor: pointer;
	user-select: none;

	&:has(input:disabled) {
		cursor: not-allowed;
		opacity: 0.5;
	}

	input {
		&:checked {
			&+.checkbox__toggle {
				background-color: var(--color-active);
				border-color: var(--color-active);

				&::before {
					opacity: 1;
				}
			}
		}

		&:disabled {
			&+.checkbox__toggle {
				cursor: not-allowed;
			}
		}
	}
}

.checkbox--outline {
	input {
		&:checked {
			&+.checkbox__toggle {
				background-color: transparent;
				border-color: var(--color-active);

				&::before {
					background-color: var(--color-active);
				}
			}
		}
	}
}

.checkbox__toggle {
	width: 14px;
	height: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--rounded-xs);
	border: 1.5px solid var(--color-icon-default);
	transition: 0.2s ease;

	&::before {
		position: absolute;
		content: '';
		mask: url('/src/img/icons/checkbox.svg') center/8px no-repeat;
		-webkit-mask: url('/src/img/icons/checkbox.svg') center/8px no-repeat;
		opacity: 0;
		transition: inherit;
		left: 50%;
		width: 100%;
		height: 100%;
		top: 50%;
		translate: -50% -50%;
		pointer-events: none;
		background-color: var(--color-only-white);
	}


}