{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes, data) %}

<div class="bp-color bp-copy bp-js-copy {{classes}}">
  <div
    class="bp-color__visual"
    style="{{data.style if data.style else 'background-color: ' + data}}"
  >

    <button class="bp-color__copy bp-copy__action">
      <span class="bp-copy__action-idle">Copy hex</span>
      <span class="bp-copy__action-success">Copied 🎉</span>
    </button>

  </div>
  <span class="bp-color__text bp-copy__value">{{data.value if data.style else data}}</span>
</div>

{% endmacro %}