/*
 * Elevated wrapper chrome for controls whose opaque child surface can cover
 * the inset highlight in a combined `--effect-elevation-*` box shadow.
 *
 * Import `@ds-mo/ui/control-elevation.css`, apply `.ds-control-elevation`, and
 * select one level modifier. Add `--press-scale` when the wrapper contains an
 * approved press-scaling button so its surface and elevation move as one unit.
 * The owner still supplies layout, radius, surface, and any backdrop blur.
 * Keep wrapped controls' optional resting borders off.
 *
 * Both `:host(.ds-control-elevation)` and `.ds-control-elevation` are listed so
 * Stencil scoped components work whether the class sits on the host (a component
 * that is itself the elevated surface) or on an inner wrapper. Scoped builds
 * suffix host and child classes differently, so a plain class alone silently
 * misses the host.
 */

:host(.ds-control-elevation),
.ds-control-elevation {
  position: relative;
  overflow: visible;
  box-shadow: var(--ds-control-elevation-shadow, none);
}

:host(.ds-control-elevation)::after,
.ds-control-elevation::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Topmost local chrome: above selected, focus, error, hover, and press strokes. */
  z-index: 4;
  border-radius: inherit;
  box-shadow: var(--ds-control-elevation-highlight, none);
  pointer-events: none;
}

:host(.ds-control-elevation--sm),
.ds-control-elevation--sm {
  --ds-control-elevation-shadow: var(--effect-shadow-elevated-sm);
  --ds-control-elevation-highlight: var(--effect-highlight-elevated-sm);
}

:host(.ds-control-elevation--md),
.ds-control-elevation--md {
  --ds-control-elevation-shadow: var(--effect-shadow-elevated-md);
  --ds-control-elevation-highlight: var(--effect-highlight-elevated-md);
}

:host(.ds-control-elevation--floating),
.ds-control-elevation--floating {
  --ds-control-elevation-shadow: var(--effect-shadow-elevated-floating);
  --ds-control-elevation-highlight: var(--effect-highlight-elevated-floating);
}

/*
 * Transfer an approved button's physical press feedback to the elevated
 * wrapper. The inherited override keeps the nested native button at rest so
 * the wrapper and control do not compound their scale.
 */
.ds-control-elevation--press-scale {
  --ds-control-press-active-scale: var(--dimension-scale-default);

  transition: scale var(--effect-motion-short-2);
}

.ds-control-elevation--press-scale[data-ds-press-active] {
  scale: var(--dimension-scale-subtle);
}

@media (prefers-reduced-motion: reduce) {
  .ds-control-elevation--press-scale,
  .ds-control-elevation--press-scale[data-ds-press-active] {
    scale: none;
    transition: none;
  }
}