/*
 * Die Meldungen von WooCommerce -- "wurde deinem Warenkorb hinzugefuegt",
 * Fehler beim Bestellen, Hinweise zur Zahlung.
 *
 * Sie stehen auf jeder Seite des Shops: auf der Produktseite ueber dem
 * Produkt, im Warenkorb und an der Kasse ueber dem Formular. Deshalb eine
 * eigene Datei neben Seitenkopf und Fusszeile und nicht in der einer Seite.
 *
 * Das Mockup zeigt sie in der Produktansicht als gruenen Streifen mit Haken,
 * Text und dem Verweis "Warenkorb anzeigen" rechts. Die Klassen kommen aus
 * WooCommerce (wc-block-components-notice-banner). Tokens:
 * src/pages/design/design.css.
 */

.wc-block-components-notice-banner {
  box-sizing    : border-box;
  align-items   : center;
  gap           : var(--space-3);
  padding       : var(--space-3) var(--space-4);
  border-width  : 1px;
  border-style  : solid;
  border-radius : var(--radius-md);
  font-family   : var(--font-body);
  font-size     : 14px;
  line-height   : 1.4;
}

/* WooCommerce setzt den Fokus nach dem Einblenden auf den Streifen, damit
   Vorleseprogramme ihn ansagen. Der Ring der Seite legte sich dabei um die
   ganze Meldung -- ein oranger Rahmen um eine gruene Meldung liest sich wie
   ein Fehler. Der Fokus bleibt, nur der Ring geht weg. */
/* Die Seiten setzen ihren Fokusring auf jedes Element darin; deshalb hier die
   Kette ueber das tabindex-Attribut, das WooCommerce dafuer selbst setzt. */
.wc-block-components-notice-banner[tabindex]:focus,
.wc-block-components-notice-banner[tabindex]:focus-visible {
  outline : none;
}

/* WooCommerce macht aus dem Symbol eine farbige Scheibe: Hintergrund und 50%
   Rundung am <svg>, das Zeichen darin ausgespart. Die Farben dafuer sind
   seine eigenen -- Blau fuer den Hinweis, Gruen, Rot -- und fielen als
   einziger Fleck aus dem Design. Jede Meldungsart faerbt ihre Scheibe weiter
   unten aus der eigenen Rampe; das Zeichen darin traegt hier einmal fuer alle
   die Farbe der Seite, damit es als Aussparung liegt. */
.wc-block-components-notice-banner > svg {
  flex   : none;
  width  : 22px;
  height : 22px;
  fill   : var(--color-bg);
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content {
  display     : flex;
  align-items : center;
  gap         : var(--space-4);
  flex-wrap   : wrap;
}

/* WooCommerce schiebt den Schliessen-Knopf per margin: 6px 0 0 auto !important
   nach unten -- hier vertikal exakt mittig zur Meldung ausrichten. */
.wc-block-components-notice-banner > .wc-block-components-button {
  margin     : 0 0 0 auto !important;
  align-self : center !important;
}

.wc-block-components-notices .wc-block-components-button {
  align-self : center !important;
}

/* Der Verweis daneben ist im Mockup ein unterstrichener Text, kein Knopf.

   order haelt ihn am Ende der Zeile: WooCommerce stellt ihn nicht immer
   hinter den Text. In der Meldung "Confirm email address" im Konto steht er
   als erstes Kind, und der Text lief dann rechts an ihm vorbei. Der reine
   Text daneben ist ein namenloses Flex-Feld und bleibt bei order 0. */
.wc-block-components-notice-banner .wc-block-components-notice-banner__content .button {
  order           : 1;
  margin-left     : auto;
  padding         : 0;
  border          : none;
  background      : none;
  font-family     : var(--font-body);
  font-size       : 14px;
  font-weight     : 400;
  text-decoration : underline;
  white-space     : nowrap;
}


/* ── Erfolg ──────────────────────────────────────────────────────────── */

.wc-block-components-notice-banner.is-success {
  border-color : var(--color-accent-2-300);
  background   : var(--color-accent-2-100);
  color        : var(--color-text);
}

.wc-block-components-notice-banner.is-success > svg {
  background : var(--color-accent-2-600);
}

.wc-block-components-notice-banner.is-success .button {
  color : var(--color-accent-2-700);
}


/* ── Hinweis ─────────────────────────────────────────────────────────────
   Ein Hinweis sagt etwas, er warnt nicht: "noch keine Downloads vorhanden",
   "bestaetige deine Adresse". In der Terrakotta-Rampe, die er sich frueher
   mit der Warnung teilte, las er sich wie ein Fehler. Er bekommt deshalb die
   ruhige Flaeche des Design-Systems -- dieselbe wie eine Karte -- und faellt
   damit als Einziger nicht in eine Signalfarbe.

   Der Verweis darin bleibt in der Akzentfarbe: er ist ein Verweis wie jeder
   andere im Fliesstext und traegt dessen dunkle Stufe. */

.wc-block-components-notice-banner.is-info {
  border-color : var(--color-divider);
  background   : var(--color-surface);
  color        : var(--color-text);
}

.wc-block-components-notice-banner.is-info > svg {
  background : var(--color-neutral-600);
}

.wc-block-components-notice-banner.is-info .button {
  color : var(--color-accent-700);
}


/* ── Warnung ─────────────────────────────────────────────────────────────
   Sie behaelt die Terrakotta-Rampe: hier soll etwas auffallen. */

.wc-block-components-notice-banner.is-warning {
  border-color : var(--color-accent-300);
  background   : var(--color-accent-100);
  color        : var(--color-text);
}

.wc-block-components-notice-banner.is-warning > svg {
  background : var(--color-accent-600);
}

.wc-block-components-notice-banner.is-warning .button {
  color : var(--color-accent-700);
}


/* ── Fehler ──────────────────────────────────────────────────────────── */

/* Das Design-System kennt kein Rot -- ein Fehler muss aber als solcher zu
   erkennen sein. Zwei eigene Werte, in Saettigung und Helligkeit an die
   uebrigen Farben angelehnt, damit sie nicht herausfallen. */
.wc-block-components-notice-banner.is-error {
  --notice-error     : #9c3524;
  --notice-error-soft: #fbeae6;

  border-color : color-mix(in srgb, var(--notice-error) 35%, transparent);
  background   : var(--notice-error-soft);
  color        : var(--color-text);
}

.wc-block-components-notice-banner.is-error > svg {
  background : var(--notice-error);
}

.wc-block-components-notice-banner.is-error .button,
.wc-block-components-notice-banner.is-error a {
  color : var(--notice-error);
}

.wc-block-components-notice-banner.is-error ul {
  margin     : 0;
  padding    : 0;
  list-style : none;
}