{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{% import "styleguides/general/atoms/button/button-macros.njk" as button %}

{# ========================================================================= #}
{# :: Settings #}
{# ========================================================================= #}
{% set params = {
  isFullWidth: false,
  styleVendors: [],
  scriptVendors: [],
  scope: "s-button"
} %}

{# ========================================================================= #}
{# :: Info #}
{# ========================================================================= #}
{% set info %}

This creates a button that does not really have any context, but changes the
color theme in order for it to work better on certain backgrounds. This can
for example be combined with a a-button--ghost modifier to change the color
of the default ghost button.

- a-button--theme-black

{% endset %}

{# ========================================================================= #}
{# :: Preview #}
{# ========================================================================= #}
{% set preview %}

{{button.default("a-button--ghost a-button--theme-black", {
  text: "Ghost button"
})}}

{{button.default("a-button--ghost a-button--theme-black icon-turn-off", {
  text: "Ghost button"
})}}

{{button.default("a-button--ghost a-button--theme-black icon-turn-off a-button--icon-after", {
  text: "Ghost button"
})}}

{% endset %}

{# ========================================================================= #}
{# :: Code #}
{# ========================================================================= #}
{% set code %}

{{button.default("a-button--ghost", {
  text: "Ghost button"
})}}

{% endset %}