:host {
  /* layout */
  --ld-notification-min-height: var(--ld-sp-40);
  --ld-notification-border-radius: var(--ld-br-m);
  --ld-notification-inset-y: var(--ld-sp-32);

  /* colors */
  --ld-notification-col: var(--ld-col-wht);
  --ld-notification-warn-col: var(--ld-col-neutral-900);
  --ld-notification-alert-col: var(--ld-col-wht);

  /* themable colors */
  --ld-notification-bg-col: var(--ld-thm-primary);
  --ld-notification-warn-bg-col: var(--ld-thm-warning);
  --ld-notification-alert-bg-col: var(--ld-thm-error);

  position: fixed;
  z-index: 2147483647; /* Highest possible */
  display: flex;
  justify-content: center;
  inset: 0;
  min-width: 20rem;
  font: var(--ld-typo-body-m);
  pointer-events: none;
}

@keyframes ld-notification-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ld-notification-fade-out {
  from {
    transform: none;
    opacity: 1;
  }
  to {
    transform: none;
    opacity: 0;
  }
}

.ld-notification__item {
  pointer-events: auto;
  position: absolute;
  transform-origin: center;
  width: fit-content;
  min-width: 19rem;
  max-width: calc(90% - 1rem);
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  justify-content: space-between;
  transition: transform var(--ld-transition-duration-normal) ease,
    opacity var(--ld-transition-duration-normal) linear;
  box-shadow: var(--ld-shadow-sticky);
  min-height: var(--ld-notification-min-height);
  border-radius: var(--ld-notification-border-radius);

  &:where(:not(.ld-notification__item--dismissed)) {
    animation: ld-notification-fade-in var(--ld-transition-duration-normal)
      linear;
  }

  &:nth-last-of-type(n + 5) {
    opacity: 0;
  }

  &:nth-last-of-type(n + 2) {
    .ld-notification__item-content,
    .ld-notification__btn-dismiss {
      opacity: 0;
    }
  }

  &:nth-last-of-type(2) {
    opacity: 0.75;
  }

  &:nth-last-of-type(3) {
    opacity: 0.5;
  }

  &:nth-last-of-type(4) {
    opacity: 0.25;
  }

  &.ld-notification__item--dismissed {
    opacity: 0;
    animation: ld-notification-fade-out var(--ld-transition-duration-normal)
      linear forwards;
  }

  :host(.ld-notification--bottom) & {
    bottom: var(--ld-notification-inset-y);

    &:nth-last-of-type(2) {
      transform: scale(0.975) translateY(25%);
    }

    &:nth-last-of-type(3) {
      transform: scale(0.95) translateY(50%);
    }

    &:nth-last-of-type(4) {
      transform: scale(0.925) translateY(75%);
    }
  }

  :host(.ld-notification--top) & {
    top: var(--ld-notification-inset-y);

    &:nth-last-of-type(2) {
      transform: scale(0.975) translateY(-25%);
    }

    &:nth-last-of-type(3) {
      transform: scale(0.95) translateY(-50%);
    }

    &:nth-last-of-type(4) {
      transform: scale(0.925) translateY(-75%);
    }
  }
}

.ld-notification__item--info {
  background-color: var(--ld-notification-bg-col);
  color: var(--ld-notification-col);
}
.ld-notification__item--warn {
  background-color: var(--ld-notification-warn-bg-col);
  color: var(--ld-notification-warn-col);
}
.ld-notification__item--alert {
  background-color: var(--ld-notification-alert-bg-col);
  color: var(--ld-notification-alert-col);
}

.ld-notification__item-content,
.ld-notification__btn-dismiss {
  transition: opacity var(--ld-transition-duration-normal) linear;
}

.ld-notification__item-content {
  display: grid;
  grid-auto-flow: column;
  align-items: baseline;
  gap: var(--ld-sp-12);
  padding: var(--ld-sp-6) var(--ld-sp-12);

  > * {
    align-self: center;
  }
}

.ld-notification__btn-dismiss {
  margin-left: var(--ld-sp-16);
  align-self: center;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--ld-br-full);
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  height: var(--ld-sp-40);
  width: var(--ld-sp-40);
  display: inline-grid;
  place-items: center;
  color: inherit;
  user-select: none;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}
