.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-green-600 text-green-50;
    @apply hover:bg-green-500 active:bg-green-500 focus:ring-green-400 focus:ring-opacity-75;

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

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

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

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

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

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

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

    &:disabled {
        @apply bg-yellow-500/75 text-yellow-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;
    }
}

.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;
    }
}