:root {
  /* region branded colors: cem-color-[hue]-[variant] */
  --cem-color-blue-xl: #e0e8ff;
  --cem-color-blue-l: #d7e3ff;
  --cem-color-blue-d: #002f65;
  --cem-color-blue-xd: #001b3f;
  --cem-color-brown-xl: #d7ccc8;
  --cem-color-brown-l: #a1887f;
  --cem-color-brown-d: #4e342e;
  --cem-color-brown-xd: #3e2723;
  --cem-color-cyan-xl: #f1fefe;
  --cem-color-cyan-l: #00fbfb;
  --cem-color-cyan-d: #006a6a;
  --cem-color-cyan-xd: #001010;
  --cem-color-grey-l: #f1f1eb;
  --cem-color-grey-d: #1a1c18;
  --cem-color-orange-xl: #f0f070;
  --cem-color-orange-l: #ffe082;
  --cem-color-orange-d: #723600;
  --cem-color-orange-xd: #502400;
  --cem-color-purple-xl: #f3e5f5;
  --cem-color-purple-l: #e1bee7;
  --cem-color-purple-d: #6a1b9a;
  --cem-color-purple-xd: #4a148c;
  --cem-color-red-xl: #ffb4ab;
  --cem-color-red-l: #ba1a1a;
  --cem-color-red-d: #690005;
  --cem-color-red-xd: #410002;
  --cem-color-visitedtext-30-black: color-mix(in srgb, VisitedText 30%, black);
  --cem-color-visitedtext-30-white: color-mix(in srgb, VisitedText 30%, white);
  --cem-color-mark-30-black: color-mix(in srgb, Mark 30%, black);
  --cem-color-mark-30-white: color-mix(in srgb, Mark 30%, white);
  --cem-color-canvastext-30-purple: color-mix(in srgb, CanvasText 30%, purple );
  --cem-color-canvastext-30-lightpink: color-mix(in srgb, CanvasText 30%, lightpink);
  --cem-color-red-30-black: color-mix(in srgb, red 30%, black);
  --cem-color-red-30-white: color-mix(in srgb, red 30%, white);
  --cem-color-white: white;
  /* endregion branded colors */

  /* region emotion palette: cem-palette-[emotion]-[shift] (light/dark) */
  --cem-palette-comfort: light-dark(var(--cem-color-cyan-xl), var(--cem-color-cyan-xd));
  --cem-palette-comfort-x: light-dark(var(--cem-color-cyan-xd), var(--cem-color-cyan-xl));
  --cem-palette-comfort-text: light-dark(var(--cem-color-cyan-xd), var(--cem-color-cyan-xl));
  --cem-palette-comfort-text-x: light-dark(var(--cem-color-cyan-xl), var(--cem-color-cyan-xd));
  --cem-palette-calm: light-dark(var(--cem-color-cyan-l), var(--cem-color-cyan-d));
  --cem-palette-calm-x: light-dark(var(--cem-color-cyan-d), var(--cem-color-cyan-l));
  --cem-palette-calm-text: light-dark(var(--cem-palette-comfort-text), var(--cem-palette-comfort-text));
  --cem-palette-calm-text-x: light-dark(var(--cem-palette-comfort-text-x), var(--cem-palette-comfort-text-x));
  --cem-palette-trust: light-dark(var(--cem-color-blue-l), var(--cem-color-blue-d));
  --cem-palette-trust-x: light-dark(var(--cem-color-blue-d), var(--cem-color-blue-l));
  --cem-palette-trust-text: light-dark(var(--cem-palette-comfort-text), var(--cem-color-white));
  --cem-palette-trust-text-x: light-dark(var(--cem-palette-comfort-text-x), var(--cem-palette-comfort-text-x));
  --cem-palette-enthusiasm: light-dark(var(--cem-color-orange-l), var(--cem-color-orange-d));
  --cem-palette-enthusiasm-x: light-dark(var(--cem-color-orange-xd), var(--cem-color-orange-xl));
  --cem-palette-enthusiasm-text: light-dark(var(--cem-palette-comfort-text), var(--cem-color-white));
  --cem-palette-enthusiasm-text-x: light-dark(var(--cem-palette-comfort-text-x), var(--cem-palette-comfort-text-x));
  --cem-palette-creativity: light-dark(var(--cem-color-purple-l), var(--cem-color-purple-d));
  --cem-palette-creativity-x: light-dark(var(--cem-color-purple-d), var(--cem-color-purple-l));
  --cem-palette-creativity-text: light-dark(var(--cem-palette-comfort-text), var(--cem-palette-comfort-text));
  --cem-palette-creativity-text-x: light-dark(var(--cem-palette-comfort-text-x), var(--cem-palette-comfort-text-x));
  --cem-palette-danger: light-dark(var(--cem-color-red-l), var(--cem-color-red-d));
  --cem-palette-danger-x: light-dark(var(--cem-color-red-d), var(--cem-color-red-l));
  --cem-palette-danger-text: light-dark(var(--cem-palette-comfort-text-x), var(--cem-palette-comfort-text));
  --cem-palette-danger-text-x: light-dark(var(--cem-color-orange-xl), var(--cem-color-orange-xl));
  --cem-palette-conservative: light-dark(var(--cem-color-grey-l), var(--cem-color-grey-d));
  --cem-palette-conservative-x: light-dark(var(--cem-color-grey-d), var(--cem-color-grey-l));
  --cem-palette-conservative-text: light-dark(var(--cem-palette-comfort-text), var(--cem-palette-comfort-text));
  --cem-palette-conservative-text-x: light-dark(var(--cem-palette-comfort-text-x), var(--cem-palette-comfort-text-x));
  /* endregion emotion palette */

  /* region zebra base: anchor all stripes to surface (§8.2) */

  --cem-zebra-color-0: var(--cem-palette-comfort);
  --cem-zebra-color-1: var(--cem-palette-comfort);
  --cem-zebra-color-2: var(--cem-palette-comfort);
  --cem-zebra-color-3: var(--cem-palette-comfort);
  --cem-zebra-strip-size: 2px;
  /* endregion zebra base */

  /* region input indicator stripe colors */
  --cem-input-background-color: color-mix(in srgb, var(--cem-palette-comfort-text) 4%, var(--cem-palette-comfort));
  --cem-input-indicator-anchor-color: color-mix(in srgb, var(--cem-palette-comfort-text) 62%, transparent);
  --cem-input-indicator-anchor-hover-color: var(--cem-palette-comfort-text);
  --cem-input-indicator-anchor-disabled-color: color-mix(in srgb, var(--cem-palette-conservative-text-x) 38%, transparent);
  --cem-input-indicator-anchor-readonly-color: color-mix(in srgb, var(--cem-palette-comfort-text) 50%, transparent);
  --cem-input-indicator-anchor-pending-color: var(--cem-palette-enthusiasm-x);
  --cem-input-indicator-anchor-invalid-color: var(--cem-palette-danger);
  --cem-input-indicator-anchor-invalid-hover-color: var(--cem-palette-danger-x);
  --cem-input-indicator-selection-color: var(--cem-palette-creativity-x);
  --cem-input-indicator-indeterminate-color: var(--cem-palette-enthusiasm-x);
  /* endregion input indicator stripe colors */

  /* region select popup and option state colors */
  --cem-select-popup-background: var(--cem-palette-comfort);
  --cem-select-popup-text: var(--cem-palette-comfort-text);
  --cem-select-popup-border-color: var(--cem-input-indicator-anchor-color);
  --cem-select-option-hover-background: var(--cem-action-contextual-hover-background);
  --cem-select-option-hover-text: var(--cem-action-contextual-hover-text);
  --cem-select-option-active-background: var(--cem-palette-trust);
  --cem-select-option-active-text: var(--cem-palette-trust-text);
  --cem-select-option-selected-background: var(--cem-palette-creativity);
  --cem-select-option-selected-text: var(--cem-palette-creativity-text);
  --cem-select-option-disabled-background: var(--cem-action-contextual-disabled-background);
  --cem-select-option-disabled-text: var(--cem-action-contextual-disabled-text);
  --cem-select-group-text: var(--cem-palette-conservative-text-x);
  /* endregion select popup and option state colors */

  /* region navigation item state colors */
  --cem-navigation-item-default-background: transparent;
  --cem-navigation-item-default-text: var(--cem-palette-comfort-text);
  --cem-navigation-item-hover-background: var(--cem-action-contextual-hover-background);
  --cem-navigation-item-hover-text: var(--cem-action-contextual-hover-text);
  --cem-navigation-item-active-background: var(--cem-action-contextual-active-background);
  --cem-navigation-item-active-text: var(--cem-action-contextual-active-text);
  --cem-navigation-item-current-background: var(--cem-action-primary-default-background);
  --cem-navigation-item-current-text: var(--cem-action-primary-default-text);
  --cem-navigation-item-current-hover-background: var(--cem-action-primary-hover-background);
  --cem-navigation-item-current-hover-text: var(--cem-action-primary-hover-text);
  --cem-navigation-item-current-active-background: var(--cem-action-primary-active-background);
  --cem-navigation-item-current-active-text: var(--cem-action-primary-active-text);
  --cem-navigation-item-disabled-background: var(--cem-action-contextual-disabled-background);
  --cem-navigation-item-disabled-text: var(--cem-action-contextual-disabled-text);
  /* endregion navigation item state colors */

  /* region interactive content state colors */
  --cem-content-interaction-default-background: transparent;
  --cem-content-interaction-default-text: var(--cem-palette-comfort-text);
  --cem-content-interaction-hover-background: var(--cem-action-contextual-hover-background);
  --cem-content-interaction-hover-text: var(--cem-action-contextual-hover-text);
  --cem-content-interaction-active-background: var(--cem-action-contextual-active-background);
  --cem-content-interaction-active-text: var(--cem-action-contextual-active-text);
  --cem-content-interaction-selected-background: var(--cem-palette-creativity);
  --cem-content-interaction-selected-text: var(--cem-palette-creativity-text);
  --cem-content-interaction-selected-hover-background: color-mix(in srgb, var(--cem-palette-creativity) 70%, var(--cem-palette-creativity-x));
  --cem-content-interaction-selected-hover-text: var(--cem-palette-creativity-text);
  --cem-content-interaction-selected-active-background: color-mix(in srgb, var(--cem-palette-creativity) 45%, var(--cem-palette-creativity-x));
  --cem-content-interaction-selected-active-text: var(--cem-palette-creativity-text);
  --cem-content-interaction-disabled-background: var(--cem-action-contextual-disabled-background);
  --cem-content-interaction-disabled-text: var(--cem-action-contextual-disabled-text);
  --cem-content-interaction-current-indicator-color: var(--cem-zebra-color-2);
  /* endregion interactive content state colors */

  /* region separator colors */
  --cem-separator-color: color-mix(in srgb, var(--cem-palette-comfort-text) 38%, transparent);
  /* endregion separator colors */

  /* region progress indicator colors */
  --cem-progress-track-color: color-mix(in srgb, var(--cem-palette-comfort-text) 24%, transparent);
  --cem-progress-indicator-color: var(--cem-palette-enthusiasm-x);
  /* endregion progress indicator colors */

  /* region workflow step colors */
  --cem-workflow-step-completed-indicator-color: var(--cem-palette-trust);
  --cem-workflow-step-invalid-indicator-color: var(--cem-palette-danger);
  --cem-workflow-connector-default-color: color-mix(in srgb, var(--cem-palette-comfort-text) 24%, transparent);
  --cem-workflow-connector-completed-color: var(--cem-palette-trust);
  /* endregion workflow step colors */

  /* region slider input colors */
  --cem-slider-track-color: color-mix(in srgb, var(--cem-palette-comfort-text) 24%, transparent);
  --cem-slider-active-track-color: var(--cem-palette-enthusiasm-x);
  --cem-slider-thumb-color: var(--cem-palette-enthusiasm-x);
  --cem-slider-thumb-hover-color: var(--cem-action-primary-hover-background);
  --cem-slider-thumb-active-color: var(--cem-action-primary-active-background);
  --cem-slider-disabled-track-color: color-mix(in srgb, var(--cem-palette-comfort-text) 14%, transparent);
  --cem-slider-disabled-thumb-color: var(--cem-action-contextual-disabled-text);
  --cem-slider-tick-color: var(--cem-palette-comfort-text);
  /* endregion slider input colors */

  /* region common for cem themes */
  [data-theme*="cem-theme-"], .cem-theme-native, .cem-theme-contrast-light, .cem-theme-contrast-dark, .cem-theme-light, .cem-theme-dark {
    /* action intent tokens: cem-action-[intent]-[state]-[background|text] */
    --cem-action-explicit-disabled-background: color-mix(in srgb, var(--cem-palette-trust) 30%, var(--cem-palette-conservative-x));
    --cem-action-explicit-disabled-text: var(--cem-palette-conservative-text-x);
    --cem-action-explicit-readonly-background: color-mix(in srgb, var(--cem-palette-trust) 80%, var(--cem-palette-trust-x));
    --cem-action-explicit-readonly-text: var(--cem-palette-trust-text);
    --cem-action-explicit-editable-background: color-mix(in srgb, var(--cem-palette-trust) 90%, var(--cem-palette-trust-x));
    --cem-action-explicit-editable-text: var(--cem-palette-trust-text);
    --cem-action-explicit-default-background: var(--cem-palette-trust);
    --cem-action-explicit-default-text: var(--cem-palette-trust-text);
    --cem-action-explicit-indeterminate-background: color-mix(in srgb, var(--cem-palette-trust) 90%, var(--cem-palette-trust-x));
    --cem-action-explicit-indeterminate-text: var(--cem-palette-trust-text);
    --cem-action-explicit-hover-background: color-mix(in srgb, var(--cem-palette-trust) 70%, var(--cem-palette-trust-x));
    --cem-action-explicit-hover-text: var(--cem-palette-trust-text);
    --cem-action-explicit-active-background: color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x));
    --cem-action-explicit-active-text: var(--cem-palette-trust-text-x);
    --cem-action-explicit-pending-background: color-mix(in srgb, var(--cem-palette-trust) 5%, var(--cem-palette-trust-x));
    --cem-action-explicit-pending-text: var(--cem-palette-trust-text-x);
    --cem-action-primary-disabled-background: color-mix(in srgb, var(--cem-palette-creativity) 30%, var(--cem-palette-conservative-x));
    --cem-action-primary-disabled-text: var(--cem-palette-conservative-text-x);
    --cem-action-primary-readonly-background: color-mix(in srgb, var(--cem-palette-creativity) 80%, var(--cem-palette-creativity-x));
    --cem-action-primary-readonly-text: var(--cem-palette-creativity-text);
    --cem-action-primary-editable-background: color-mix(in srgb, var(--cem-palette-creativity) 90%, var(--cem-palette-creativity-x));
    --cem-action-primary-editable-text: var(--cem-palette-creativity-text);
    --cem-action-primary-default-background: var(--cem-palette-creativity);
    --cem-action-primary-default-text: var(--cem-palette-creativity-text);
    --cem-action-primary-indeterminate-background: color-mix(in srgb, var(--cem-palette-creativity) 90%, var(--cem-palette-creativity-x));
    --cem-action-primary-indeterminate-text: var(--cem-palette-creativity-text);
    --cem-action-primary-hover-background: color-mix(in srgb, var(--cem-palette-creativity) 70%, var(--cem-palette-creativity-x));
    --cem-action-primary-hover-text: var(--cem-palette-creativity-text);
    --cem-action-primary-active-background: color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x));
    --cem-action-primary-active-text: var(--cem-palette-creativity-text-x);
    --cem-action-primary-pending-background: color-mix(in srgb, var(--cem-palette-creativity) 5%, var(--cem-palette-creativity-x));
    --cem-action-primary-pending-text: var(--cem-palette-creativity-text-x);
    --cem-action-contextual-disabled-background: color-mix(in srgb, var(--cem-palette-comfort) 30%, var(--cem-palette-conservative-x));
    --cem-action-contextual-disabled-text: var(--cem-palette-conservative-text-x);
    --cem-action-contextual-readonly-background: color-mix(in srgb, var(--cem-palette-comfort) 80%, var(--cem-palette-comfort-x));
    --cem-action-contextual-readonly-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-editable-background: color-mix(in srgb, var(--cem-palette-comfort) 90%, var(--cem-palette-comfort-x));
    --cem-action-contextual-editable-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-default-background: var(--cem-palette-comfort);
    --cem-action-contextual-default-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-indeterminate-background: color-mix(in srgb, var(--cem-palette-comfort) 90%, var(--cem-palette-comfort-x));
    --cem-action-contextual-indeterminate-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-hover-background: color-mix(in srgb, var(--cem-palette-comfort) 70%, var(--cem-palette-comfort-x));
    --cem-action-contextual-hover-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-active-background: color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x));
    --cem-action-contextual-active-text: var(--cem-palette-comfort-text-x);
    --cem-action-contextual-pending-background: color-mix(in srgb, var(--cem-palette-comfort) 5%, var(--cem-palette-comfort-x));
    --cem-action-contextual-pending-text: var(--cem-palette-comfort-text-x);
    --cem-action-alternate-disabled-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 30%, var(--cem-palette-conservative-x));
    --cem-action-alternate-disabled-text: var(--cem-palette-conservative-text-x);
    --cem-action-alternate-readonly-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 80%, var(--cem-palette-enthusiasm-x));
    --cem-action-alternate-readonly-text: var(--cem-palette-enthusiasm-text);
    --cem-action-alternate-editable-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 90%, var(--cem-palette-enthusiasm-x));
    --cem-action-alternate-editable-text: var(--cem-palette-enthusiasm-text);
    --cem-action-alternate-default-background: var(--cem-palette-enthusiasm);
    --cem-action-alternate-default-text: var(--cem-palette-enthusiasm-text);
    --cem-action-alternate-indeterminate-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 90%, var(--cem-palette-enthusiasm-x));
    --cem-action-alternate-indeterminate-text: var(--cem-palette-enthusiasm-text);
    --cem-action-alternate-hover-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 70%, var(--cem-palette-enthusiasm-x));
    --cem-action-alternate-hover-text: var(--cem-palette-enthusiasm-text);
    --cem-action-alternate-active-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x));
    --cem-action-alternate-active-text: var(--cem-palette-enthusiasm-text-x);
    --cem-action-alternate-pending-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 5%, var(--cem-palette-enthusiasm-x));
    --cem-action-alternate-pending-text: var(--cem-palette-enthusiasm-text-x);
    --cem-action-destructive-disabled-background: color-mix(in srgb, var(--cem-palette-danger) 30%, var(--cem-palette-conservative-x));
    --cem-action-destructive-disabled-text: var(--cem-palette-conservative-text-x);
    --cem-action-destructive-readonly-background: color-mix(in srgb, var(--cem-palette-danger) 80%, var(--cem-palette-danger-x));
    --cem-action-destructive-readonly-text: var(--cem-palette-danger-text);
    --cem-action-destructive-editable-background: color-mix(in srgb, var(--cem-palette-danger) 90%, var(--cem-palette-danger-x));
    --cem-action-destructive-editable-text: var(--cem-palette-danger-text);
    --cem-action-destructive-default-background: var(--cem-palette-danger);
    --cem-action-destructive-default-text: var(--cem-palette-danger-text);
    --cem-action-destructive-indeterminate-background: color-mix(in srgb, var(--cem-palette-danger) 90%, var(--cem-palette-danger-x));
    --cem-action-destructive-indeterminate-text: var(--cem-palette-danger-text);
    --cem-action-destructive-hover-background: color-mix(in srgb, var(--cem-palette-danger) 70%, var(--cem-palette-danger-x));
    --cem-action-destructive-hover-text: var(--cem-palette-danger-text);
    --cem-action-destructive-active-background: color-mix(in srgb, var(--cem-palette-danger) 25%, var(--cem-palette-danger-x));
    --cem-action-destructive-active-text: var(--cem-palette-danger-text-x);
    --cem-action-destructive-pending-background: color-mix(in srgb, var(--cem-palette-danger) 5%, var(--cem-palette-danger-x));
    --cem-action-destructive-pending-text: var(--cem-palette-danger-text-x);
    /* action contour colors resolve in the active theme */
    --cem-action-primary-outline-color: var(--cem-palette-creativity-x);
    --cem-action-explicit-outline-color: var(--cem-palette-trust-x);
    --cem-action-contextual-outline-color: var(--cem-palette-comfort-x);
    --cem-action-alternate-outline-color: var(--cem-palette-enthusiasm-x);
    --cem-action-destructive-outline-color: var(--cem-palette-danger-x);
    --cem-action-pending-outline-image: var(--cem-action-primary-pending-image);
    /* pending gradient color inputs */
    --cem-pending-color-1: var(--cem-action-primary-pending-background);
    --cem-pending-color-2: var(--cem-action-primary-pending-stripe-background);
    --cem-action-primary-pending-stripe-background: light-dark(color-mix(in srgb, var(--cem-action-primary-active-background) 88%, var(--cem-color-white)), color-mix(in srgb, var(--cem-action-primary-active-background) 80%, black));
    --cem-action-explicit-pending-stripe-background: light-dark(color-mix(in srgb, var(--cem-action-explicit-active-background) 88%, var(--cem-color-white)), color-mix(in srgb, var(--cem-action-explicit-active-background) 80%, black));
    --cem-action-contextual-pending-stripe-background: light-dark(color-mix(in srgb, var(--cem-action-contextual-active-background) 88%, var(--cem-color-white)), color-mix(in srgb, var(--cem-action-contextual-active-background) 80%, black));
    --cem-action-alternate-pending-stripe-background: light-dark(color-mix(in srgb, var(--cem-action-alternate-active-background) 88%, var(--cem-color-white)), color-mix(in srgb, var(--cem-action-alternate-active-background) 80%, black));
    --cem-action-destructive-pending-stripe-background: light-dark(color-mix(in srgb, var(--cem-action-destructive-active-background) 75%, var(--cem-color-white)), color-mix(in srgb, var(--cem-action-destructive-active-background) 50%, black));
    --cem-action-primary-pending-image: linear-gradient(var(--cem-pending-angle), color-mix(in srgb, var(--cem-palette-creativity) 5%, var(--cem-palette-creativity-x)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x)) 80%, black)) 20% 30%, color-mix(in srgb, var(--cem-palette-creativity) 5%, var(--cem-palette-creativity-x)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x)) 80%, black)) 70% 80%, color-mix(in srgb, var(--cem-palette-creativity) 5%, var(--cem-palette-creativity-x)) 95% 100%);
    --cem-action-explicit-pending-image: linear-gradient(var(--cem-pending-angle), color-mix(in srgb, var(--cem-palette-trust) 5%, var(--cem-palette-trust-x)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x)) 80%, black)) 20% 30%, color-mix(in srgb, var(--cem-palette-trust) 5%, var(--cem-palette-trust-x)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x)) 80%, black)) 70% 80%, color-mix(in srgb, var(--cem-palette-trust) 5%, var(--cem-palette-trust-x)) 95% 100%);
    --cem-action-contextual-pending-image: linear-gradient(var(--cem-pending-angle), color-mix(in srgb, var(--cem-palette-comfort) 5%, var(--cem-palette-comfort-x)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x)) 80%, black)) 20% 30%, color-mix(in srgb, var(--cem-palette-comfort) 5%, var(--cem-palette-comfort-x)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x)) 80%, black)) 70% 80%, color-mix(in srgb, var(--cem-palette-comfort) 5%, var(--cem-palette-comfort-x)) 95% 100%);
    --cem-action-alternate-pending-image: linear-gradient(var(--cem-pending-angle), color-mix(in srgb, var(--cem-palette-enthusiasm) 5%, var(--cem-palette-enthusiasm-x)) 0% 5%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x)) 80%, black)) 20% 30%, color-mix(in srgb, var(--cem-palette-enthusiasm) 5%, var(--cem-palette-enthusiasm-x)) 45% 55%, light-dark(color-mix(in srgb, color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x)) 60%, var(--cem-color-white)), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x)) 80%, black)) 70% 80%, color-mix(in srgb, var(--cem-palette-enthusiasm) 5%, var(--cem-palette-enthusiasm-x)) 95% 100%);
    --cem-action-destructive-pending-image: linear-gradient(var(--cem-pending-angle), color-mix(in srgb, var(--cem-palette-danger) 5%, var(--cem-palette-danger-x)) 0% 5%, light-dark(var(--cem-color-red-xl), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-danger) 25%, var(--cem-palette-danger-x)) 50%, black)) 20% 30%, color-mix(in srgb, var(--cem-palette-danger) 5%, var(--cem-palette-danger-x)) 45% 55%, light-dark(var(--cem-color-red-xl), color-mix(in srgb, color-mix(in srgb, var(--cem-palette-danger) 25%, var(--cem-palette-danger-x)) 50%, black)) 70% 80%, color-mix(in srgb, var(--cem-palette-danger) 5%, var(--cem-palette-danger-x)) 95% 100%);
    --cem-zebra-color-0: var(--cem-palette-comfort);
    --cem-zebra-color-1: var(--cem-palette-comfort);
    --cem-zebra-color-2: var(--cem-palette-comfort);
    --cem-zebra-color-3: var(--cem-palette-comfort);
    /* input indicator colors resolve against the active theme palette */
    --cem-input-background-color: color-mix(in srgb, var(--cem-palette-comfort-text) 4%, var(--cem-palette-comfort));
    --cem-input-indicator-anchor-color: color-mix(in srgb, var(--cem-palette-comfort-text) 62%, transparent);
    --cem-input-indicator-anchor-hover-color: var(--cem-palette-comfort-text);
    --cem-input-indicator-anchor-disabled-color: color-mix(in srgb, var(--cem-palette-conservative-text-x) 38%, transparent);
    --cem-input-indicator-anchor-readonly-color: color-mix(in srgb, var(--cem-palette-comfort-text) 50%, transparent);
    --cem-input-indicator-anchor-pending-color: var(--cem-palette-enthusiasm-x);
    --cem-input-indicator-anchor-invalid-color: var(--cem-palette-danger);
    --cem-input-indicator-anchor-invalid-hover-color: var(--cem-palette-danger-x);
    --cem-input-indicator-selection-color: var(--cem-palette-creativity-x);
    --cem-input-indicator-indeterminate-color: var(--cem-palette-enthusiasm-x);
    /* select popup and option state colors resolve against the active theme palette */
    --cem-select-popup-background: var(--cem-palette-comfort);
    --cem-select-popup-text: var(--cem-palette-comfort-text);
    --cem-select-popup-border-color: var(--cem-input-indicator-anchor-color);
    --cem-select-option-hover-background: var(--cem-action-contextual-hover-background);
    --cem-select-option-hover-text: var(--cem-action-contextual-hover-text);
    --cem-select-option-active-background: var(--cem-palette-trust);
    --cem-select-option-active-text: var(--cem-palette-trust-text);
    --cem-select-option-selected-background: var(--cem-palette-creativity);
    --cem-select-option-selected-text: var(--cem-palette-creativity-text);
    --cem-select-option-disabled-background: var(--cem-action-contextual-disabled-background);
    --cem-select-option-disabled-text: var(--cem-action-contextual-disabled-text);
    --cem-select-group-text: var(--cem-palette-conservative-text-x);
    /* navigation item state colors resolve against the active theme palette */
    --cem-navigation-item-default-background: transparent;
    --cem-navigation-item-default-text: var(--cem-palette-comfort-text);
    --cem-navigation-item-hover-background: var(--cem-action-contextual-hover-background);
    --cem-navigation-item-hover-text: var(--cem-action-contextual-hover-text);
    --cem-navigation-item-active-background: var(--cem-action-contextual-active-background);
    --cem-navigation-item-active-text: var(--cem-action-contextual-active-text);
    --cem-navigation-item-current-background: var(--cem-action-primary-default-background);
    --cem-navigation-item-current-text: var(--cem-action-primary-default-text);
    --cem-navigation-item-current-hover-background: var(--cem-action-primary-hover-background);
    --cem-navigation-item-current-hover-text: var(--cem-action-primary-hover-text);
    --cem-navigation-item-current-active-background: var(--cem-action-primary-active-background);
    --cem-navigation-item-current-active-text: var(--cem-action-primary-active-text);
    --cem-navigation-item-disabled-background: var(--cem-action-contextual-disabled-background);
    --cem-navigation-item-disabled-text: var(--cem-action-contextual-disabled-text);
    /* interactive content state colors resolve against the active theme palette */
    --cem-content-interaction-default-background: transparent;
    --cem-content-interaction-default-text: var(--cem-palette-comfort-text);
    --cem-content-interaction-hover-background: var(--cem-action-contextual-hover-background);
    --cem-content-interaction-hover-text: var(--cem-action-contextual-hover-text);
    --cem-content-interaction-active-background: var(--cem-action-contextual-active-background);
    --cem-content-interaction-active-text: var(--cem-action-contextual-active-text);
    --cem-content-interaction-selected-background: var(--cem-palette-creativity);
    --cem-content-interaction-selected-text: var(--cem-palette-creativity-text);
    --cem-content-interaction-selected-hover-background: color-mix(in srgb, var(--cem-palette-creativity) 70%, var(--cem-palette-creativity-x));
    --cem-content-interaction-selected-hover-text: var(--cem-palette-creativity-text);
    --cem-content-interaction-selected-active-background: color-mix(in srgb, var(--cem-palette-creativity) 45%, var(--cem-palette-creativity-x));
    --cem-content-interaction-selected-active-text: var(--cem-palette-creativity-text);
    --cem-content-interaction-disabled-background: var(--cem-action-contextual-disabled-background);
    --cem-content-interaction-disabled-text: var(--cem-action-contextual-disabled-text);
    --cem-content-interaction-current-indicator-color: var(--cem-zebra-color-2);
    /* separator colors resolve against the active theme surface text */
    --cem-separator-color: color-mix(in srgb, var(--cem-palette-comfort-text) 38%, transparent);
    /* progress colors resolve against the active theme palette */
    --cem-progress-track-color: color-mix(in srgb, var(--cem-palette-comfort-text) 24%, transparent);
    --cem-progress-indicator-color: var(--cem-palette-enthusiasm-x);
    /* workflow colors resolve against the active theme palette */
    --cem-workflow-step-completed-indicator-color: var(--cem-palette-trust);
    --cem-workflow-step-invalid-indicator-color: var(--cem-palette-danger);
    --cem-workflow-connector-default-color: color-mix(in srgb, var(--cem-palette-comfort-text) 24%, transparent);
    --cem-workflow-connector-completed-color: var(--cem-palette-trust);
    /* slider colors resolve against the active theme palette */
    --cem-slider-track-color: color-mix(in srgb, var(--cem-palette-comfort-text) 24%, transparent);
    --cem-slider-active-track-color: var(--cem-palette-enthusiasm-x);
    --cem-slider-thumb-color: var(--cem-palette-enthusiasm-x);
    --cem-slider-thumb-hover-color: var(--cem-action-primary-hover-background);
    --cem-slider-thumb-active-color: var(--cem-action-primary-active-background);
    --cem-slider-disabled-track-color: color-mix(in srgb, var(--cem-palette-comfort-text) 14%, transparent);
    --cem-slider-disabled-thumb-color: var(--cem-action-contextual-disabled-text);
    --cem-slider-tick-color: var(--cem-palette-comfort-text);
    background-color: var(--cem-palette-comfort);
    color: var(--cem-palette-comfort-text);
  }
  /* endregion common for cem themes */

  .cem-theme-light, [data-theme="cem-theme-light"], .cem-theme-contrast-light, [data-theme="cem-theme-contrast-light"] { color-scheme: light; }
  .cem-theme-dark, [data-theme="cem-theme-dark"], .cem-theme-contrast-dark, [data-theme="cem-theme-contrast-dark"] { color-scheme: dark; }

  /* region zebra state per theme mode (§8.2 cem-zebra-mode-mapping) */
  .cem-theme-native, [data-theme="cem-theme-native"] {
    [focus], :focus, :focus-visible, :focus-within, .focus { --cem-zebra-color-1: CanvasText; }
    [target], :target, .target { --cem-zebra-color-2: Mark; }
    [selected], .selected { --cem-zebra-color-3: SelectedItem; }
  }
  .cem-theme-light, [data-theme="cem-theme-light"] {
    [focus], :focus, :focus-visible, :focus-within, .focus { --cem-zebra-color-1: var(--cem-palette-trust-x); }
    [target], :target, .target { --cem-zebra-color-2: var(--cem-color-orange-l); }
    [selected], .selected { --cem-zebra-color-3: var(--cem-palette-creativity-x); }
  }
  .cem-theme-dark, [data-theme="cem-theme-dark"] {
    [focus], :focus, :focus-visible, :focus-within, .focus { --cem-zebra-color-1: var(--cem-palette-comfort-x); }
    [target], :target, .target { --cem-zebra-color-2: var(--cem-palette-creativity); }
    [selected], .selected { --cem-zebra-color-3: var(--cem-palette-calm-x); }
  }
  .cem-theme-contrast-light, [data-theme="cem-theme-contrast-light"] {
    [focus], :focus, :focus-visible, :focus-within, .focus { --cem-zebra-color-1: var(--cem-palette-trust-x); }
    [target], :target, .target { --cem-zebra-color-2: var(--cem-color-orange-l); }
    [selected], .selected { --cem-zebra-color-3: var(--cem-palette-creativity-x); }
  }
  .cem-theme-contrast-dark, [data-theme="cem-theme-contrast-dark"] {
    [focus], :focus, :focus-visible, :focus-within, .focus { --cem-zebra-color-1: var(--cem-palette-comfort-x); }
    [target], :target, .target { --cem-zebra-color-2: var(--cem-palette-enthusiasm-x); }
    [selected], .selected { --cem-zebra-color-3: var(--cem-palette-trust); }
  }
  /* endregion zebra state */

  /* region native theme overrides */
  .cem-theme-native, [data-theme="cem-theme-native"] {
    --cem-palette-comfort: Canvas;
    --cem-palette-comfort-x: CanvasText;
    --cem-palette-comfort-text: CanvasText;
    --cem-palette-comfort-text-x: Canvas;
    --cem-palette-calm: cyan;
    --cem-palette-calm-x: rgb(0, 120, 120);
    --cem-palette-calm-text: black;
    --cem-palette-calm-text-x: white;
    --cem-palette-trust: color-mix(in srgb, Highlight 70%, black);
    --cem-palette-trust-x: light-dark(var(--cem-color-visitedtext-30-black), var(--cem-color-visitedtext-30-white));
    --cem-palette-trust-text: HighlightText;
    --cem-palette-trust-text-x: light-dark(Canvas, Canvas);
    --cem-palette-enthusiasm: Mark;
    --cem-palette-enthusiasm-x: light-dark(var(--cem-color-mark-30-black), var(--cem-color-mark-30-white));
    --cem-palette-enthusiasm-text: MarkText;
    --cem-palette-enthusiasm-text-x: Canvas;
    --cem-palette-creativity: ButtonFace;
    --cem-palette-creativity-x: light-dark(var(--cem-color-canvastext-30-purple), var(--cem-color-canvastext-30-lightpink));
    --cem-palette-creativity-text: CanvasText;
    --cem-palette-creativity-text-x: Canvas;
    --cem-palette-danger: light-dark(var(--cem-color-red-l), var(--cem-color-red-d));
    --cem-palette-danger-x: light-dark(var(--cem-color-red-30-black), var(--cem-color-red-30-white));
    --cem-palette-danger-text: light-dark(Canvas, CanvasText);
    --cem-palette-danger-text-x: Canvas;
    --cem-palette-conservative: ButtonFace;
    --cem-palette-conservative-x: CanvasText;
    --cem-palette-conservative-text: CanvasText;
    --cem-palette-conservative-text-x: Canvas;
    
    --cem-action-primary-pending-stripe-background: var(--cem-action-primary-active-background);
    --cem-action-explicit-pending-stripe-background: var(--cem-action-explicit-active-background);
    --cem-action-contextual-pending-stripe-background: var(--cem-action-contextual-active-background);
    --cem-action-alternate-pending-stripe-background: var(--cem-action-alternate-active-background);
    
    --cem-separator-color: CanvasText;
    
    --cem-progress-track-color: GrayText;
    --cem-progress-indicator-color: Highlight;
    
    --cem-workflow-step-completed-indicator-color: Highlight;
    --cem-workflow-step-invalid-indicator-color: Mark;
    --cem-workflow-connector-default-color: GrayText;
    --cem-workflow-connector-completed-color: Highlight;
    
    --cem-slider-track-color: GrayText;
    --cem-slider-active-track-color: Highlight;
    --cem-slider-thumb-color: CanvasText;
    --cem-slider-thumb-hover-color: Highlight;
    --cem-slider-thumb-active-color: Highlight;
    --cem-slider-disabled-track-color: GrayText;
    --cem-slider-disabled-thumb-color: GrayText;
    --cem-slider-tick-color: CanvasText;
    [focus], :focus, :focus-visible, :focus-within, .focus { --cem-zebra-color-1: CanvasText; }
    [target], :target, .target { --cem-zebra-color-2: Mark; }
    [selected], .selected { --cem-zebra-color-3: SelectedItem; }
  }
  /* endregion native */

  /* Contrast action surfaces and ink come from the canonical state columns. */
  [data-theme="cem-theme-contrast-light"], [data-theme="cem-theme-contrast-dark"], .cem-theme-contrast-light, .cem-theme-contrast-dark {
    --cem-action-explicit-disabled-background: var(--cem-palette-comfort);
    --cem-action-explicit-disabled-text: color-mix(in srgb, var(--cem-palette-comfort-text) 38%, var(--cem-palette-comfort));
    --cem-action-explicit-readonly-background: var(--cem-palette-comfort);
    --cem-action-explicit-readonly-text: var(--cem-palette-comfort-text);
    --cem-action-explicit-editable-background: var(--cem-palette-comfort);
    --cem-action-explicit-editable-text: var(--cem-palette-comfort-text);
    --cem-action-explicit-default-background: var(--cem-palette-comfort);
    --cem-action-explicit-default-text: var(--cem-palette-comfort-text);
    --cem-action-explicit-indeterminate-background: var(--cem-palette-comfort);
    --cem-action-explicit-indeterminate-text: var(--cem-palette-comfort-text);
    --cem-action-explicit-hover-background: var(--cem-palette-comfort);
    --cem-action-explicit-hover-text: var(--cem-palette-comfort-text);
    --cem-action-explicit-active-background: var(--cem-palette-comfort);
    --cem-action-explicit-active-text: var(--cem-palette-comfort-text);
    --cem-action-explicit-pending-background: var(--cem-palette-comfort);
    --cem-action-explicit-pending-text: var(--cem-palette-comfort-text);
    --cem-action-primary-disabled-background: var(--cem-palette-comfort);
    --cem-action-primary-disabled-text: color-mix(in srgb, var(--cem-palette-comfort-text) 38%, var(--cem-palette-comfort));
    --cem-action-primary-readonly-background: var(--cem-palette-comfort);
    --cem-action-primary-readonly-text: var(--cem-palette-comfort-text);
    --cem-action-primary-editable-background: var(--cem-palette-comfort);
    --cem-action-primary-editable-text: var(--cem-palette-comfort-text);
    --cem-action-primary-default-background: var(--cem-palette-comfort);
    --cem-action-primary-default-text: var(--cem-palette-comfort-text);
    --cem-action-primary-indeterminate-background: var(--cem-palette-comfort);
    --cem-action-primary-indeterminate-text: var(--cem-palette-comfort-text);
    --cem-action-primary-hover-background: var(--cem-palette-comfort);
    --cem-action-primary-hover-text: var(--cem-palette-comfort-text);
    --cem-action-primary-active-background: var(--cem-palette-comfort);
    --cem-action-primary-active-text: var(--cem-palette-comfort-text);
    --cem-action-primary-pending-background: var(--cem-palette-comfort);
    --cem-action-primary-pending-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-disabled-background: var(--cem-palette-comfort);
    --cem-action-contextual-disabled-text: color-mix(in srgb, var(--cem-palette-comfort-text) 38%, var(--cem-palette-comfort));
    --cem-action-contextual-readonly-background: var(--cem-palette-comfort);
    --cem-action-contextual-readonly-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-editable-background: var(--cem-palette-comfort);
    --cem-action-contextual-editable-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-default-background: var(--cem-palette-comfort);
    --cem-action-contextual-default-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-indeterminate-background: var(--cem-palette-comfort);
    --cem-action-contextual-indeterminate-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-hover-background: var(--cem-palette-comfort);
    --cem-action-contextual-hover-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-active-background: var(--cem-palette-comfort);
    --cem-action-contextual-active-text: var(--cem-palette-comfort-text);
    --cem-action-contextual-pending-background: var(--cem-palette-comfort);
    --cem-action-contextual-pending-text: var(--cem-palette-comfort-text);
    --cem-action-alternate-disabled-background: var(--cem-palette-comfort);
    --cem-action-alternate-disabled-text: color-mix(in srgb, var(--cem-palette-comfort-text) 38%, var(--cem-palette-comfort));
    --cem-action-alternate-readonly-background: var(--cem-palette-comfort);
    --cem-action-alternate-readonly-text: var(--cem-palette-comfort-text);
    --cem-action-alternate-editable-background: var(--cem-palette-comfort);
    --cem-action-alternate-editable-text: var(--cem-palette-comfort-text);
    --cem-action-alternate-default-background: var(--cem-palette-comfort);
    --cem-action-alternate-default-text: var(--cem-palette-comfort-text);
    --cem-action-alternate-indeterminate-background: var(--cem-palette-comfort);
    --cem-action-alternate-indeterminate-text: var(--cem-palette-comfort-text);
    --cem-action-alternate-hover-background: var(--cem-palette-comfort);
    --cem-action-alternate-hover-text: var(--cem-palette-comfort-text);
    --cem-action-alternate-active-background: var(--cem-palette-comfort);
    --cem-action-alternate-active-text: var(--cem-palette-comfort-text);
    --cem-action-alternate-pending-background: var(--cem-palette-comfort);
    --cem-action-alternate-pending-text: var(--cem-palette-comfort-text);
    --cem-action-destructive-disabled-background: var(--cem-palette-comfort);
    --cem-action-destructive-disabled-text: color-mix(in srgb, var(--cem-palette-comfort-text) 38%, var(--cem-palette-comfort));
    --cem-action-destructive-readonly-background: var(--cem-palette-comfort);
    --cem-action-destructive-readonly-text: var(--cem-palette-comfort-text);
    --cem-action-destructive-editable-background: var(--cem-palette-comfort);
    --cem-action-destructive-editable-text: var(--cem-palette-comfort-text);
    --cem-action-destructive-default-background: var(--cem-palette-comfort);
    --cem-action-destructive-default-text: var(--cem-palette-comfort-text);
    --cem-action-destructive-indeterminate-background: var(--cem-palette-comfort);
    --cem-action-destructive-indeterminate-text: var(--cem-palette-comfort-text);
    --cem-action-destructive-hover-background: var(--cem-palette-comfort);
    --cem-action-destructive-hover-text: var(--cem-palette-comfort-text);
    --cem-action-destructive-active-background: var(--cem-palette-comfort);
    --cem-action-destructive-active-text: var(--cem-palette-comfort-text);
    --cem-action-destructive-pending-background: var(--cem-palette-comfort);
    --cem-action-destructive-pending-text: var(--cem-palette-comfort-text);
    --cem-action-primary-pending-stripe-background: var(--cem-palette-comfort);
    --cem-action-explicit-pending-stripe-background: var(--cem-palette-comfort);
    --cem-action-contextual-pending-stripe-background: var(--cem-palette-comfort);
    --cem-action-alternate-pending-stripe-background: var(--cem-palette-comfort);
    --cem-action-destructive-pending-stripe-background: var(--cem-palette-comfort);
    --cem-slider-thumb-hover-color: var(--cem-palette-creativity-x);
    --cem-slider-thumb-active-color: var(--cem-palette-comfort-text);
  }

  @media (forced-colors: active) {
    &, [data-theme*="cem-theme-"], .cem-theme-native, .cem-theme-contrast-light, .cem-theme-contrast-dark, .cem-theme-light, .cem-theme-dark {
      --cem-separator-color: CanvasText;
      
      --cem-progress-track-color: GrayText;
      --cem-progress-indicator-color: Highlight;
      
      --cem-workflow-step-completed-indicator-color: Highlight;
      --cem-workflow-step-invalid-indicator-color: Mark;
      --cem-workflow-connector-default-color: GrayText;
      --cem-workflow-connector-completed-color: Highlight;
      
      --cem-slider-track-color: GrayText;
      --cem-slider-active-track-color: Highlight;
      --cem-slider-thumb-color: CanvasText;
      --cem-slider-thumb-hover-color: Highlight;
      --cem-slider-thumb-active-color: Highlight;
      --cem-slider-disabled-track-color: GrayText;
      --cem-slider-disabled-thumb-color: GrayText;
      --cem-slider-tick-color: CanvasText;
    }
  }

  background-color: var(--cem-palette-comfort);
  color: var(--cem-palette-comfort-text);
}


/* Pending utility: D0 colors, D5 geometry, D7 continuous motion. */
.cem-pending {
    position: relative;
    background-image: linear-gradient(var(--cem-pending-angle),
                var(--cem-pending-color-1) 0% 5%, var(--cem-pending-color-2) 20% 30%,
                var(--cem-pending-color-1) 45% 55%, var(--cem-pending-color-2) 70% 80%,
                var(--cem-pending-color-1) 95% 100%);
            background-size: var(--cem-pending-tile-size) var(--cem-pending-tile-size);
            animation-name: cem-pending-shift;
            animation-duration: var(--cem-duration-pending-cycle);
            animation-timing-function: var(--cem-easing-uniform);
            animation-iteration-count: infinite;
}
/* The theme preview uses the same contrast contour as action. */
.cem-pending::before {
    content: '';
    display: var(--cem-action-outline-display);
    position: absolute;
    inset: 0;
    pointer-events: none;
    padding: var(--cem-stroke-pending);
    border-radius: inherit;
    background-image: var(--_cem-pending-image, var(--cem-action-pending-outline-image));
    background-size: var(--cem-pending-tile-size) var(--cem-pending-tile-size);
    mask: linear-gradient(currentColor 0 0) content-box, linear-gradient(currentColor 0 0);
    mask-composite: exclude;
    animation: cem-pending-shift var(--cem-duration-pending-cycle) var(--cem-easing-uniform) infinite;
}
@keyframes cem-pending-shift {
    from { background-position-x: 0px; }
    to { background-position-x: var(--cem-pending-tile-size); }
}
@media (prefers-reduced-motion: reduce) {
    .cem-pending, .cem-pending::before { animation: none; }
}
@media (forced-colors: active) {
    .cem-pending::before { display: none; }
    .cem-pending {
        background-image: none;
        animation: none;
        background-color: ButtonFace !important;
        color: ButtonText !important;
        outline: var(--cem-stroke-pending) solid ButtonText;
        outline-offset: calc(-1 * var(--cem-stroke-pending));
    }
}