{# ========================================================================= #}
{# :: Inheritance #}
{# ========================================================================= #}
{% extends "brandplatform/base/extends/component/page.njk" %}

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

A small input component used to insert a certain value based on the context, where
this component is used. It is mainly prefixed by a certain unit to indicate better
meaning to the inserted digits.

{% endset %}

{# ========================================================================= #}
{# :: Modifiers #}
{# ========================================================================= #}
{% set modifiers %}

- a-amount-input--primary

  Change the color/theme of the default amount-input component to use the primary
  color defined in the styleguide.

{% endset %}

{# ========================================================================= #}
{# :: States #}
{# ========================================================================= #}
{# {% set states %}

{% endset %} #}

{# ========================================================================= #}
{# :: JavaScript #}
{# ========================================================================= #}
{% set javascript %}

- js-amount-input

  This class is used to attach the JavaScript functionality onto the component
  in the styleguide. It makes sure that the input field is scaled when the user
  inserts a value. The unit is moved accordingly because of the styling applied.

{% endset %}