@layer components {
    .btn {
        --btn-stroke: transparent;
        --btn-bg: theme("colors.gray.500");
        --btn-color: theme("colors.white.500");
        @apply flex justify-center items-center gap-1.5 font-inter border-2 shadow-md rounded-lg px-4 py-2 text-base font-medium select-none cursor-pointer align-middle;
        border-color: var(--btn-stroke);
        background-color: var(--btn-bg);
        color: var(--btn-color);
    }

    .btn-primary {
        --btn-bg: theme("backgroundColor.primary.DEFAULT");
        --btn-color: theme("colors.white.500");
        --btn-hover-bg: theme("backgroundColor.primary.darker");
        --btn-active-bg: theme("backgroundColor.primary.darker");

        &:hover {
            @apply shadow-lg;
        }
    }

    .btn-secondary {
        --btn-stroke: theme("borderColor.primary.lighter");
        --btn-bg: theme("colors.white.500");
        --btn-color: theme("colors.black.50");
        --btn-hover-stroke: theme("borderColor.primary.darker");

        &:hover {
            @apply shadow-lg;
        }
    }

    .btn-size-lg {
        @apply px-10 py-4 text-lg;
    }

    .btn-size-sm {
        @apply px-2 py-2 text-sm;
    }
}