Callout

<component name="call-out">
  <template>
    <p>
      <slot />
    </p>
    <input type="checkbox" id="alert-close"/>
    <label for="alert-close" title="close">
      <i></i>
    </label>
    <style>
      p { padding: 0; margin: 0; width: 80%; }
      input { display: none; }
      label { cursor: pointer; }
      :host([dismiss]) i::after {
        font-style: normal;
        content: '\2716'; /* ✖ symbol */
        width: 20%;
      }
      :host {
        display: flex;
        justify-content: space-between;
        color: black;
        opacity: 1;
        margin: 0.8rem;
        padding: 0.75rem 1.25rem;
        border: 1px solid;
        border-radius: 0.25rem;
        color: #004085;
        background-color: #cce5ff;
        border-color: #b8daff;
      }
      :host([type="success"]) { background-color: #d4edda; color: #155724; border-color: #c3e6cb }
      :host([type="warn"]) { background-color: #fff3cd; color: #856404; border-color: #ffeeba }
      :host([type="error"]) { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb }
      @keyframes autodismiss {
        0%    { opacity: 1; }
        60%   { opacity: 1; }
        100%  { opacity: 0; }
      }
      :host([autodismiss]) {
        animation-name: autodismiss;
        animation-duration: 5s;
        opacity: 0;
      }
      @keyframes dismissAnimation {
        0% { opacity: 1; }
        90%, 100% {
          opacity: 0;
          font-size: 0.1px;
          transform: scale(0);
        }
      }
      @keyframes hide {
        100% {
          height: 0px;
          width: 0px;
          overflow: hidden;
          margin: 0px;
          padding: 0px;
          border: 0px;
        }
      }
      :host input:checked ~ * {
        animation-name: dismissAnimation, hide;
        animation-duration: 300ms;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        animation-delay: 0s, 100ms;
      }
    </style>
  </template>
</component>
<call-out>This is a normal alert!</call-out>
<call-out type="success">This is my success alert!</call-out>
<call-out type="warn">This is my warning alert!</call-out>
<call-out type="error">This is my error alert!</call-out>
<call-out type="success" autodismiss>This is the autodismiss alert!</call-out>
<call-out type="success" dismiss>This is the dismiss alert!</call-out>

Result:

This is a normal alert! This is my success alert! This is my warning alert! This is my error alert! This is the autodismiss alert! This is the dismiss alert!