:root {
  --wcpn-gap: 1rem;
  --wcpn-max-width: min(28rem, calc(100vw - 2rem));
  --wcpn-radius: 1rem;
  --wcpn-shadow: 0 1rem 3rem color-mix(in srgb, #000 22%, transparent);
  --wcpn-duration: 4500ms;
}

.wcpn-root {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  display: grid;
  padding: 1rem;
  gap: var(--wcpn-gap);
  box-sizing: border-box;
  align-items: start;
  justify-items: end;
  overflow: hidden;
}

.wcpn-root[data-position="top-left"] { justify-items: start; }
.wcpn-root[data-position="top-center"] { justify-items: center; }
.wcpn-root[data-position="top-right"] { justify-items: end; }
.wcpn-root[data-position="bottom-left"] { align-items: end; justify-items: start; }
.wcpn-root[data-position="bottom-center"] { align-items: end; justify-items: center; }
.wcpn-root[data-position="bottom-right"] { align-items: end; justify-items: end; }

.wcpn-dialog {
  --wcpn-accent: oklch(62% 0.18 145);
  margin: 0;
  inset: auto;
  width: var(--wcpn-max-width);
  max-width: var(--wcpn-max-width);
  padding: 0;
  border: 0;
  border-radius: var(--wcpn-radius);
  background: transparent;
  color: inherit;
  overflow: visible;
  pointer-events: auto;
}

.wcpn-dialog::backdrop {
  background: color-mix(in srgb, #000 42%, transparent);
  backdrop-filter: blur(3px);
}

.wcpn-dialog:not([open]) { display: none; }

.wcpn-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 1rem 1.15rem;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: inherit;
  background: color-mix(in srgb, canvas 94%, var(--wcpn-accent));
  color: canvastext;
  box-shadow: var(--wcpn-shadow);
  backdrop-filter: blur(18px) saturate(1.15);
  container-type: inline-size;
  overflow: hidden;
}

.wcpn-icon {
  inline-size: 1.8rem;
  block-size: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wcpn-accent) 18%, transparent);
  color: var(--wcpn-accent);
  font-weight: 800;
  flex-shrink: 0;
}

.wcpn-content { min-width: 0; }
.wcpn-content a { color: inherit; }
.wcpn-message { line-height: 1.45; }
.wcpn-message ul, .wcpn-message ol { margin: .4rem 0 .2rem 1.2rem; }

.wcpn-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: .65;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  padding: .15rem .25rem;
  flex-shrink: 0;
}
.wcpn-close:hover, .wcpn-close:focus-visible { opacity: 1; }

.wcpn-progress {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  overflow: hidden;
  border-radius: 0 0 var(--wcpn-radius) var(--wcpn-radius);
}
.wcpn-progress::before {
  content: "";
  display: block;
  block-size: 100%;
  transform-origin: left;
  background: var(--wcpn-accent);
  animation: wcpn-progress var(--wcpn-duration) linear forwards;
}

.wcpn-dialog[data-type="success"] { --wcpn-accent: oklch(62% .18 145); }
.wcpn-dialog[data-type="error"]   { --wcpn-accent: oklch(58% .23 25); }
.wcpn-dialog[data-type="notice"]  { --wcpn-accent: oklch(72% .17 85); }
.wcpn-dialog[data-type="info"]    { --wcpn-accent: oklch(62% .18 250); }

.wcpn-dialog[data-animation="slide"] { animation: wcpn-slide .28s cubic-bezier(.2,.8,.2,1); }
.wcpn-dialog[data-animation="fade"] { animation: wcpn-fade .22s ease-out; }
.wcpn-dialog[data-animation="zoom"] { animation: wcpn-zoom .22s cubic-bezier(.2,.8,.2,1); }

.wcpn-dialog[data-closing="1"] {
  animation: wcpn-out .18s ease-in forwards;
}

@keyframes wcpn-progress { to { transform: scaleX(0); } }
@keyframes wcpn-slide { from { opacity: 0; translate: 0 -1rem; } to { opacity: 1; translate: 0 0; } }
@keyframes wcpn-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wcpn-zoom { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
@keyframes wcpn-out { to { opacity: 0; scale: .97; } }

@media (prefers-reduced-motion: reduce) {
  .wcpn-dialog { animation: none !important; }
  .wcpn-progress::before { animation: none !important; }
}

@container (max-width: 20rem) {
  .wcpn-card { grid-template-columns: auto 1fr; }
  .wcpn-close { grid-column: 2; grid-row: 1; justify-self: end; }
}