@universal-material/web/css/universal-material.css

Material web components

:root {
  --u-state-layer-color: currentColor;
  --u-state-layer-hover-opacity: 8%;
  --u-state-layer-focus-opacity: 12%;
  --u-state-layer-pressed-opacity: 12%;
  --u-state-layer-dragged-opacity: 16%;
  --u-high-emphasis-opacity: 100%;
  --u-low-emphasis-opacity: 75%;
  --u-lower-emphasis-opacity: 50%;
  --u-color-body: var(--u-color-surface, rgb(254, 247, 255));
  --u-color-on-body: var(--u-color-on-surface, rgb(29, 27, 32));
  --u-font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --u-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  --u-current-text-color: var(--u-color-on-body);
  --u-text-opacity: var(--u-high-emphasis-opacity);
  --u-layout-margin: var(--u-layout-margin-default);
  --u-layout-gutter: var(--u-layout-gutter-default);
  --u-layout-margin-default: var(--u-spacing-medium);
  --u-layout-gutter-default: var(--u-spacing-medium);
  --u-font-weight-thin: 100;
  --u-font-weight-light: 300;
  --u-font-weight-regular: 400;
  --u-font-weight-medium: 500;
  --u-font-weight-bold: 700;
  --u-font-weight-bolder: 900;
  --u-spacing-0: 0;
  --u-spacing-extra-small: 4px;
  --u-spacing-small: 8px;
  --u-spacing-medium: 16px;
  --u-spacing-large: 24px;
  --u-spacing-extra-large: 40px;
  --u-shape-corner-none: 0;
  --u-shape-corner-extra-small: 4px;
  --u-shape-corner-small: 8px;
  --u-shape-corner-medium: 12px;
  --u-shape-corner-large: 16px;
  --u-shape-corner-extra-large: 28px;
  --u-shape-corner-full: 9999px;
}

@media (min-width: 600px) {
  :root {
    --u-layout-margin-default: var(--u-spacing-large);
    --u-layout-gutter-default: var(--u-spacing-large);
  }
}
.u-text-bg-primary {
  --u-current-text-color: var(--u-color-on-primary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-primary) !important;
}

.u-text-bg-inverse-primary {
  --u-current-text-color: var(--u-color-on-inverse-primary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-primary) !important;
}

.u-bg-primary {
  background-color: var(--u-color-primary) !important;
}

.u-bg-inverse-primary {
  background-color: var(--u-color-inverse-primary) !important;
}

.u-text-bg-primary-container {
  --u-current-text-color: var(--u-color-on-primary-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-primary-container) !important;
}

.u-text-bg-inverse-primary-container {
  --u-current-text-color: var(--u-color-on-inverse-primary-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-primary-container) !important;
}

.u-bg-primary-container {
  background-color: var(--u-color-primary-container) !important;
}

.u-bg-inverse-primary-container {
  background-color: var(--u-color-inverse-primary-container) !important;
}

.u-text-bg-secondary {
  --u-current-text-color: var(--u-color-on-secondary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-secondary) !important;
}

.u-text-bg-inverse-secondary {
  --u-current-text-color: var(--u-color-on-inverse-secondary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-secondary) !important;
}

.u-bg-secondary {
  background-color: var(--u-color-secondary) !important;
}

.u-bg-inverse-secondary {
  background-color: var(--u-color-inverse-secondary) !important;
}

.u-text-bg-secondary-container {
  --u-current-text-color: var(--u-color-on-secondary-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-secondary-container) !important;
}

.u-text-bg-inverse-secondary-container {
  --u-current-text-color: var(--u-color-on-inverse-secondary-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-secondary-container) !important;
}

.u-bg-secondary-container {
  background-color: var(--u-color-secondary-container) !important;
}

.u-bg-inverse-secondary-container {
  background-color: var(--u-color-inverse-secondary-container) !important;
}

.u-text-bg-tertiary {
  --u-current-text-color: var(--u-color-on-tertiary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-tertiary) !important;
}

.u-text-bg-inverse-tertiary {
  --u-current-text-color: var(--u-color-on-inverse-tertiary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-tertiary) !important;
}

.u-bg-tertiary {
  background-color: var(--u-color-tertiary) !important;
}

.u-bg-inverse-tertiary {
  background-color: var(--u-color-inverse-tertiary) !important;
}

.u-text-bg-tertiary-container {
  --u-current-text-color: var(--u-color-on-tertiary-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-tertiary-container) !important;
}

.u-text-bg-inverse-tertiary-container {
  --u-current-text-color: var(--u-color-on-inverse-tertiary-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-tertiary-container) !important;
}

.u-bg-tertiary-container {
  background-color: var(--u-color-tertiary-container) !important;
}

.u-bg-inverse-tertiary-container {
  background-color: var(--u-color-inverse-tertiary-container) !important;
}

.u-text-bg-error {
  --u-current-text-color: var(--u-color-on-error) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-error) !important;
}

.u-text-bg-inverse-error {
  --u-current-text-color: var(--u-color-on-inverse-error) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-error) !important;
}

.u-bg-error {
  background-color: var(--u-color-error) !important;
}

.u-bg-inverse-error {
  background-color: var(--u-color-inverse-error) !important;
}

.u-text-bg-error-container {
  --u-current-text-color: var(--u-color-on-error-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-error-container) !important;
}

.u-text-bg-inverse-error-container {
  --u-current-text-color: var(--u-color-on-inverse-error-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-error-container) !important;
}

.u-bg-error-container {
  background-color: var(--u-color-error-container) !important;
}

.u-bg-inverse-error-container {
  background-color: var(--u-color-inverse-error-container) !important;
}

.u-text-bg-surface {
  --u-current-text-color: var(--u-color-on-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-surface) !important;
}

.u-text-bg-inverse-surface {
  --u-current-text-color: var(--u-color-on-inverse-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-surface) !important;
}

.u-bg-surface {
  background-color: var(--u-color-surface) !important;
}

.u-bg-inverse-surface {
  background-color: var(--u-color-inverse-surface) !important;
}

.u-text-bg-surface-variant {
  --u-current-text-color: var(--u-color-on-surface-variant) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-surface-variant) !important;
}

.u-text-bg-inverse-surface-variant {
  --u-current-text-color: var(--u-color-on-inverse-surface-variant) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-surface-variant) !important;
}

.u-bg-surface-variant {
  background-color: var(--u-color-surface-variant) !important;
}

.u-bg-inverse-surface-variant {
  background-color: var(--u-color-inverse-surface-variant) !important;
}

.u-text-bg-surface-container {
  --u-current-text-color: var(--u-color-on-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-surface-container) !important;
}

.u-text-bg-inverse-surface-container {
  --u-current-text-color: var(--u-color-on-inverse-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-surface-container) !important;
}

.u-bg-surface-container {
  background-color: var(--u-color-surface-container) !important;
}

.u-bg-inverse-surface-container {
  background-color: var(--u-color-inverse-surface-container) !important;
}

.u-text-bg-surface-container-highest {
  --u-current-text-color: var(--u-color-on-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-surface-container-highest) !important;
}

.u-text-bg-inverse-surface-container-highest {
  --u-current-text-color: var(--u-color-on-inverse-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-surface-container-highest) !important;
}

.u-bg-surface-container-highest {
  background-color: var(--u-color-surface-container-highest) !important;
}

.u-bg-inverse-surface-container-highest {
  background-color: var(--u-color-inverse-surface-container-highest) !important;
}

.u-text-bg-surface-container-high {
  --u-current-text-color: var(--u-color-on-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-surface-container-high) !important;
}

.u-text-bg-inverse-surface-container-high {
  --u-current-text-color: var(--u-color-on-inverse-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-surface-container-high) !important;
}

.u-bg-surface-container-high {
  background-color: var(--u-color-surface-container-high) !important;
}

.u-bg-inverse-surface-container-high {
  background-color: var(--u-color-inverse-surface-container-high) !important;
}

.u-text-bg-surface-container-low {
  --u-current-text-color: var(--u-color-on-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-surface-container-low) !important;
}

.u-text-bg-inverse-surface-container-low {
  --u-current-text-color: var(--u-color-on-inverse-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-surface-container-low) !important;
}

.u-bg-surface-container-low {
  background-color: var(--u-color-surface-container-low) !important;
}

.u-bg-inverse-surface-container-low {
  background-color: var(--u-color-inverse-surface-container-low) !important;
}

.u-text-bg-surface-container-lowest {
  --u-current-text-color: var(--u-color-on-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-surface-container-lowest) !important;
}

.u-text-bg-inverse-surface-container-lowest {
  --u-current-text-color: var(--u-color-on-inverse-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-surface-container-lowest) !important;
}

.u-bg-surface-container-lowest {
  background-color: var(--u-color-surface-container-lowest) !important;
}

.u-bg-inverse-surface-container-lowest {
  background-color: var(--u-color-inverse-surface-container-lowest) !important;
}

.u-text-bg-success {
  --u-current-text-color: var(--u-color-on-success) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-success) !important;
}

.u-text-bg-success-container {
  --u-current-text-color: var(--u-color-on-success-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-success-container) !important;
}

.u-bg-success {
  background-color: var(--u-color-success) !important;
}

.u-bg-success-container {
  background-color: var(--u-color-success-container) !important;
}

.u-text-bg-info {
  --u-current-text-color: var(--u-color-on-info) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-info) !important;
}

.u-text-bg-info-container {
  --u-current-text-color: var(--u-color-on-info-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-info-container) !important;
}

.u-bg-info {
  background-color: var(--u-color-info) !important;
}

.u-bg-info-container {
  background-color: var(--u-color-info-container) !important;
}

.u-text-bg-warning {
  --u-current-text-color: var(--u-color-on-warning) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-warning) !important;
}

.u-text-bg-warning-container {
  --u-current-text-color: var(--u-color-on-warning-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-warning-container) !important;
}

.u-bg-warning {
  background-color: var(--u-color-warning) !important;
}

.u-bg-warning-container {
  background-color: var(--u-color-warning-container) !important;
}

.u-text-bg-primary-fixed {
  --u-current-text-color: var(--u-color-on-primary-fixed) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-primary-fixed) !important;
}

.u-text-bg-primary-fixed-dim {
  --u-current-text-color: var(--u-color-on-primary-fixed) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-primary-fixed-dim) !important;
}

.u-bg-primary-fixed {
  background-color: var(--u-color-primary-fixed) !important;
}

.u-bg-primary-fixed-dim {
  background-color: var(--u-color-primary-fixed-dim) !important;
}

.u-text-bg-secondary-fixed {
  --u-current-text-color: var(--u-color-on-secondary-fixed) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-secondary-fixed) !important;
}

.u-text-bg-secondary-fixed-dim {
  --u-current-text-color: var(--u-color-on-secondary-fixed) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-secondary-fixed-dim) !important;
}

.u-bg-secondary-fixed {
  background-color: var(--u-color-secondary-fixed) !important;
}

.u-bg-secondary-fixed-dim {
  background-color: var(--u-color-secondary-fixed-dim) !important;
}

.u-text-bg-tertiary-fixed {
  --u-current-text-color: var(--u-color-on-tertiary-fixed) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-tertiary-fixed) !important;
}

.u-text-bg-tertiary-fixed-dim {
  --u-current-text-color: var(--u-color-on-tertiary-fixed) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-tertiary-fixed-dim) !important;
}

.u-bg-tertiary-fixed {
  background-color: var(--u-color-tertiary-fixed) !important;
}

.u-bg-tertiary-fixed-dim {
  background-color: var(--u-color-tertiary-fixed-dim) !important;
}

.u-text-bg-body {
  --u-current-text-color: var(--u-color-on-body) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-body) !important;
}

.u-text-bg-inverse-body {
  --u-current-text-color: var(--u-color-on-inverse-body) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-inverse-body) !important;
}

.u-text-bg-light {
  --u-current-text-color: var(--u-color-on-light) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-light) !important;
}

.u-text-bg-dark {
  --u-current-text-color: var(--u-color-on-dark) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
  background-color: var(--u-color-dark) !important;
}

.u-bg-body {
  background-color: var(--u-color-body) !important;
}

.u-bg-inverse-body {
  background-color: var(--u-color-inverse-body) !important;
}

.u-bg-light {
  background-color: var(--u-color-light) !important;
}

.u-bg-dark {
  background-color: var(--u-color-dark) !important;
}

.u-text-primary {
  --u-current-text-color: var(--u-color-primary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-inverse-primary {
  --u-current-text-color: var(--u-color-inverse-primary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-primary {
  --u-current-text-color: var(--u-color-on-primary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-inverse-primary {
  --u-current-text-color: var(--u-color-on-inverse-primary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-primary-container {
  --u-current-text-color: var(--u-color-on-primary-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-inverse-primary-container {
  --u-current-text-color: var(--u-color-on-inverse-primary-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-secondary {
  --u-current-text-color: var(--u-color-secondary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-inverse-secondary {
  --u-current-text-color: var(--u-color-inverse-secondary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-secondary {
  --u-current-text-color: var(--u-color-on-secondary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-inverse-secondary {
  --u-current-text-color: var(--u-color-on-inverse-secondary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-secondary-container {
  --u-current-text-color: var(--u-color-on-secondary-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-inverse-secondary-container {
  --u-current-text-color: var(--u-color-on-inverse-secondary-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-tertiary {
  --u-current-text-color: var(--u-color-tertiary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-inverse-tertiary {
  --u-current-text-color: var(--u-color-inverse-tertiary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-tertiary {
  --u-current-text-color: var(--u-color-on-tertiary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-inverse-tertiary {
  --u-current-text-color: var(--u-color-on-inverse-tertiary) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-tertiary-container {
  --u-current-text-color: var(--u-color-on-tertiary-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-inverse-tertiary-container {
  --u-current-text-color: var(--u-color-on-inverse-tertiary-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-error {
  --u-current-text-color: var(--u-color-error) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-inverse-error {
  --u-current-text-color: var(--u-color-inverse-error) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-error {
  --u-current-text-color: var(--u-color-on-error) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-inverse-error {
  --u-current-text-color: var(--u-color-on-inverse-error) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-error-container {
  --u-current-text-color: var(--u-color-on-error-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-inverse-error-container {
  --u-current-text-color: var(--u-color-on-inverse-error-container) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-surface {
  --u-current-text-color: var(--u-color-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-inverse-surface {
  --u-current-text-color: var(--u-color-inverse-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-surface {
  --u-current-text-color: var(--u-color-on-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-on-inverse-surface {
  --u-current-text-color: var(--u-color-on-inverse-surface) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-surface-variant {
  --u-current-text-color: var(--u-color-surface-variant) !important;
  --u-color-high-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-high-emphasis-opacity), transparent) !important;
  --u-color-low-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-low-emphasis-opacity), transparent) !important;
  --u-color-lower-emphasis: color-mix(in srgb, var(--u-current-text-color) var(--u-lower-emphasis-opacity), transparent) !important;
  color: var(--u-color-high-emphasis) !important;
}

.u-text-inverse-surface-variant {
  --u-current-text-co