/*
 * Minimal shared shadow-root reset, prepended once to the bundled
 * `ds.css` every component links to (see `scripts/build-ds-css.mjs` in
 * src). The design-system skill requires a single global reset
 * (`global.css`), but that is light-DOM only and cannot reach into a
 * shadow root. This is the shadow-DOM equivalent: box-sizing plus a
 * token-driven focus ring.
 *
 * Focus-ring color on inverse surfaces is not handled with `:host-context`
 * here: `ds-section[data-surface="inverse"]` re-points the
 * `--elvaio-color-focus` custom property for its whole subtree, and every
 * component (light or shadow DOM) that reads that token for its focus ring
 * inherits the override automatically, because custom properties inherit
 * through shadow boundaries.
 */
:host {
  box-sizing: border-box;
}

:host *,
:host *::before,
:host *::after {
  box-sizing: border-box;
}

:host(:focus-visible) {
  outline: var(--elvaio-focus-width) solid var(--elvaio-color-focus);
  outline-offset: 2px;
  border-radius: var(--elvaio-radius-field);
}


/* Size lives on the host, not the inner `<svg>`: a parent that resizes this
   element from outside (`ds-seal`'s `.mark ::slotted(*) { width: 60%;
   height: 60% }`, the only such case today) can only ever reach the host
   — `::slotted()` can't select past it into the shadow root. The `<svg>`
   filling the host at 100% is what lets that external resize actually
   change the rendered icon's size, instead of the icon staying pinned to
   its own fixed rem size regardless and drifting off-center inside
   whatever box it was squeezed into (the seal's mark icon not lining up
   consistently across the seal's own fluid/clamped sizes). */
:host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: 0;
  width: 1rem;
  height: 1rem;
}

:host([size='medium']) {
  width: 1.25rem;
  height: 1.25rem;
}

:host([size='large']) {
  width: 2rem;
  height: 2rem;
}

.icon {
  display: block;
  width: 100%;
  height: 100%;
}