{{#
    @name Button attributes
    @desc A single button component. Faux is used when a button is displayed inside a link (for example in link blocks).
    @param* label The caption label.
    @param as The wrapping element. Defaults to `a`.
    @param button_type `Inline` if the button needs to be rendered as an inline button.
    @param faux Boolean. For faux button wrapped in an actual button/anchor.
    @param inverted Boolean. When the button needs inverted styles.
#}}

<!-- /components/_button.antlers.html -->
{{ if label }}
    <{{ as or 'a' }}
        {{ slot:attributes }}
        class="
            font-bold underline decoration-2 focus:outline-none focus-visible:ring focus-visible:ring-offset-2
            {{ if button_type === 'inline' }}
                underline motion-safe:transition
                {{ inverted
                    ? 'text-white decoration-white focus-visible:ring-white'
                    : 'text-neutral decoration-primary focus-visible:ring-primary'
                }}
            {{ else }}
                inline-flex items-center py-3 px-4 rounded leading-none no-underline select-none whitespace-nowrap motion-safe:transition
                {{ inverted
                    ? 'bg-white text-primary focus-visible:ring-white'
                    : 'bg-primary text-white focus-visible:ring-primary'
                }}
            {{ /if }}
            {{ class }}
        "
        {{ !faux ?= { partial:statamic-peak-tools::snippets/button_attributes } }}
    >
        {{ link_type == 'email' ? { label | obfuscate_email } : label }}
    </{{ as or 'a' }}>
{{ /if }}
<!-- End: /components/_button.antlers.html -->