/* ==========================================================================
   AnimeRadar V2.4.262 - "Alle loeschen" im Benachrichtigungsfenster

   Die Kopfzeile des Fensters trug bisher nur "Alle gelesen". Daneben steht
   jetzt "Alle loeschen". Beide sind flache Textschalter in derselben Groesse -
   die Kopfzeile ist schmal, eine gefuellte Warnflaeche waere dort zu laut.

   Unterschieden werden sie ueber die Farbe:
     "Alle gelesen"  --md-primary  (#e5342a, die Akzentfarbe)
     "Alle loeschen" --md-error    (#cc6679, die Fehlerfarbe des Projekts)

   Beide Werte sind vorhandene Marken aus material-redesign-v2-4-194.css,
   keine neuen Farben. Desktop und Mobil teilen sich dieselbe Zeile; erst
   wenn die Breite nicht reicht, ruecken die beiden Schalter unter die
   Ueberschrift.
   ========================================================================== */

html body .ar-notifications-head {
  /* Die Ueberschrift darf schrumpfen, die beiden Aktionen nicht. */
  flex-wrap: wrap;
}

html body .ar-notifications-head h2 {
  min-width: 0;
  flex: 1 1 auto;
}

html body .ar-notifications-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Die beiden Schalter stehen dicht beieinander. Ein feiner Strich dazwischen
   trennt sie, ohne eine zweite Flaeche aufzumachen. */
html body .ar-notifications-actions > .ar-notifications-clear::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  width: 1px;
  height: 11px;
  transform: translateY(-50%);
  background: rgba(125, 116, 128, .5);
}

html body .ar-notifications-clear {
  position: relative;
  color: var(--md-error, #cc6679);
}

html body .ar-notifications-clear:hover:not([disabled]),
html body .ar-notifications-clear:focus-visible:not([disabled]) {
  color: color-mix(in srgb, var(--md-error, #cc6679) 72%, #ffffff);
}

/* Derselbe zurueckgenommene Zustand wie bei "Alle gelesen": ist nichts da,
   ist auch nichts zu loeschen. */
html body .ar-notifications-clear[disabled] {
  color: #7d7480;
  cursor: default;
}

/* --------------------------------------------------------------------------
   Schmale Fenster
   --------------------------------------------------------------------------
   Gemessen bei 360: Ueberschrift und beide Schalter passen nebeneinander.
   Faellt die Breite darunter - kleinere Geraete, groessere Schrift -, bricht
   die Zeile um und die Aktionen stehen gemeinsam darunter, statt sich zu
   ueberlappen oder den Text abzuschneiden. */
@media (max-width: 380px) {
  html body .ar-notifications-head {
    align-items: flex-start;
    gap: 6px 10px;
  }

  html body .ar-notifications-head h2 {
    flex: 1 1 100%;
  }

  html body .ar-notifications-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
    gap: 14px;
  }
}