/* ============================================================
   LIQUID GLASS CONTROL GROUP
   Finder/Settings-style grouped action bar sharing one glass
   surface. Mirrors SwiftUI ControlGroup semantics.

   DOM structure:
     div.lg-cg-outer                    (positioning context)
       div.lg-container.lg-cg-wrapper   (glass surface, flex)
         div.lg-cg-slots                (flex row of items)
           div.lg-cg-item               (hit zone, role=button)
             div.lg-cg-item__content    (icon, pointer-events:none)
           div.lg-cg-divider            (0.5px hairline)
           div.lg-cg-item               …
       div.lg-cg-ring                   (specular rim, NOT clipped)
   ============================================================ */

/* ── Outer positioning context ─── */

.lg-cg-outer {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* ── Glass surface ───────────────

   .lg-container (from LiquidGlassContainer) already provides:
     position: relative; overflow: hidden; isolation: isolate.

   We override display and border-radius here, and add the tint
   + blur that forms the glass appearance.

   overflow: hidden + border-radius: 999px clips the backdrop-filter
   to the pill shape — content outside the pill is not blurred. */

.lg-container.lg-cg-wrapper {
  border-radius: 999px;
  /* backdrop-filter on this element blurs content behind the pill.
     The overflow: hidden from .lg-container clips the blur to
     the pill shape so it doesn't leak outside the rounded edges. */
  backdrop-filter: blur(8px) saturate(1.35) brightness(1.02);
  -webkit-backdrop-filter: blur(8px) saturate(1.35) brightness(1.02);
  background: linear-gradient(
    135deg,
    rgba(30, 30, 35, 0.10),
    rgba(40, 40, 50, 0.06)
  );
}

/* ── Slot row ────────────────────── */

.lg-cg-slots {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

/* ── Individual action slot ─────────

   No background here — the shared glass surface behind provides
   the frosted appearance. Per-item hover/active states add a light
   translucent tint overlay so each slot responds individually. */

.lg-cg-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
}

.lg-cg-item--disabled {
  cursor: default;
  pointer-events: none;
}

/* Circular hover/active highlight — pseudo-element fills the square slot
   and border-radius:50% collapses it to a circle, matching the feel of
   an individual circular icon button. No background on the item itself
   so the rectangle is never filled. */
.lg-cg-item::before {
  content: '';
  position: absolute;
  inset: 4px; /* smaller visual circle; tap target stays full item size */
  border-radius: 50%;
  background: transparent;
  transition: background var(--duration-interaction-instant, 60ms) linear;
}

.lg-cg-item:hover:not(.lg-cg-item--disabled)::before {
  background: rgba(255, 255, 255, 0.07);
}

.lg-cg-item:active:not(.lg-cg-item--disabled)::before {
  background: rgba(0, 0, 0, 0.10);
}

/* ── Item content ───────────────── */

.lg-cg-item__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* clicks pass through to the item hit zone */
  color: var(--color-foreground-base);
  transition: opacity var(--duration-interaction-quick, 150ms) linear;
}

.lg-cg-item__content img,
.lg-cg-item__content svg {
  display: block;
  width: 13px;
  height: 13px;
}

.window--ios .lg-cg-item__content img,
.window--ios .lg-cg-item__content svg {
  width: 16px;
  height: 16px;
}

/* Disabled: opacity on content ONLY, never on the item or group wrapper.
   Opacity < 1 on any stacking-context ancestor traps backdrop-filter
   inside a GPU compositing group, preventing it from sampling content
   painted behind the glass surface (same root cause as the earlier
   LiquidGlassButton disabled compositing fix). */
.lg-cg-item--disabled .lg-cg-item__content {
  opacity: 0.38;
}

/* Active feedback through the content layer */
.lg-cg-item:active:not(.lg-cg-item--disabled) .lg-cg-item__content {
  opacity: 0.5;
}

/* ── Hairline divider between slots

   Two-stop gradient fades to transparent at both ends so the
   separator blends naturally into the pill cap curvature.
   Single face — the glass tint behind it creates sufficient
   depth without a two-tone shadow/highlight trick. */

.lg-cg-divider {
  width: 0.5px;
  flex-shrink: 0;
  align-self: stretch;
  margin: 6px 0;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.18) 25%,
    rgba(255, 255, 255, 0.18) 75%,
    transparent
  );
}

/* ── Specular ring ──────────────────

   Positioned outside .lg-container so it is NOT subject to
   overflow: hidden. The inset box-shadow paints inside the pill
   border, providing the top highlight and bottom shadow that give
   the group a pressable, physical quality.

   Uses the same CSS custom-property pattern as
   .liquid-glass-button--edge-specular for hover intensification. */

.lg-cg-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  --lg-cg-rim-top: 0.16;
  --lg-cg-rim-bottom: 0.06;
  --lg-cg-rim-edge: 0.08;
  box-shadow:
    inset 0 1.2px 1.2px rgba(255, 255, 255, var(--lg-cg-rim-top)),
    inset 0 -0.7px 0.7px rgba(255, 255, 255, var(--lg-cg-rim-bottom)),
    inset 0 0 0 0.5px rgba(255, 255, 255, var(--lg-cg-rim-edge));
}

/* Flat edge variant — plain hairline instead of specular highlights */
.lg-cg-ring--flat {
  --lg-cg-rim-top: 0;
  --lg-cg-rim-bottom: 0;
  --lg-cg-rim-edge: 0.075;
}

/* Subtly intensify the ring when any slot is hovered or focused */
.lg-cg-outer:hover .lg-cg-ring,
.lg-cg-outer:focus-within .lg-cg-ring {
  --lg-cg-rim-top: 0.20;
  --lg-cg-rim-bottom: 0.08;
  --lg-cg-rim-edge: 0.10;
}