/* In-app notifications (js/components/custom/AppNotification.js) */

.appNotifications {
  position: fixed;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(30rem, calc(100vw - 2rem));
  /* Only the notifications take clicks, not the gaps between them */
  pointer-events: none;
}

.appNotifications--top-right { top: 1rem; right: 1rem; }
.appNotifications--top-left { top: 1rem; left: 1rem; }
.appNotifications--top-center { top: 1rem; left: 50%; transform: translateX(-50%); }
.appNotifications--bottom-right { bottom: 1rem; right: 1rem; flex-direction: column-reverse; }
.appNotifications--bottom-left { bottom: 1rem; left: 1rem; flex-direction: column-reverse; }
.appNotifications--bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); flex-direction: column-reverse; }

@media (max-width: 767px) {
  .appNotifications {
    width: calc(100vw - 1rem);
  }

  .appNotifications--top-right,
  .appNotifications--top-left,
  .appNotifications--top-center { top: 0.5rem; }

  .appNotifications--bottom-right,
  .appNotifications--bottom-left,
  .appNotifications--bottom-center { bottom: 0.5rem; }

  .appNotifications--top-right,
  .appNotifications--bottom-right { right: 0.5rem; }

  .appNotifications--top-left,
  .appNotifications--bottom-left { left: 0.5rem; }
}

/* The colors, set per variant below; a notification's own `colors` override them inline */
.appNotification {
  --notification-background: var(--md-sys-color-surface-container-high);
  --notification-icon: var(--md-sys-color-on-surface-variant);
  --notification-title: var(--md-sys-color-on-surface);
  --notification-body: var(--md-sys-color-on-surface-variant);
  --notification-bar: var(--md-sys-color-primary);
  /* Warnings have no color of their own in the theme */
  --notification-warning: #8b5000;

  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1.5rem calc(1.5rem + 4px);
  overflow: hidden;
  background-color: var(--notification-background);
  border-radius: var(--md-sys-rounded-xs);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  cursor: default;
  /* Holding it to stop the countdown mustn't select its text or open the long-press menu */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

@media (prefers-color-scheme: dark) {
  .appNotification {
    --notification-warning: #ffb870;
  }
}

@media (max-width: 767px) {
  .appNotification {
    gap: 1rem;
    padding: 1rem 1rem calc(1rem + 4px);
  }
}

.appNotification--info { --notification-bar: var(--md-sys-color-primary); }
.appNotification--success { --notification-icon: var(--md-sys-color-primary); --notification-bar: var(--md-sys-color-primary); }
.appNotification--warning { --notification-icon: var(--notification-warning); --notification-bar: var(--notification-warning); }
.appNotification--error { --notification-icon: var(--md-sys-color-error); --notification-bar: var(--md-sys-color-error); }

.appNotification--link {
  cursor: pointer;
}

.appNotification--link:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.appNotificationIcon {
  flex-shrink: 0;
  font-size: 2rem;
  line-height: 1;
  color: var(--notification-icon);
}

.appNotificationText {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.appNotificationTitle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--notification-title);
  overflow-wrap: anywhere;
}

.appNotificationBody {
  font-size: 0.875rem;
  color: var(--notification-body);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.appNotificationBody:empty {
  display: none;
}

/* Shrinks as the time on screen runs out */
.appNotificationBar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-color: var(--notification-bar);
  transform-origin: left;
}