style.module.css

.button {
    @apply px-4 py-2 inline-flex items-center justify-center;
    @apply bg-blue-600 rounded text-base font-semibold text-blue-50 transition-all duration-100;
    @apply hover:bg-blue-500 active:bg-blue-500;

    &.square {
        @apply p-2;
    }

    &:focus {
        @apply ring-[3px] ring-blue-500 ring-offset-2 ring-offset-neutral-700;
    }

    /* Sizing Controls */
    &.small {
        @apply px-3 py-1 font-normal focus:ring-2;

        &.square {
            @apply p-1;
        }
    }

    &:disabled {
        @apply cursor-not-allowed;
    }
}

.text {
    @apply text-gray-50 bg-transparent focus:ring-neutral-300 focus:ring-opacity-50 hover:bg-neutral-500 active:bg-neutral-500;

    &:disabled {
        @apply hover:bg-transparent text-gray-300;
    }
}

.danger {
    @apply bg-red-600 hover:bg-red-500 active:bg-red-500 focus:ring-red-500 text-red-50;
}