/* The dock's held selector, over whatever is being pressed. Nothing here paints a
   control or changes a color: at rest the app is exactly what it was. index.html declares
   this layer before every stylesheet, so its !important rules outrank the older ones
   without editing them. Values are copied from .mobile-dock-highlight. */
@layer yapper-dock-glass {
  /* The control stays put under the glass, like a dock tab. */
  .ym-glass-lensing {
    scale: none !important;
    transition-property: background-color, border-color, color, opacity, box-shadow !important;
  }
  .ym-glass-lensing > .ym-ripple { display: none !important; }

  /* One layer above the whole page, so it never affects how anything is laid out or
     clipped, and always reads the real page behind it, inside dialogs too. */
  ym-glass-lens { display: none !important; }
  ym-glass-lens.is-lit {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 2147483000 !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    scale: none !important;
    transform: scale(var(--ym-lens-rest-x, 1), 1) !important;
    transition: transform 360ms var(--ym-spring) !important;
  }
  /* The grow, and its timing, are .mobile-dock-highlight's own. */
  ym-glass-lens.is-lit.is-pressed { transform: scale(1.34) !important; }
  ym-glass-lens.is-lit.is-entering { transition: none !important; }
  /* The real page under the glass, label and all, bent. The old "no backdrop filters"
     rule stays in force everywhere else: this exists on one small element at a time,
     only while something is pressed, and never carries a blur. */
  ym-glass-lens.is-lit.is-refracting {
    -webkit-backdrop-filter: var(--ym-glass-refraction) !important;
    backdrop-filter: var(--ym-glass-refraction) !important;
  }
  /* Above the bent page: the selector's rim and glow. Its 27% tint sits behind two of
     the dock's 72% fills, so only about 2% of it shows through in the middle. Under
     the rim nothing covers it, which is what takes the rim from 56% to 64% blue. */
  ym-glass-lens::after {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: 1px solid var(--ym-glass-rest-edge, transparent);
    border-radius: inherit;
    pointer-events: none;
    background: transparent;
    box-shadow: none;
    /* Quicker on the way out: a tap may have just opened a dialog under it. */
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 160ms ease;
  }
  ym-glass-lens.is-pressed::after {
    border-color: color-mix(in srgb, var(--primary) 64.1%, white 14%);
    background-color: color-mix(in srgb, var(--primary) 2%, transparent);
    box-shadow: 0 15px 36px color-mix(in srgb, var(--primary) 31%, transparent);
    transition: background-color 220ms ease, border-color 220ms ease, box-shadow 300ms ease;
  }
  ym-glass-lens.is-entering::after { transition: none; }
  /* On Safari and Firefox this holds a copy of what is under the rim. */
  .ym-glass-lens-optics {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    scale: none !important;
    animation: none !important;
    transition: none !important;
    flex: none !important;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .ym-glass-lens-optics svg { overflow: visible !important; }
}