style.module.css

.button {
    @apply px-4 py-2 inline-flex items-center justify-center;
    @apply rounded text-base font-semibold transition-all duration-100;
    @apply focus:ring-[3px] focus:ring-offset-2 focus:ring-offset-gray-700 focus:ring-opacity-50;

    /* Sizing Controls */
    &.small {
        @apply px-4 py-0 h-8 font-normal text-sm focus:ring-2;
    }

    &.large {
        @apply px-5 py-3;
    }

    &.secondary {
        @apply text-gray-50 bg-transparent;

        &:disabled {
            background: transparent !important;
        }
    }

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

    &.square {
        @apply p-0 w-12 h-12;

        &.small {
            @apply w-8 h-8;
        }
    }
}

.primary {
    @apply bg-blue-600 text-blue-50;
    @apply hover:bg-blue-500 active:bg-blue-500 focus:ring-blue-400 focus:ring-opacity-75;

    &.secondary {
        @apply hover:bg-blue-600 active:bg-blue-600;
    }

    &:disabled {
        @apply bg-blue-500/75 text-blue-200/75;
    }
}

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

    &.secondary {
        @apply hover:bg-gray-500 active:bg-gray-500;
    }

    &:disabled {
        @apply bg-gray-500/75 text-gray-200/75;
    }
}

.danger {
    @apply bg-red-600 text-gray-50;
    @apply hover:bg-red-500 active:bg-red-500 focus:ring-red-400 focus:ring-opacity-75;

    &.secondary {
        @apply hover:bg-red-600 active:bg-red-600;
    }

    &:disabled {
        @apply bg-red-600/75 text-red-50/75;
    }
}