push-notification:not(:defined)  { display: none; }
  push-notification::part(backend) { display: none; }
  push-notification { overflow: hidden;
    display: inline-grid; width: 15rem;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "I I I I I I"
      "i T T T T T"
      "b B B B B B"
      "A A A A A A";
      "z z z z z z";
    outline: 1px solid ButtonBorder;
    container-type: inline-size;
  }
  push-notification::part(url) { position: absolute; }
  push-notification::part(notification image)   { grid-area: I; }
  push-notification::part(notification title)   { grid-area: T; }
  push-notification::part(notification badge)   { grid-area: b; }
  push-notification::part(notification body)    { grid-area: B; }
  push-notification::part(notification icon)    { grid-area: i; }
  push-notification::part(notification actions) { grid-area: A; }
  push-notification::part(textarea) { background-color: transparent; overflow: hidden; }
  push-notification::part(textarea),
  push-notification::part(input) { border: 0; }

  push-notification::part(input) { background-color: transparent; }
  push-notification::part(img-input) { position: relative; display: flex; cursor: text; }
  push-notification::part(img-input):focus-within,
  push-notification::part(img-inputx) { outline: 2px solid; border-radius: var(--b-r); }
  push-notification::part(url) { position: absolute; top: 0; translate: 0 -100%; left: 0; width: 100cqw; background-color: Canvas; text-align: revert; z-index: 1; }
  push-notification::part(url):not(:focus-within) { opacity: 0; -webkit-pointer-events: none; pointer-events: none; }
  push-notification::part(img-input action) { position: revert; }
  push-notification::part(url image) { top: revert; bottom: 0; translate: 0 100%; }
  push-notification::part(url action) { bottom: 0; top: revert; translate: revert; width: 100%; }
  push-notification::part(url) { box-sizing: border-box; }

  push-notification::part(notification actions) { display: flex; justify-content: space-around; gap: var(--g); }
  push-notification::part(actions action) { display: flex; flex-direction: column; align-items: center; gap: calc(var(--g) /2); }
  push-notification::part(action title) { width: 100%; text-align: center; }
  push-notification::part(img) { width: 100%; }

  push-notification { --g: 0.5rem; gap: var(--g); padding: var(--g); --b-r: .1rem; border-radius: var(--b-r); }
  push-notification::part(actions action) { padding: calc(var(--g) / 2) var(--g); }
  push-notification { resize: horizontal; }


  push-notification[subscription\:endpoint*=mozilla],
  push-notification[subscription\:endpoint*=apple] {
    grid-template-columns: auto 1fr; row-gap: 0;
    grid-template-areas: "i T"
                         "b B";
    &::part(icon img-input) { position: revert; }
    &::part(icon url) { bottom: 0; top: revert; translate: revert; width: 100%; }
    &::part(notification image),
    &::part(notification badge),
    &::part(actions) { display: none; }
    &::part(notification icon),
    &::before { width: var(--s); height: var(--s); --s: calc((100cqw / 6) - (1 * var(--g))); }
  }
  push-notification[subscription\:endpoint*=apple] {
    &::part(notification img-input) { display: none; }
    &::before {
      content: '';
      background-image: var(--app-icon, url(//si.efn.kr/app-indicator.svg));
      background-size: contain;
      background-repeat: no-repeat;
    }
  }