@layer components {
  .notification--read {
    opacity: 0.55;
  }

  .notification__dot {
    display: inline-block;
    inline-size: 0.5em;
    block-size: 0.5em;
    border-radius: 50%;
    background-color: var(--color-blue);
    margin-inline-end: 0.5em;
    vertical-align: middle;
    position: relative;
    inset-block-start: -0.1em;
  }
}