/* Generated by scripts/build.mjs. Do not edit. */
@theme inline {
  --color-*: initial;
  --radius-*: initial;
  --ease-*: initial;
  --shadow-*: initial;
  --max-width-3xs: var(--container-3xs);
  --max-width-2xs: var(--container-2xs);
  --max-width-xs: var(--container-xs);
  --max-width-sm: var(--container-sm);
  --max-width-md: var(--container-md);
  --max-width-lg: var(--container-lg);
  --max-width-xl: var(--container-xl);
  --max-width-2xl: var(--container-2xl);
  --max-width-3xl: var(--container-3xl);
  --max-width-4xl: var(--container-4xl);
  --max-width-5xl: var(--container-5xl);
  --max-width-6xl: var(--container-6xl);
  --max-width-7xl: var(--container-7xl);
  --color-surface-default: var(--bigbang-color-surface-default);
  --color-surface-layer-1: var(--bigbang-color-surface-layer-1);
  --color-surface-layer-2: var(--bigbang-color-surface-layer-2);
  --color-surface-layer-3: var(--bigbang-color-surface-layer-3);
  --color-surface-raised: var(--bigbang-color-surface-raised);
  --color-surface-sunken: var(--bigbang-color-surface-sunken);
  --color-surface-hovered: var(--bigbang-color-surface-hovered);
  --color-surface-selected: var(--bigbang-color-surface-selected);
  --color-surface-disabled: var(--bigbang-color-surface-disabled);
  --color-surface-inverse: var(--bigbang-color-surface-inverse);
  --color-surface-brand: var(--bigbang-color-surface-brand);
  --color-surface-translucent: var(--bigbang-color-surface-translucent);
  --color-surface-checker: var(--bigbang-color-surface-checker);
  --color-surface-scrim: var(--bigbang-color-surface-scrim);
  --color-fg-default: var(--bigbang-color-text-default);
  --color-fg-subtle: var(--bigbang-color-text-subtle);
  --color-fg-subtlest: var(--bigbang-color-text-subtlest);
  --color-fg-placeholder: var(--bigbang-color-text-placeholder);
  --color-fg-disabled: var(--bigbang-color-text-disabled);
  --color-fg-inverse: var(--bigbang-color-text-inverse);
  --color-fg-on-brand: var(--bigbang-color-text-on-brand);
  --color-fg-link: var(--bigbang-color-text-link);
  --color-fg-link-hovered: var(--bigbang-color-text-link-hovered);
  --color-fg-danger: var(--bigbang-color-text-danger);
  --color-fg-success: var(--bigbang-color-text-success);
  --color-fg-warning: var(--bigbang-color-text-warning);
  --color-fg-info: var(--bigbang-color-text-info);
  --color-icon-default: var(--bigbang-color-icon-default);
  --color-icon-subtle: var(--bigbang-color-icon-subtle);
  --color-icon-disabled: var(--bigbang-color-icon-disabled);
  --color-icon-inverse: var(--bigbang-color-icon-inverse);
  --color-icon-brand: var(--bigbang-color-icon-brand);
  --color-icon-danger: var(--bigbang-color-icon-danger);
  --color-icon-success: var(--bigbang-color-icon-success);
  --color-icon-warning: var(--bigbang-color-icon-warning);
  --color-icon-info: var(--bigbang-color-icon-info);
  --color-line-default: var(--bigbang-color-border-default);
  --color-line-subtle: var(--bigbang-color-border-subtle);
  --color-line-strong: var(--bigbang-color-border-strong);
  --color-line-input: var(--bigbang-color-border-input);
  --color-line-focus: var(--bigbang-color-border-focus);
  --color-line-selected: var(--bigbang-color-border-selected);
  --color-line-danger: var(--bigbang-color-border-danger);
  --color-line-disabled: var(--bigbang-color-border-disabled);
  --color-line-overlay: var(--bigbang-color-border-overlay);
  --color-focus-ring: var(--bigbang-color-focus-ring);
  --color-action-primary-default: var(--bigbang-color-action-primary-default);
  --color-action-primary-hovered: var(--bigbang-color-action-primary-hovered);
  --color-action-primary-pressed: var(--bigbang-color-action-primary-pressed);
  --color-action-on-primary-default: var(--bigbang-color-action-on-primary-default);
  --color-action-secondary-default: var(--bigbang-color-action-secondary-default);
  --color-action-secondary-hovered: var(--bigbang-color-action-secondary-hovered);
  --color-action-secondary-pressed: var(--bigbang-color-action-secondary-pressed);
  --color-action-on-secondary-default: var(--bigbang-color-action-on-secondary-default);
  --color-action-subtle-hovered: var(--bigbang-color-action-subtle-hovered);
  --color-action-subtle-pressed: var(--bigbang-color-action-subtle-pressed);
  --color-action-danger-default: var(--bigbang-color-action-danger-default);
  --color-action-danger-hovered: var(--bigbang-color-action-danger-hovered);
  --color-action-danger-pressed: var(--bigbang-color-action-danger-pressed);
  --color-action-danger-subtle-hovered: var(--bigbang-color-action-danger-subtle-hovered);
  --color-action-danger-subtle-pressed: var(--bigbang-color-action-danger-subtle-pressed);
  --color-action-on-danger-subtle-default: var(--bigbang-color-action-on-danger-subtle-default);
  --color-action-on-danger-default: var(--bigbang-color-action-on-danger-default);
  --color-action-disabled-default: var(--bigbang-color-action-disabled-default);
  --color-action-on-disabled-default: var(--bigbang-color-action-on-disabled-default);
  --color-status-neutral-background: var(--bigbang-color-status-neutral-background);
  --color-status-neutral-foreground: var(--bigbang-color-status-neutral-foreground);
  --color-status-neutral-emphasis: var(--bigbang-color-status-neutral-emphasis);
  --color-status-neutral-border: var(--bigbang-color-status-neutral-border);
  --color-status-neutral-on-emphasis: var(--bigbang-color-status-neutral-on-emphasis);
  --color-status-brand-background: var(--bigbang-color-status-brand-background);
  --color-status-brand-foreground: var(--bigbang-color-status-brand-foreground);
  --color-status-brand-emphasis: var(--bigbang-color-status-brand-emphasis);
  --color-status-brand-border: var(--bigbang-color-status-brand-border);
  --color-status-brand-on-emphasis: var(--bigbang-color-status-brand-on-emphasis);
  --color-status-info-background: var(--bigbang-color-status-info-background);
  --color-status-info-foreground: var(--bigbang-color-status-info-foreground);
  --color-status-info-emphasis: var(--bigbang-color-status-info-emphasis);
  --color-status-info-border: var(--bigbang-color-status-info-border);
  --color-status-info-on-emphasis: var(--bigbang-color-status-info-on-emphasis);
  --color-status-success-background: var(--bigbang-color-status-success-background);
  --color-status-success-foreground: var(--bigbang-color-status-success-foreground);
  --color-status-success-emphasis: var(--bigbang-color-status-success-emphasis);
  --color-status-success-border: var(--bigbang-color-status-success-border);
  --color-status-success-on-emphasis: var(--bigbang-color-status-success-on-emphasis);
  --color-status-warning-background: var(--bigbang-color-status-warning-background);
  --color-status-warning-foreground: var(--bigbang-color-status-warning-foreground);
  --color-status-warning-emphasis: var(--bigbang-color-status-warning-emphasis);
  --color-status-warning-border: var(--bigbang-color-status-warning-border);
  --color-status-warning-on-emphasis: var(--bigbang-color-status-warning-on-emphasis);
  --color-status-danger-background: var(--bigbang-color-status-danger-background);
  --color-status-danger-foreground: var(--bigbang-color-status-danger-foreground);
  --color-status-danger-emphasis: var(--bigbang-color-status-danger-emphasis);
  --color-status-danger-border: var(--bigbang-color-status-danger-border);
  --color-status-danger-on-emphasis: var(--bigbang-color-status-danger-on-emphasis);
  --color-data-positive: var(--bigbang-color-data-positive);
  --color-data-negative: var(--bigbang-color-data-negative);
  --color-illustration-ink: var(--bigbang-color-illustration-ink);
  --color-illustration-surface: var(--bigbang-color-illustration-surface);
  --color-illustration-neutral-1: var(--bigbang-color-illustration-neutral-1);
  --color-illustration-neutral-2: var(--bigbang-color-illustration-neutral-2);
  --color-illustration-neutral-3: var(--bigbang-color-illustration-neutral-3);
  --color-illustration-primary-strong: var(--bigbang-color-illustration-primary-strong);
  --color-illustration-primary: var(--bigbang-color-illustration-primary);
  --color-illustration-primary-soft: var(--bigbang-color-illustration-primary-soft);
  --color-illustration-accent: var(--bigbang-color-illustration-accent);
  --color-illustration-accent-soft: var(--bigbang-color-illustration-accent-soft);
  --color-illustration-backdrop: var(--bigbang-color-illustration-backdrop);
  --color-illustration-success: var(--bigbang-color-illustration-success);
  --color-illustration-warning: var(--bigbang-color-illustration-warning);
  --color-illustration-danger: var(--bigbang-color-illustration-danger);
  --color-chart-categorical-1: var(--bigbang-color-chart-categorical-1);
  --color-chart-categorical-2: var(--bigbang-color-chart-categorical-2);
  --color-chart-categorical-3: var(--bigbang-color-chart-categorical-3);
  --color-chart-categorical-4: var(--bigbang-color-chart-categorical-4);
  --color-chart-categorical-5: var(--bigbang-color-chart-categorical-5);
  --color-chart-categorical-6: var(--bigbang-color-chart-categorical-6);
  --color-chart-categorical-7: var(--bigbang-color-chart-categorical-7);
  --color-chart-categorical-8: var(--bigbang-color-chart-categorical-8);
  --color-chart-soft-1: var(--bigbang-color-chart-soft-1);
  --color-chart-soft-2: var(--bigbang-color-chart-soft-2);
  --color-chart-soft-3: var(--bigbang-color-chart-soft-3);
  --color-chart-soft-4: var(--bigbang-color-chart-soft-4);
  --color-chart-soft-5: var(--bigbang-color-chart-soft-5);
  --color-chart-soft-6: var(--bigbang-color-chart-soft-6);
  --color-chart-soft-7: var(--bigbang-color-chart-soft-7);
  --color-chart-soft-8: var(--bigbang-color-chart-soft-8);
  --color-chart-grid: var(--bigbang-color-chart-grid);
  --color-chart-axis: var(--bigbang-color-chart-axis);
  --color-chart-cursor: var(--bigbang-color-chart-cursor);
  --color-tag-red-background: var(--bigbang-color-tag-red-background);
  --color-tag-red-foreground: var(--bigbang-color-tag-red-foreground);
  --color-tag-red-border: var(--bigbang-color-tag-red-border);
  --color-tag-orange-background: var(--bigbang-color-tag-orange-background);
  --color-tag-orange-foreground: var(--bigbang-color-tag-orange-foreground);
  --color-tag-orange-border: var(--bigbang-color-tag-orange-border);
  --color-tag-green-background: var(--bigbang-color-tag-green-background);
  --color-tag-green-foreground: var(--bigbang-color-tag-green-foreground);
  --color-tag-green-border: var(--bigbang-color-tag-green-border);
  --color-tag-blue-background: var(--bigbang-color-tag-blue-background);
  --color-tag-blue-foreground: var(--bigbang-color-tag-blue-foreground);
  --color-tag-blue-border: var(--bigbang-color-tag-blue-border);
  --color-tag-violet-background: var(--bigbang-color-tag-violet-background);
  --color-tag-violet-foreground: var(--bigbang-color-tag-violet-foreground);
  --color-tag-violet-border: var(--bigbang-color-tag-violet-border);
  --color-tag-teal-background: var(--bigbang-color-tag-teal-background);
  --color-tag-teal-foreground: var(--bigbang-color-tag-teal-foreground);
  --color-tag-teal-border: var(--bigbang-color-tag-teal-border);
  --color-tag-pink-background: var(--bigbang-color-tag-pink-background);
  --color-tag-pink-foreground: var(--bigbang-color-tag-pink-foreground);
  --color-tag-pink-border: var(--bigbang-color-tag-pink-border);
  --color-material-glass-regular: var(--bigbang-color-material-glass-regular);
  --color-material-glass-regular-contrast: var(--bigbang-color-material-glass-regular-contrast);
  --color-material-glass-clear: var(--bigbang-color-material-glass-clear);
  --color-material-glass-dim: var(--bigbang-color-material-glass-dim);
  --color-material-glass-rim: var(--bigbang-color-material-glass-rim);
  --color-material-glass-edge: var(--bigbang-color-material-glass-edge);
  --color-material-glass-shade: var(--bigbang-color-material-glass-shade);
  --color-material-glass-specular: var(--bigbang-color-material-glass-specular);
  --spacing-none: var(--bigbang-space-none);
  --spacing-xxs: var(--bigbang-space-xxs);
  --spacing-xs: var(--bigbang-space-xs);
  --spacing-sm: var(--bigbang-space-sm);
  --spacing-md: var(--bigbang-space-md);
  --spacing-lg: var(--bigbang-space-lg);
  --spacing-xl: var(--bigbang-space-xl);
  --spacing-2xl: var(--bigbang-space-2xl);
  --spacing-3xl: var(--bigbang-space-3xl);
  --spacing-4xl: var(--bigbang-space-4xl);
  --spacing-5xl: var(--bigbang-space-5xl);
  --spacing-6xl: var(--bigbang-space-6xl);
  --spacing-7xl: var(--bigbang-space-7xl);
  --radius-none: var(--bigbang-radius-none);
  --radius-base: var(--bigbang-radius-base);
  --radius-2xs: var(--bigbang-radius-2xs);
  --radius-xs: var(--bigbang-radius-xs);
  --radius-sm: var(--bigbang-radius-sm);
  --radius-md: var(--bigbang-radius-md);
  --radius-lg: var(--bigbang-radius-lg);
  --radius-xl: var(--bigbang-radius-xl);
  --radius-2xl: var(--bigbang-radius-2xl);
  --radius-3xl: var(--bigbang-radius-3xl);
  --radius-full: var(--bigbang-radius-full);
  --ease-productive: var(--bigbang-easing-productive);
  --ease-expressive: var(--bigbang-easing-expressive);
  --ease-exit: var(--bigbang-easing-exit);
  --ease-productive-enter: var(--bigbang-easing-productive-enter);
  --ease-productive-exit: var(--bigbang-easing-productive-exit);
  --ease-expressive-enter: var(--bigbang-easing-expressive-enter);
  --ease-expressive-exit: var(--bigbang-easing-expressive-exit);
  --ease-linear: var(--bigbang-easing-linear);
  --ease-spring-productive-fast: var(--bigbang-easing-spring-productive-fast);
  --ease-spring-productive-base: var(--bigbang-easing-spring-productive-base);
  --ease-spring-productive-slow: var(--bigbang-easing-spring-productive-slow);
  --ease-spring-expressive-base: var(--bigbang-easing-spring-expressive-base);
  --shadow-xs: var(--bigbang-shadow-xs);
  --shadow-raised: var(--bigbang-shadow-raised);
  --shadow-overlay: var(--bigbang-shadow-overlay);
  --shadow-popup: var(--bigbang-shadow-popup);
  --shadow-panel: var(--bigbang-shadow-panel);
  --shadow-glass: var(--bigbang-shadow-glass);
  --animate-shimmer: bigbang-shimmer var(--bigbang-period-shimmer) var(--bigbang-easing-linear) 3;
  --animate-indeterminate: bigbang-indeterminate var(--bigbang-period-indeterminate) var(--bigbang-easing-linear) infinite;
  --animate-caret-blink: bigbang-caret-blink var(--bigbang-period-caret-blink) var(--bigbang-easing-linear) 5;
  @keyframes bigbang-shimmer {
    from { translate: -100% 0; }
    to { translate: 100% 0; }
  }
  @keyframes bigbang-caret-blink {
    0%, 70%, 100% { opacity: 1; }
    20%, 50% { opacity: 0; }
  }
  @keyframes bigbang-indeterminate {
    from { translate: -100% 0; }
    to { translate: 250% 0; }
  }
}

@custom-variant reduce-motion {
  @media (prefers-reduced-motion: reduce) {
    @slot;
  }
  &:where([data-motion="reduce"], [data-motion="reduce"] *) {
    @slot;
  }
}

@utility type-display {
  font: var(--bigbang-text-display);
  letter-spacing: var(--bigbang-letter-spacing-display);
  text-wrap: balance;
}

@utility type-heading-xl {
  font: var(--bigbang-text-heading-xl);
  letter-spacing: var(--bigbang-letter-spacing-heading-xl);
  text-wrap: balance;
}

@utility type-heading-lg {
  font: var(--bigbang-text-heading-lg);
  letter-spacing: var(--bigbang-letter-spacing-heading-lg);
  text-wrap: balance;
}

@utility type-heading-md {
  font: var(--bigbang-text-heading-md);
  letter-spacing: var(--bigbang-letter-spacing-heading-md);
  text-wrap: balance;
}

@utility type-heading-sm {
  font: var(--bigbang-text-heading-sm);
  letter-spacing: var(--bigbang-letter-spacing-heading-sm);
  text-wrap: balance;
}

@utility type-title-sm {
  font: var(--bigbang-text-title-sm);
}

@utility type-body-lg {
  font: var(--bigbang-text-body-lg);
}

@utility type-body-md {
  font: var(--bigbang-text-body-md);
}

@utility type-body-sm {
  font: var(--bigbang-text-body-sm);
}

@utility type-label-lg {
  font: var(--bigbang-text-label-lg);
}

@utility type-label-md {
  font: var(--bigbang-text-label-md);
}

@utility type-label-sm {
  font: var(--bigbang-text-label-sm);
}

@utility type-code-md {
  font: var(--bigbang-text-code-md);
}

@utility focus-outline {
  outline: var(--bigbang-border-width-focus) solid var(--bigbang-color-focus-ring);
  outline-offset: var(--bigbang-focus-offset);
}

@utility focus-outline-inset {
  outline: var(--bigbang-border-width-focus) solid var(--bigbang-color-focus-ring);
  outline-offset: calc(var(--bigbang-border-width-focus) * -1);
}

@custom-variant glass {
  &:where([data-material="glass"], [data-material="glass"] *):not([data-material="solid"], [data-material="solid"] *, [data-material-pref="solid"], [data-material-pref="solid"] *) {
    @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
      @media not all and (prefers-contrast: more) {
        @media not all and (forced-colors: active) {
          @slot;
        }
      }
    }
  }
}

/* Regular glass: tinted, blurred and saturated backdrop, rim light, lower shade, hairline, soft shadow
   and a top-lit specular highlight in the background layers, so no pseudo-element or positioning is
   needed. --glass-tint, --glass-dim, --glass-blur and --glass-specular are set by the modifiers below. */
@utility material-glass {
  --glass-filter: var(--glass-refract,) blur(var(--glass-blur, var(--bigbang-blur-surface-glass))) saturate(var(--bigbang-material-glass-saturate)) brightness(var(--bigbang-material-glass-brightness));
  background-color: var(--glass-dim, transparent);
  background-image:
    radial-gradient(120% 70% at 50% -20%, var(--glass-specular, var(--bigbang-color-material-glass-specular)), transparent 60%),
    linear-gradient(var(--glass-tint, var(--bigbang-color-material-glass-regular)), var(--glass-tint, var(--bigbang-color-material-glass-regular)));
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow:
    inset 0 var(--bigbang-border-width-default) 0 0 var(--bigbang-color-material-glass-rim),
    inset 0 calc(var(--bigbang-border-width-default) * -1) 0 0 var(--bigbang-color-material-glass-shade),
    inset 0 0 0 var(--bigbang-border-width-default) var(--bigbang-color-material-glass-edge),
    var(--bigbang-shadow-glass);

  /* Edge refraction where SVG references in backdrop-filter render; the Provider marks those engines. */
  &:where([data-refract], [data-refract] *) {
    --glass-refract: url(#bb-glass-refract);
  }

  /* Glass never stacks on glass: a nested glass part becomes a plain layer (HIG). */
  & :where([data-material="glass"]) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
  }

  /* Reduced transparency and slow displays: the solid raised surface. Safari has no
     prefers-reduced-transparency; data-material-pref="solid" is the in-app switch for it. */
  @media (prefers-reduced-transparency: reduce), (update: slow) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--bigbang-color-surface-raised);
    background-image: none;
  }
}

/* Denser tint for short confirm dialogs. */
@utility material-glass-contrast {
  --glass-tint: var(--bigbang-color-material-glass-regular-contrast);
}

/* Clear glass for icon-only controls over media: a dimming layer under a light tint and less blur. */
@utility material-glass-clear {
  --glass-tint: var(--bigbang-color-material-glass-clear);
  --glass-dim: var(--bigbang-color-material-glass-dim);
  --glass-blur: var(--bigbang-blur-surface-glass-clear);
}

/* Prominent glass: the primary action colour as the tint. The specular highlight is left out: white over
   the primary colour would wash out the label. */
@utility material-glass-prominent {
  --glass-specular: transparent;
  --glass-tint: color-mix(in srgb, var(--bigbang-color-action-primary-default) var(--bigbang-material-glass-prominent-tint), transparent);
}

@utility material-glass-refract {
  --glass-refract: url(#bb-glass-refract);
}

/* Pressed glass controls swell and light up at the centre; colour changes stay on the state layer. */
@utility material-glass-interactive {
  transition: scale var(--bigbang-motion-release-duration) var(--bigbang-easing-spring-productive-fast);

  &:active {
    scale: var(--bigbang-motion-glass-press-scale);
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--glass-x, 50%) var(--glass-y, 50%), var(--glass-specular, var(--bigbang-color-material-glass-specular)), transparent 55%);
    transition: opacity var(--bigbang-motion-hover-duration) var(--bigbang-motion-hover-easing);
  }

  &:active::after {
    opacity: 1;
  }

  /* Reduced motion: no swell (the scale token resolves to 1) and no moving highlight. */
  @media (prefers-reduced-motion: reduce) {
    transition: none;

    &::after {
      display: none;
    }
  }

  &:where([data-motion="reduce"] *) {
    transition: none;

    &::after {
      display: none;
    }
  }
}

/* Scroll edge effect: a layer just under a glass bar that blurs the content scrolling beneath it and
   fades out, in place of a hard divider. It is a sibling of the bar's glass layer, not a child of an
   element with a backdrop filter, because such an element limits what its children can blur. */
@utility material-glass-scroll-edge {
  height: var(--bigbang-material-glass-scroll-edge);
  -webkit-backdrop-filter: blur(var(--bigbang-blur-surface-glass));
  backdrop-filter: blur(var(--bigbang-blur-surface-glass));
  mask-image: linear-gradient(to bottom, black, transparent);

  @media (prefers-reduced-transparency: reduce), (update: slow) {
    display: none;
  }
}