.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, &__iconSecondary {
        @apply border box-border border-gray-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, &__iconDanger {
		@apply text-onbrand hover:text-onbrand-hover  active:text-onbrand-pressed disabled:text-onbrand-disabled;
        @apply bg-danger hover:bg-danger-hover active:bg-danger-pressed disabled:bg-danger-disabled;
    }

	&__iconDanger {
		@apply bg-op-50;
	}

    &__ghost {
        @apply hover:bg-gray-05 [&[aria-checked="true"]]:bg-gray-10 active:bg-gray-10;
    }

    &__icon, &__iconSecondary, &__iconDanger {
        @apply p-1.5 aspect-square box-border w-8 h-8;

        &.large {
            @apply w-9 h-9;
            & > * {
                @apply p-0.5;
            }
        }

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

    &__icon, &__iconSecondary {
        @apply hover:bg-gray-05 [&[aria-checked="true"]]:bg-gray-10 active:bg-gray-10;

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

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

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

	&:disabled {
		@apply border-opacity-1! bg-opacity-10! text-opacity-10! pointer-events-none;

		svg {
			@apply fill-opacity-10! stroke-opacity-10!;
		}
	}
}

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