<p-dismissable class="message -dark error" v-slot="{ close }">
  <svg class="message__icon icon -square" viewBox="0 0 32 32"><use href="/main-icons-sprite.svg#error" /></svg>
  <div class="message__content">Message content neque tincidunt, rhoncus sapien ac, volutpat enim.</div>
  <button class="message__close" @click="close">
    <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
  </button>
</p-dismissable>

<p-dismissable class="message -dark warning" v-slot="{ close }">
  <svg class="message__icon icon -square" viewBox="0 0 32 32"><use href="/main-icons-sprite.svg#error" /></svg>
  <div class="message__content">Elit molestiae natus deleniti ipsam modi mollitia iusto quos, quaerat Itaque quasi quae maiores quidem est. Exercitationem optio voluptatem fuga provident dolores Sint dolor facilis dolor mollitia quos? Enim porro.</div>
  <button class="message__close" @click="close">
    <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
  </button>
</p-dismissable>

<p-dismissable class="message -dark success" v-slot="{ close }">
  <svg class="message__icon icon -square" viewBox="0 0 32 32"><use href="/main-icons-sprite.svg#check" /></svg>
  <div class="message__content">Message content neque tincidunt, rhoncus sapien ac, volutpat enim.</div>
  <button class="message__close" @click="close">
    <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
  </button>
</p-dismissable>

<p-dismissable class="message -dark info" v-slot="{ close }">
  <svg class="message__icon icon -square" viewBox="0 0 32 32"><use href="/main-icons-sprite.svg#info" /></svg>
  <div class="message__content">Message content neque tincidunt, rhoncus sapien ac, volutpat enim.</div>
  <button class="message__close" @click="close">
    <svg viewBox="0 0 18 18"><use href="/main-icons-sprite.svg#close" /></svg>
  </button>
</p-dismissable>

.message {
  position: static;
  display: grid;
  grid: auto / 2rem 1fr 3rem;
  align-items: start;
  gap: 1em;
  padding: 1em;
  background: var(--accent-color-50);
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  box-shadow:
    0 1px 1px 0 rgb(from var(--accent-color-900) r g b / 0.2),
    0 0.5rem 1.5rem 0 rgb(from var(--accent-color) r g b / 0.1);

  &__icon {
    --icon-stroke-color: #ffffff;
    --icon-fill-color: var(--accent-color);
  }

  &__content {
    padding: 0.25em 0;
  }

  &__close {
    appearance: none;
    border: 0;
    background: #00000000;
    color: inherit;
    height: 2rem;
    border-left: 1px solid rgb(from var(--accent-color) r g b / 0.5);
    display: grid;
    place-content: center;

    --icon-stroke-width: 1;

    grid: 1rem / 1rem;
  }

  &:is(dialog:not(:open)) {
    display: none;
  }

  &.-dark {
    background: var(--accent-color-900);
    color: #ffffff;
  }
}

<script setup>
import { ref } from 'vue'

const { name } = defineProps({ name: { type: String, required: true } })

const open = ref(name ? sessionStorage[name] !== 'dismissed' : true)

const close = () => {
  open.value = false
  if (name) {
    sessionStorage[name] = 'dismissed'
  }
}
</script>

<template>
  <div v-if="open" @close="close">
    <slot :close="close" />
  </div>
</template>