@utility btn-xl {
    @apply typo-label-lg py-4 px-5 lg:px-6 gap-3;
    svg {
        @apply size-[20px];
    }
}

@utility btn-lg {
    @apply typo-label-md py-3 px-3 lg:px-4 gap-2.5;
    svg {
        @apply size-[20px];
    }
}

@utility btn-md {
    @apply typo-label-sm py-[6px] lg:py-[10px] px-[10px] lg:px-[14px] gap-2;
    svg {
        @apply size-[16px];
    }
}

@utility btn-solid {
    @apply text-white bg-black border-[1.5px] border-transparent;
    @apply btn-lg;

    svg[class~="iconify"] path {
        @apply stroke-white;
    }

    &:hover {
        @apply bg-white border-black text-black;

        svg[class~="iconify"] path {
            @apply stroke-black;
        }
    }

    &:disabled {
        @apply bg-slate-100 text-slate-400;

        svg[class~="iconify"] path {
            @apply stroke-slate-400;
        }
    }
}

@utility btn-primary {
    @apply text-white bg-blue-500 border-[1.5px] border-transparent;
    @apply btn-lg;

    svg[class~="iconify"] path {
        @apply stroke-white;
    }

    &:hover {
        @apply bg-transparent border-blue-500 text-blue-500;

        svg[class~="iconify"] path {
            @apply stroke-blue-500;
        }
    }

    &:disabled {
        @apply bg-slate-100 text-slate-400;

        svg[class~="iconify"] path {
            @apply stroke-slate-400;
        }
    }
}

@utility btn-secondary {
    @apply text-black bg-slate-100;
    @apply btn-lg;

    svg[class~="iconify"] path {
        @apply stroke-black;
    }

    &:hover {
        @apply bg-slate-200;
    }

    &:disabled {
        @apply bg-slate-100 text-slate-400;

        svg[class~="iconify"] path {
            @apply stroke-slate-400;
        }
    }
}

@utility btn-outlined {
    @apply text-black border-[1.5px] border-slate-200;
    @apply btn-lg;

    svg[class~="iconify"] path {
        @apply stroke-black;
    }

    &:hover {
        @apply bg-slate-50 border-slate-200;
    }

    &:disabled {
        @apply text-slate-300;

        svg[class~="iconify"] path {
            @apply stroke-slate-300;
        }
    }
}

@utility btn-ghost {
    @apply text-black bg-white;
    @apply btn-lg;

    svg[class~="iconify"] path {
        @apply stroke-black;
    }

    &:hover {
        @apply text-slate-500;

        svg[class~="iconify"] path {
            @apply stroke-slate-500;
        }
    }

    &:disabled {
        @apply text-slate-400;

        svg[class~="iconify"] path {
            @apply stroke-slate-400;
        }
    }
}