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

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

This component is used to display information on top of the main content of the
site or app. It can be considered as a modal. It can contain anything and by the
use of modifiers it decides where the content on the screen is shown.

This component makes use of JavaScript to trigger opening the overlay and closing
it. In order to define a trigger for opening or closing the overlay the class
**js-overlay-trigger** must be added onto the component. Each overlay gets a unique
id defined on it. Onto the component that is defined as the js-overlay-trigger you must
add the attribute **data-overlay-target** with the id of the overlay you want it to trigger.
**DO NOTE** that this way of functionality is only applied in the styleguide and does not have
to be copied.

{% endset %}

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

- o-overlay--right

  The overlay's content slides in from the right and is displayed on the right
  side on the viewport. When on mobile this is changed to make use of the same
  behaviour as the o-overlay--bottom.

- o-overlay--bottom

  The overlay's content slides in from the bottom and is displayed on the bottom
  of the viewport. When on mobile this behaviour stays the same.

- o-overlay--center

  The overlay's content appears in the middle of the view. On mobile this behaviour
  is the same but will take up the entire screen.

{% endset %}

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

- is-open

  Use this state to indicate that the overlay is opened and is then visualised
  onto the main content. Based on the modifiers the contnet is animated in a
  certain way when opened or closed.

{% endset %}

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

- js-overlay

  Add class to the root element to add the JavaScript functionality to the
  component. This needs the js-overlay-trigger on other elements to be opened.
  Assign unique id as well to overlay so the triggers know which one to open.

- js-overlay-trigger

  Add to the element that needs to open or close the overlay, add attribute
  data-overlay-target with the id of the overlay to trigger it.

{% endset %}