@layer buttons {
    .btn {
        display: inline-flex;
        align-items: center;
        padding: theme("padding.1") theme("padding.2");
        border-radius: var(--radius-md);
        font-weight: var(--font-weight-semibold);

        @variant hover {
            cursor: pointer;
        }

        @variant focus {
            outline: 2px solid transparent;
            outline-offset: 2px;
            cursor: pointer;
        }

        @variant disabled {
            background-color: var(--color-gray-600) !important;
            color: var(--color-white) !important;
            border-color: var(--color-gray-600) !important;
            cursor: not-allowed !important;
        }

        & > svg {
            margin-right: theme("spacing.2") !important;
            display: inline-block !important;
        }
    }

    .btn-primary {
        color: var(--color-white);
        background-color: var(--color-blue-800);
        border: solid theme("borderWidth.DEFAULT") var(--color-blue-800);

        @variant hover {
            background-color: var(--color-blue-600);
        }

        &.btn-outline {
            color: var(--color-blue-800);
            background-color: inherit;
            border: solid theme("borderWidth.DEFAULT") var(--color-blue-800);

            @variant hover {
                color: var(--color-blue-600);
                background-color: var(--color-gray-100);
                border-color: var(--color-blue-800);
            }

            @variant dark {
                color: var(--color-white);
                border-color: var(--color-gray-500);

                @variant hover {
                    color: var(--color-blue-300);
                    background-color: inherit;
                    border-color: var(--color-blue-300);
                }
            }
        }
    }

    .btn-default {
        color: var(--color-white);
        background-color: var(--color-purple-800);
        border: solid theme("borderWidth.DEFAULT") var(--color-purple-800);

        @variant hover {
            background-color: var(--color-purple-600);
        }

        &.btn-outline {
            color: var(--color-gray-800);
            background-color: inherit;
            border: solid theme("borderWidth.DEFAULT") var(--color-gray-600);

            @variant hover {
                color: var(--color-purple-600);
                background-color: var(--color-gray-100);
                border: solid theme("borderWidth.DEFAULT")
                        var(--color-purple-600);
            }

            @variant dark {
                color: var(--color-white);
                border-color: var(--color-gray-500);

                @variant hover {
                    color: var(--color-purple-400);
                    background-color: inherit;
                    border-color: var(--color-purple-300);
                }
            }
        }
    }

    .btn-danger {
        color: var(--color-white);
        background-color: var(--color-red-800);
        border: solid theme("borderWidth.DEFAULT") var(--color-red-800);

        @variant hover {
            background-color: var(--color-red-600);
        }

        &.btn-outline {
            color: var(--color-red-800);
            border: solid theme("borderWidth.DEFAULT") var(--color-red-800);
            background-color: inherit;

            @variant hover {
                color: var(--color-red-600);
                background-color: var(--color-gray-100);
                border-color: var(--color-red-800);
            }

            @variant dark {
                color: var(--color-red-500);
                border-color: var(--color-red-500);

                @variant hover {
                    color: var(--color-red-500);
                    background-color: inherit;
                    border-color: var(--color-red-500);
                }
            }
        }
    }
}
