.button {
    @apply py-1.5 px-3 rounded-lg flex flex-row justify-center items-center gap-x-2.5;

    &__primary {
        @apply text-onbrand hover:text-onbrand-hover active:text-onbrand-pressed disabled:text-onbrand-disabled;
        @apply bg-brand hover:bg-brand-hover active:bg-brand-pressed disabled:bg-brand-disabled;
    }

    &__secondary {
        @apply border border-gray-0.05;
        @apply text-fg-primary hover:text-fg-primary-hover active:text-fg-primary-pressed disabled:text-fg-primary-disabled;
        @apply bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed disabled:bg-component-bg-disabled;
    }

    &__danger {
        @apply bg-danger hover:bg-danger-hover active:bg-danger-pressed disabled:bg-danger-disabled;
    }

    &__ghost {
        @apply hover:bg-gray-0.05 active:bg-gray-0.10;
    }

    &__icon {
        @apply p-1.5 hover:bg-gray-0.05 active:bg-gray-0.10 aspect-square box-border;

        & > * {
            @apply w-full h-full stroke-fg-primary;
        }

        &:hover > * {
            @apply stroke-fg-primary-hover;
        }

        &:active > * {
            @apply stroke-fg-primary-pressed;
        }

        &:disabled > * {
            @apply stroke-fg-primary-disabled;
        }
    }
}

.icon > * {
    @apply w-4;
}