@layer components {
    .btn {
        @apply flex-space-2 justify-center;
        @apply text-white;
        @apply text-sm font-medium leading-none;
        @apply border border-inherit rounded-lg;
        @apply px-5 py-2.5;
        @apply focus:outline-hidden focus:ring-3;
        @apply cursor-pointer;
        @apply transition-colors;
        @apply appearance-none;

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

        &:active {
            @apply scale-[0.95] transition-transform ease-in-out;
        }

        &.pill {
            @apply rounded-full;
        }

        &.xxs,
        .btn-xxs {
            @apply text-xxs px-1.5 py-1 flex-space-1;
        }

        &.xs,
        &.btn-xs {
            @apply text-xs px-3 py-1.5 flex-space-1;
        }

        &.sm,
        &.btn-sm {
            @apply text-sm px-3 py-2 flex-space-1;
        }

        &.lg,
        &.btn-lg {
            @apply text-base px-5 py-3;
        }

        &.xl,
        &.btn-xl {
            @apply text-lg px-6 py-4;
        }

        &.xxl,
        &.btn-xxl {
            @apply text-xl px-8 py-6;
        }

        &.btn-light {
            @apply text-black;
        }
    }

    .btn-backtop {
        @apply fixed z-10 bottom-8 end-8 translate-y-96 transition-transform;

        &.show {
            @apply translate-y-0;
        }
    }
}

@utility btn-* {
    background-color: --value(--color-*);
    border-color: --value(--color-*);
    color: --value(--text-bg-*);

    &:hover {
        background-color: --value(--color-*-700);
        border-color: --value(--color-*-700);
    }

    &:focus {
        --tw-ring-color: --value(--color-*-300);
    }

    &.gradient {
        background-image: linear-gradient(to top left, --value(--color-*-500), --value(--color-*), --value(--color-*-700));

        &:hover {
            background-image: linear-gradient(to bottom right, --value(--color-*-500), --value(--color-*), --value(--color-*-700));
        }
    }
}

@utility btn-outline-* {
    @apply border focus:ring-0;
    background-color: transparent;
    border-color: --value(--color-*);
    color: --value(--color-*);

    @variant hover {
        background-color: --value(--color-*);
        color: --value(--color-bg-*);
    }
}