.checkbox {
    @apply flex flex-row gap-x-1 items-center;

    .box {
        @apply w-[18px] h-[18px] flex flex-col justify-center items-center rounded-md bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed border border-border/05 text-white transition-all;

        > svg {
            @apply w-[18px] h-[18px] mt-px opacity-0 transition-opacity;
        }

        &.checked {
            @apply bg-brand hover:bg-brand-hover active:bg-brand-pressed border-transparent;

            > svg {
                @apply opacity-100;
            }
        }

    }
}