/*
 * 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);
}


:host {
  display: block;
  overflow: hidden;
}

.pattern {
  display: block;
  width: 100%;
  height: var(--elvaio-space-07);
  background: currentColor;
  mask-repeat: repeat-x;
  mask-position: left center;
  mask-size: auto 100%;
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: left center;
  -webkit-mask-size: auto 100%;
}

:host([pattern='wave-elvaio']) .pattern {
  mask-image: url('/waves/wave-elvaio.svg');
  -webkit-mask-image: url('/waves/wave-elvaio.svg');
}

:host([pattern='wave-elvaio-wide']) .pattern {
  mask-image: url('/waves/wave-elvaio-wide.svg');
  -webkit-mask-image: url('/waves/wave-elvaio-wide.svg');
}

:host([pattern='wave-ai-training']) .pattern {
  mask-image: url('/waves/wave-ai-training.svg');
  -webkit-mask-image: url('/waves/wave-ai-training.svg');
}

.small {
  height: var(--elvaio-space-05);
}

.medium {
  height: var(--elvaio-space-07);
}

.large {
  height: var(--elvaio-space-09);
}

.extra-large {
  height: var(--elvaio-space-10);
}

.accent {
  color: var(--elvaio-color-accent);
}

.inverse {
  color: var(--elvaio-color-text-inverse);
}

.neutral {
  color: var(--elvaio-color-text);
}

:host([subtle]) .pattern {
  opacity: 0.45;
}