Spry/css/themes/spry-theme-h2o.css

/*
 * Spry CSS theme: "H2O" — Mac OS X Aqua, Mountain Lion (2012)
 * Ported from the ARC Aqua reference: a brushed menu bar along the top, grey
 * windows on pinstriped linen, white push buttons that turn blue when pressed,
 * a pulsing blue default button, pop-up buttons with a blue end, Finder's
 * striped lists and blue selection. Light-only.
 * Activate with <html data-theme="h2o"> or the demo radio #spry-theme-h2o.
 * Load after spry.css.
 */

[data-theme="h2o"],
html:has(#spry-theme-h2o:checked) {
  color-scheme: light;

  /* ---- Aqua surfaces (verbatim from the reference tokens) ---- */
  --h2o-push: linear-gradient(180deg, #ffffff 0%, #f7f7f7 49%, #ededed 50%, #f3f3f3 100%);
  --h2o-push-hover: linear-gradient(180deg, #ffffff 0%, #fdfdfd 49%, #f3f3f3 50%, #ffffff 100%);
  --h2o-blue: linear-gradient(180deg, #b9dcfd 0%, #85c1fb 49%, #4fa0f6 50%, #79bdfa 100%);
  --h2o-gloss:
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.35) 49%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.1) 100%);
  --h2o-gel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 1px rgba(0, 0, 0, 0.2);
  --h2o-highlight: linear-gradient(180deg, #3b6fe2 0%, #1f50cc 100%);
  --h2o-selection: linear-gradient(180deg, #5f92e2 0%, #2f66cc 100%);
  --h2o-default-btn: linear-gradient(180deg, #5590e8 0%, #2a6cd4 45%, #1c53b4 55%, #2f6ac8 100%);
  --h2o-edge: #9a9a9a #959595 #868686;
  --h2o-blue-edge: #3f6fb6 #3a68ad #2f5996;

  /* ---- Palette ---- */
  --spry-bg: #ececec;
  --spry-bg-alt: #e3e3e3;
  --spry-bg-inset: #f2f2f2;
  --spry-surface: #ffffff;
  --spry-surface-hover: #f6f6f8;
  --spry-fg: #1a1a1a;
  --spry-fg-muted: #5f5f63;
  --spry-border: #c8c8c8;
  --spry-border-strong: #959595;
  --spry-accent: #3a8ef5;
  --spry-accent-hover: #2a6ed8;
  --spry-accent-fg: #ffffff;
  --spry-danger: #e0443e;
  --spry-success: #4cae3c;
  --spry-warning: #f5a623;
  --spry-info: #33a3d6;
  --spry-link: #2a6ed8;
  --spry-link-hover: #1b53b0;
  --spry-backdrop: rgb(0 0 0 / 0.22); /* Mac dialogs barely dim */
  --spry-focus-ring: 0 0 0 3px rgba(80, 150, 240, 0.55);

  /* ---- Typography: Aqua is small and compact ---- */
  --spry-font: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif;
  --spry-font-heading: var(--spry-font);
  --spry-font-mono: 'Menlo', 'Monaco', ui-monospace, 'Courier New', monospace;
  --spry-font-size: 0.8rem;
  --spry-line-height: 1.5;
  --spry-heading-weight: 700;
  --spry-heading-color: #1a1a1a;

  /* ---- Shape & depth: 4px base, 3px sm, 5px lg ---- */
  --spry-radius: 4px;
  --spry-radius-sm: 3px;
  --spry-radius-lg: 5px;
  --spry-radius-pill: 999px;
  --spry-shadow: 0 1px 1px rgb(0 0 0 / 0.12);
  --spry-shadow-lg: 0 0 0 1px rgb(0 0 0 / 0.22), 0 10px 28px rgb(0 0 0 / 0.4);

  /* ---- Controls: ~22px at 12.8px text ---- */
  --spry-control-bg: #ffffff;
  --spry-control-fg: #1a1a1a;
  --spry-control-border: #a5a5a5;
  --spry-control-radius: 3px;
  --spry-control-padding-x: 0.5rem;
  --spry-control-padding-y: 0.2rem;

  /* Buttons: the white push; held down it turns Aqua blue (the active state) */
  --spry-btn-bg: var(--h2o-push);
  --spry-btn-fg: #1a1a1a;
  --spry-btn-border: #959595;
  --spry-btn-bg-hover: var(--h2o-push-hover);
  --spry-btn-bg-active: var(--h2o-blue);

  --spry-card-bg: #ffffff;
  --spry-card-border: rgba(0, 0, 0, 0.16);
  --spry-card-padding: 0.9rem;
  --spry-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 4px rgba(0, 0, 0, 0.1);

  --spry-table-header-bg: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
  --spry-table-hover: #dde7f6;

  --spry-progress-bg: linear-gradient(180deg, #d6d6d6 0%, #f2f2f2 100%);
  --spry-progress-fg: #3d8ef5;

  --spry-popover-bg: rgba(255, 255, 255, 0.97);
  --spry-popover-border: #9a9a9a;
  --spry-popover-shadow: 0 5px 15px rgb(0 0 0 / 0.35);

  /* The desktop: pinstriped linen, light enough to stay readable */
  & body {
    background-color: #ececec;
    background-image:
      radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.18) 100%),
      repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 1px, rgba(0, 0, 0, 0.04) 1px 3px);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
  }

  & ::selection { background-color: #b4d5fe; }

  /* ---- The menu bar along the top ---- */
  & .topbar {
    padding: 0.25rem clamp(0.75rem, 2vw, 1.5rem);
    background: linear-gradient(180deg, #f8f8f8 0%, #e3e3e3 55%, #d4d4d4 100%);
    border-bottom: 1px solid #8e8e8e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 4px rgba(0, 0, 0, 0.3);
    font-size: 13px;
  }

  & .topbar-brand { font-size: 13px; font-weight: 700; color: #1a1a1a; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }

  /* Menu titles, highlighted blue like an open menu */
  & .nav a { padding: 0.2rem 0.65rem; border-radius: 3px; color: #000; font-weight: 400; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }

  & .nav a:hover,
  & .nav a.active { background-image: var(--h2o-highlight); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }

  & .nav a.active { font-weight: 700; }

  /* ---- Menus: compact, nearly opaque white, blue highlight across the row ---- */
  & .menu a { padding: 3px 10px; border-radius: 3px; }

  & .submenu { padding: 4px; background: rgba(255, 255, 255, 0.97); border: 1px solid #9a9a9a; border-radius: 5px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35); }

  & .submenu a { padding: 3px 10px; border-radius: 3px; }

  & .menu a:hover,
  & .menu a.active,
  & .submenu a:hover,
  & .submenu a.active { background-image: var(--h2o-highlight); color: #fff; }

  & .popover-menu {
    padding: 4px;
    min-width: 11rem;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #9a9a9a;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
  }

  & .popover-menu :is(a, button) { padding: 3px 10px; border-radius: 3px; box-shadow: none; }

  & .popover-menu :is(a, button):hover { background-image: var(--h2o-highlight); color: #fff; }

  /* ---- Tabs as Aqua segmented controls ---- */
  & .tab-list { gap: 0; border-bottom: 0; }

  & .tab-list label {
    padding: 0.25rem 0.9rem;
    border: 1px solid var(--h2o-edge);
    border-radius: 0;
    margin-left: -1px;
    background-image: var(--h2o-push);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 1px rgba(0, 0, 0, 0.12);
    color: #000;
    font-weight: 500;
  }

  & .tab-list label:first-of-type { margin-left: 0; border-radius: 4px 0 0 4px; }

  & .tab-list label:last-of-type { border-radius: 0 4px 4px 0; }

  & .tab-list label:hover { background-image: var(--h2o-push-hover); color: #000; }

  & .tabs > input:nth-of-type(1):checked ~ .tab-list label:nth-of-type(1),
  & .tabs > input:nth-of-type(2):checked ~ .tab-list label:nth-of-type(2),
  & .tabs > input:nth-of-type(3):checked ~ .tab-list label:nth-of-type(3),
  & .tabs > input:nth-of-type(4):checked ~ .tab-list label:nth-of-type(4),
  & .tabs > input:nth-of-type(5):checked ~ .tab-list label:nth-of-type(5),
  & .tabs > input:nth-of-type(6):checked ~ .tab-list label:nth-of-type(6) {
    position: relative;
    z-index: 1;
    background-color: #4a99f5;
    background-image: var(--h2o-gloss);
    border-color: var(--h2o-blue-edge);
    color: #000;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    box-shadow: var(--h2o-gel-shadow);
  }

  /* ---- Buttons: the white push button, for .btn and bare buttons alike ---- */
  & :where(.btn, button, input[type="submit"], input[type="reset"], input[type="button"]) { border-color: var(--h2o-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 1px rgba(0, 0, 0, 0.12); }

  & :where(.btn, button, input[type="submit"], input[type="reset"], input[type="button"]):active { border-color: var(--h2o-blue-edge); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); }

  & :where(.btn, button, input[type="submit"], input[type="reset"], input[type="button"]):is(:disabled, [aria-disabled="true"]) { box-shadow: none; animation: none; filter: none; }

  /* The default button: Aqua blue gel, white writing, pulsing softly.
     Deep stops keep white text at AA across the band where the label sits. */
  & .btn-primary {
    background-color: transparent;
    background-image: linear-gradient(180deg, rgb(255 255 255 / 0.18) 0%, rgb(255 255 255 / 0) 50%), var(--h2o-default-btn);
    border-color: var(--h2o-blue-edge);
    color: #fff;
    font-weight: 600;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    box-shadow: var(--h2o-gel-shadow);
    animation: h2o-pulse 1s ease-in-out infinite alternate;
  }

  & .btn-primary:hover { border-color: #2f5996; }

  & .btn-primary:active { background-image: linear-gradient(180deg, rgb(0 0 0 / 0.12) 0%, rgb(0 0 0 / 0) 50%), linear-gradient(180deg, #2f6ac8 0%, #1c53b4 100%); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); }

  & .btn-primary:is(:disabled, [aria-disabled="true"]) { animation: none; box-shadow: none; }

  /* Danger: a red gel */
  & .btn-danger {
    background-color: #e0443e;
    background-image: var(--h2o-gloss);
    border-color: #922c28;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    box-shadow: var(--h2o-gel-shadow);
  }

  & .btn-danger:hover { background-color: #d63c36; border-color: #7d2420; }

  & .btn-danger:active { filter: brightness(0.88); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); }

  /* Outline: a white push button that fills with Aqua blue while held */
  & .btn-outline {
    background-image: var(--h2o-push);
    border-color: var(--h2o-edge);
    color: #2f5996;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 1px rgba(0, 0, 0, 0.12);
  }

  & .btn-outline:hover { background-image: var(--h2o-push-hover); border-color: var(--h2o-blue-edge); color: #2f5996; }

  & .btn-outline:active { background-image: var(--h2o-blue); border-color: var(--h2o-blue-edge); color: #1a1a1a; }

  /* Ghost and link stay flat: re-assert so the push base cannot leak in */
  & .btn-ghost { background-image: none; border-color: transparent; box-shadow: none; }

  & .btn-ghost:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); }

  & .btn-link { background-image: none; border-color: transparent; box-shadow: none; }

  /* ---- Text fields: white sunken wells ---- */
  & :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="color"], select, textarea, .input) { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.12); }

  & :where(input, textarea)::placeholder { color: #a0a0a0; }

  /* Pop-up buttons: a push button with an Aqua blue end holding the arrows */
  & select:not([size]):not([multiple]) {
    appearance: none;
    padding-right: 1.9rem;
    border-color: var(--h2o-edge);
    border-radius: 4px;
    background-color: #f2f2f2;
    background-image:
      conic-gradient(from 135deg at 50% 62%, #fff 0 90deg, rgba(0, 0, 0, 0) 90deg 360deg),
      conic-gradient(from -45deg at 50% 38%, #fff 0 90deg, rgba(0, 0, 0, 0) 90deg 360deg),
      linear-gradient(90deg, rgba(47, 89, 150, 0.6) 0 1px, rgba(47, 89, 150, 0) 1px),
      var(--h2o-blue),
      var(--h2o-push);
    background-position:
      right 5px calc(50% - 5px),
      right 5px calc(50% + 3px),
      right 18px top,
      right top,
      0 0;
    background-size: 9px 6px, 9px 6px, 19px 100%, 19px 100%, 100% 100%;
    background-repeat: no-repeat;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 1px rgba(0, 0, 0, 0.12);
  }

  & select:not([size]):not([multiple]):focus { border-color: var(--h2o-blue-edge); box-shadow: var(--spry-focus-ring), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 1px rgba(0, 0, 0, 0.12); }

  /* Checkboxes and radios take the Aqua blue via accent-color */

  /* ---- Switch: a sunken pill, striped Aqua blue when on ---- */
  & .switch .track {
    border: 1px solid #9a9a9a;
    background-color: #f4f4f4;
    background-image: linear-gradient(180deg, #ffffff 0%, #f3f3f3 49%, #e8e8e8 50%, #f4f4f4 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  & .switch input:checked + .track {
    border-color: var(--h2o-blue-edge);
    background-color: #4a99f5;
    background-image:
      repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.35) 0 6px, rgba(255, 255, 255, 0) 6px 12px),
      var(--h2o-blue);
  }

  & .switch .track::after { border: 1px solid #9a9a9a; box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(0, 0, 0, 0.35); }

  /* ---- Cards: group boxes, white on the grey window ---- */
  & .card { border-radius: 5px; }

  & .card-header { background: linear-gradient(180deg, #ffffff 0%, #ececec 100%); border-bottom-color: rgba(0, 0, 0, 0.12); font-weight: 700; }

  & .card-footer { background: linear-gradient(180deg, #f2f2f2 0%, #ececec 100%); border-top-color: rgba(0, 0, 0, 0.12); }

  /* ---- Alerts & badges: gel chips ---- */
  & .alert { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
  & .alert-danger { color: #b3241e; }
  & .alert-success { color: #1e6a12; }
  & .alert-warning { color: #8a5a08; }
  & .alert-info { color: #186a8f; }
  & .hero-eyebrow { color: #17479e; }
  & .field .is-invalid ~ .hint { color: #b3241e; }

  & .badge { color: #1b53b0; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }

  /* ---- Tables: Finder's striped list view ---- */
  & thead th {
    background-image: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
    color: #222;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid #b3b3b3;
    box-shadow: inset -1px 0 0 #d1d1d1;
  }

  & .table-striped tbody tr:nth-child(even) { background: #f1f5fb; }

  & .table-hover tbody tr:hover { background: #dde7f6; }

  & tbody tr[aria-selected="true"] { background-image: var(--h2o-selection); box-shadow: inset 0 1px 0 #5a8ddf; color: #fff; }

  & tbody tr[aria-selected="true"] a { color: #fff; }

  /* ---- Progress: a sunken well with a blue gel fill, stripes marching ---- */
  & progress { border: 1px solid #9f9f9f; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); }

  & progress::-webkit-progress-bar { background: linear-gradient(180deg, #d6d6d6 0%, #f2f2f2 100%); }

  & progress::-webkit-progress-value {
    background-color: #3d8ef5;
    background-image:
      repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0 8px, rgba(255, 255, 255, 0) 8px 16px),
      var(--h2o-gloss);
    background-size: 22.63px 22.63px, 100% 100%, 100% 100%;
    border-radius: 3px;
    animation: h2o-barber 0.9s linear infinite;
  }

  /* Indeterminate: the classic full-width Aqua barber pole marching across
     the trough. Element-background layers so it works in every engine. */
  & progress:indeterminate {
    background:
      repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 0 8px, #3d8ef5 8px 16px) 0 0 / 22.63px 22.63px,
      linear-gradient(180deg, #d6d6d6 0%, #f2f2f2 100%);
    animation: h2o-barber 0.9s linear infinite;
  }

  & progress::-moz-progress-bar {
    background-color: #3d8ef5;
    background-image:
      repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0 8px, rgba(255, 255, 255, 0) 8px 16px),
      var(--h2o-gloss);
    background-size: 22.63px 22.63px, 100% 100%, 100% 100%;
    border-radius: 3px;
    animation: h2o-barber 0.9s linear infinite;
  }


  /* ---- Spinner: twelve grey spokes stepping round ---- */
  & .spinner {
    border: 0;
    background: conic-gradient(from 15deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.7));
    -webkit-mask:
      repeating-conic-gradient(#000 0 12deg, transparent 12deg 30deg),
      radial-gradient(farthest-side, transparent 42%, #000 44%);
    -webkit-mask-composite: source-in;
    mask:
      repeating-conic-gradient(#000 0 12deg, transparent 12deg 30deg),
      radial-gradient(farthest-side, transparent 42%, #000 44%);
    mask-composite: intersect;
    animation: h2o-spinner 0.9s steps(12) infinite;
  }

  /* ---- Windows: grey frames with a brushed titlebar ---- */
  & dialog {
    background: #ececec;
    border: 1px solid rgba(0, 0, 0, 0.22);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.22), 0 22px 70px 4px rgba(0, 0, 0, 0.56);
  }

  & .dialog-titlebar {
    padding: 0.35rem 0.75rem;
    background: linear-gradient(180deg, #ebebeb 0%, #d3d3d3 100%);
    border-bottom: 1px solid #a3a3a3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  & .dialog-title { color: #4d4d4d; font-weight: 700; font-size: 0.85rem; text-align: center; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }

  /* The close button: a red traffic light, 12px across */
  & .dialog-close {
    order: -1;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid #7e1d18;
    border-radius: 50%;
    background-color: #c1302a;
    background-image: var(--h2o-gloss), linear-gradient(180deg, #f46b60 0%, #e05648 49%, #c1302a 50%, #d6453a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.25);
    color: transparent;
    font-size: 0;
  }

  & .dialog-close:hover { filter: brightness(1.12); }

  & .dialog-close:active { filter: brightness(0.88); }

  & .dialog-body { padding: 0.9rem; }

  /* Dialog buttons sit on the window's own grey, with no separator above */
  & .dialog-footer { padding: 0 0.9rem 0.9rem; border-top: 0; background: transparent; }

  /* ---- Popovers: grey windows; menus above restyle themselves white ---- */
  & [popover] { background: #ececec; border-color: rgba(0, 0, 0, 0.22); border-radius: 5px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35); }

  /* ---- Expanders: boxed rows with a push-button summary ---- */
  & details { border-color: rgba(0, 0, 0, 0.16); background: #ffffff; }

  & summary { background: linear-gradient(180deg, #ffffff 0%, #ececec 100%); }

  & summary:hover { background: linear-gradient(180deg, #ffffff 0%, #e3e3e3 100%); }

  & details[open] > summary { background: #e3e3e3; }

  /* ---- Fieldsets: group boxes ---- */
  & fieldset { border: 1px solid #b8b8b8; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.5); }

  & legend { font-weight: 700; }

  /* ---- kbd & code: little white wells ---- */
  & kbd {
    font-family: var(--spry-font-mono);
    font-size: 0.9em;
    padding: 0.05em 0.4em;
    border: 1px solid #a5a5a5;
    border-bottom-width: 2px;
    border-radius: 3px;
    background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
    box-shadow: inset 0 1px 0 #ffffff, 0 1px 0 rgba(0, 0, 0, 0.08);
  }

  & code { font-family: var(--spry-font-mono); font-size: 0.92em; background: rgba(0, 0, 0, 0.045); border-radius: 3px; padding: 0.08em 0.35em; }

  /* ---- Hero: a band of the pinstriped linen ---- */
  & .hero {
    background:
      radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 55%),
      repeating-linear-gradient(180deg, #ececec 0 2px, #f0f0f0 2px 4px);
    border-block: 1px solid #c9c9c9;
  }

  /* ---- Avatars: gel circles ---- */
  & .avatar {
    background-color: #4a99f5;
    background-image: var(--h2o-gloss), var(--h2o-blue);
    border: 1px solid #3a68ad;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  }

  /* ---- Drawers: grey windows sliding out over the linen ---- */
  & .drawer-left,
  & .drawer-right { background: #ececec; border-color: #8e8e8e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), -8px 0 24px rgba(0, 0, 0, 0.35); }

  /* ---- Pagination: white gels, the current page in Aqua blue ---- */
  & .pagination :is(a, span) { border-color: #959595; background-image: var(--h2o-push); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 1px rgba(0, 0, 0, 0.12); }

  & .pagination a:hover { background-image: var(--h2o-push-hover); }

  & .pagination [aria-current="page"] {
    background-color: #4a99f5;
    background-image: var(--h2o-gloss), var(--h2o-blue);
    border-color: var(--h2o-blue-edge);
    color: #1a1a1a;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  }

  @media (prefers-reduced-motion: reduce) {
    & .btn-primary,
    & .spinner { animation: none; }

    & progress::-webkit-progress-value { animation: none; }

    & progress::-moz-progress-bar { animation: none; }
  }
}

@keyframes h2o-barber {
  from { background-position: 0 0, 0 0, 0 0; }

  to { background-position: 22.63px 0, 0 0, 0 0; }
}

@keyframes h2o-pulse {
  from { filter: brightness(0.94) saturate(0.9); }

  to { filter: brightness(1.1) saturate(1.15); }
}

@keyframes h2o-spinner {
  to { transform: rotate(1turn); }
}