.checkbox-label {
    @apply grid;
    @apply justify-start;
    @apply cols-auto;
    @apply gap-2;
    @apply min-h-0;
    @apply cursor-pointer;
    @apply text-gray-800;
}

.checkbox {
    width: 1.5em;
    height: 1.5em;
    @apply border-none;
    @apply appearance-none;
}

.checkbox:before {
    @apply absolute;
    width: 1.5em;
    height: 1.5em;
    @apply border;
    @apply border-tint-200;
    @apply bg-gray-50;
    @apply shadow-input;
    @apply rounded-sm;
    @apply overflow-hidden;
    content: '';
}

.checkbox:after {
    @apply absolute;
    top: 50%;
    left: 50%;
    @apply text-purple-500;
    font-size: 1.2em;
    font-weight: 900;
    line-height: 1;
    content: '✓';
    transition: transform 0.1s;
    transform: translate(-50%, -50%) scale(0);
}

.checkbox:focus,
.checkbox:hover {
    @apply outline-none;
}

.checkbox:focus:before {
    @apply border-tint-300;
    @apply bg-white;
}

.checkbox:hover:before {
    @apply border-tint-300;
}

.checkbox:checked:after {
    transform: translate(-50%, -50%) scale(1);
}

.checkbox:disabled {
    @apply opacity-50;
}