Dropdown

<div x-data="{open: false}" class="dropdown">
  <button @click="open = !open" @click.away="open = false" class="dropdown__button arrow arrow-light">
    <span>Normal dropdown</span>
    <i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation"><use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use></svg></i>
  </button>
  <div x-show="open" class="dropdown__content dropdown__content--dark p-2">
    <a class="dropdown__content-link" href="https://www.raute.fi">Link</a>
  </div>
</div>

<div x-data="{open: false}" class="dropdown relative">
  <button @click="open = !open" @click.away="open = false" class="btn btn--primary dropdown__button dropdown__button--light arrow arrow-dark">
    <span>Wide dark dropdown</span>
    <i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation"><use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use></svg></i>
  </button>
  <div x-show="open" class="dropdown__content dropdown__content--dark w-full left-0 p-4">
    <a class="dropdown__content-link" href="https://www.raute.fi">Link</a>
  </div>
</div>

<div x-data="{open: false}" class="dropdown relative">
  <button @click="open = !open" @click.away="open = false" class="dropdown__button arrow arrow-light">
    <span>Wide light dropdown</span>
    <i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation"><use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use></svg></i>
  </button>
  <div x-show="open" class="dropdown__content dropdown__content--light w-full left-0 p-4">
    <a class="dropdown__content-link" href="https://www.raute.fi">Link</a>
  </div>
</div>