hossein-por-shop/frontend/assets/css/button.comp.css

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

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

@utility btn-md {
    @apply typo-label-sm py-[10px] 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-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;
        }
    }
}