/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* DO NOT EDIT this file directly, instead modify design-tokens.json
 * and run `npm run build` to see your changes. */

@import "../colors.css";

@layer tokens-foundation, tokens-prefers-contrast, tokens-forced-colors;

@layer tokens-foundation {
  :root,
  :host(.anonymous-content-host) {
    /** Background Color **/
    --background-color-box: var(--base) !important;
    --background-color-critical: var(--maroon) !important;
    --background-color-information: var(--sapphire) !important;
    --background-color-success: var(--teal) !important;
    --background-color-warning: var(--peach) !important;
    --promo-background-color: var(--background-color-information) !important;
    --table-row-background-color: var(--mantle) !important;

    /** Border **/
    --border-color-card: color-mix(
      in srgb,
      currentColor 10%,
      transparent
    ) !important;
    --border-color-interactive-hover: var(
      --border-color-interactive
    ) !important;
    --border-color-interactive-active: var(
      --border-color-interactive
    ) !important;
    --border-color-interactive-disabled: var(
      --border-color-interactive
    ) !important;
    --border-color-selected: var(--accent) !important;
    --border-color-transparent: transparent !important;
    --border-radius-circle: 9999px !important;
    --border-radius-xsmall: 2px !important;
    --border-radius-small: 4px !important;
    --border-radius-medium: 8px !important;
    --border-radius-large: 16px !important;
    --border-width: 0px !important;

    /** Box Shadow **/
    --box-shadow-card: var(--box-shadow-level-2) !important;
    --box-shadow-card-hover: var(--box-shadow-level-4) !important;
    --box-shadow-color-darker-layer-1: rgba(0, 0, 0, 0.15) !important;
    --box-shadow-color-darker-layer-2: rgba(0, 0, 0, 0.2) !important;
    --box-shadow-color-lighter-layer-1: rgba(0, 0, 0, 0.05) !important;
    --box-shadow-color-lighter-layer-2: rgba(0, 0, 0, 0.1) !important;
    --box-shadow-level-1:
      0 0 1px var(--box-shadow-color-darker-layer-1),
      0 1px 2px var(--box-shadow-color-darker-layer-2) !important;
    --box-shadow-level-2:
      0 0.25px 0.75px var(--box-shadow-color-lighter-layer-1),
      0 2px 6px var(--box-shadow-color-lighter-layer-2) !important;
    --box-shadow-level-3:
      0 0.375px 1.5px var(--box-shadow-color-lighter-layer-1),
      0 3px 12px var(--box-shadow-color-lighter-layer-2) !important;
    --box-shadow-level-4:
      0 0.5px 2px var(--box-shadow-color-lighter-layer-1),
      0 4px 16px var(--box-shadow-color-lighter-layer-2) !important;
    --box-shadow-popup: var(--box-shadow-level-3) !important;
    --box-shadow-tab: var(--box-shadow-level-1) !important;

    /** Button **/
    --button-background-color-disabled: var(
      --button-background-color
    ) !important;
    --button-background-color-destructive: var(--red) !important;
    --button-background-color-destructive-hover: color-mix(
      in srgb,
      var(--red),
      var(--text) 10%
    ) !important;
    --button-background-color-destructive-active: color-mix(
      in srgb,
      var(--red),
      var(--text) 20%
    ) !important;
    --button-background-color-destructive-disabled: var(
      --button-background-color-destructive
    ) !important;
    --button-background-color-destructive-selected: var(
      --button-background-color-destructive-active
    ) !important;
    --button-background-color-ghost: transparent !important;
    --button-background-color-ghost-hover: var(
      --button-background-color-hover
    ) !important;
    --button-background-color-ghost-active: var(
      --button-background-color-active
    ) !important;
    --button-background-color-ghost-disabled: var(
      --button-background-color-ghost
    ) !important;
    --button-background-color-ghost-selected: var(
      --button-background-color-ghost-active
    ) !important;
    --button-background-color-primary: var(--accent) !important;
    --button-background-color-primary-hover: color-mix(
      in srgb,
      var(--accent),
      var(--text) 10%
    ) !important;
    --button-background-color-primary-active: color-mix(
      in srgb,
      var(--accent),
      var(--text) 20%
    ) !important;
    --button-background-color-primary-disabled: var(
      --button-background-color-primary
    ) !important;
    --button-background-color-primary-selected: var(
      --button-background-color-primary-active
    ) !important;
    --button-background-color-selected: var(
      --button-background-color-active
    ) !important;
    --button-border: var(--border-width) solid var(--button-border-color) !important;
    --button-border-color: transparent !important;
    --button-border-color-hover: var(--button-border-color) !important;
    --button-border-color-active: var(--button-border-color) !important;
    --button-border-color-disabled: var(--button-border-color) !important;
    --button-border-color-destructive: transparent !important;
    --button-border-color-destructive-hover: var(
      --button-border-color-destructive
    ) !important;
    --button-border-color-destructive-active: var(
      --button-border-color-destructive
    ) !important;
    --button-border-color-destructive-disabled: var(
      --button-border-color-destructive
    ) !important;
    --button-border-color-destructive-selected: var(
      --button-border-color-destructive-active
    ) !important;
    --button-border-color-ghost: var(--button-border-color) !important;
    --button-border-color-ghost-hover: var(
      --button-border-color-hover
    ) !important;
    --button-border-color-ghost-active: var(
      --button-border-color-active
    ) !important;
    --button-border-color-ghost-disabled: var(
      --button-border-color-disabled
    ) !important;
    --button-border-color-ghost-selected: var(
      --button-border-color-ghost-active
    ) !important;
    --button-border-color-primary: transparent !important;
    --button-border-color-primary-hover: var(
      --button-border-color-primary
    ) !important;
    --button-border-color-primary-active: var(
      --button-border-color-primary
    ) !important;
    --button-border-color-primary-disabled: var(
      --button-border-color-primary
    ) !important;
    --button-border-color-primary-selected: var(
      --button-border-color-primary-active
    ) !important;
    --button-border-color-selected: var(
      --button-border-color-active
    ) !important;
    --button-border-radius: var(--border-radius-medium) !important;
    --button-font-size: var(--font-size-root) !important;
    --button-font-size-small: var(--font-size-small) !important;
    --button-font-weight: var(--font-weight-semibold) !important;
    --button-icon-fill: currentColor !important;
    --button-icon-stroke: var(--button-icon-fill) !important;
    --button-min-height: var(--size-item-large) !important;
    --button-min-height-small: var(--size-item-medium) !important;
    --button-opacity-disabled: 0.5 !important;
    --button-padding: var(--space-xsmall) var(--space-large) !important;
    --button-padding-icon: 0 !important;
    --button-size-icon: var(--button-min-height) !important;
    --button-size-icon-small: var(--button-min-height-small) !important;
    --button-text-color-hover: var(--button-text-color) !important;
    --button-text-color-active: var(--button-text-color) !important;
    --button-text-color-disabled: var(--button-text-color) !important;
    --button-text-color-destructive: var(--crust) !important;
    --button-text-color-destructive-hover: var(
      --button-text-color-destructive
    ) !important;
    --button-text-color-destructive-active: var(
      --button-text-color-destructive
    ) !important;
    --button-text-color-destructive-disabled: var(
      --button-text-color-destructive
    ) !important;
    --button-text-color-destructive-selected: var(
      --button-text-color-destructive-active
    ) !important;
    --button-text-color-ghost: inherit !important;
    --button-text-color-ghost-hover: inherit !important;
    --button-text-color-ghost-active: inherit !important;
    --button-text-color-ghost-disabled: inherit !important;
    --button-text-color-ghost-selected: var(
      --button-text-color-ghost-active
    ) !important;
    --button-text-color-primary-hover: var(
      --button-text-color-primary
    ) !important;
    --button-text-color-primary-active: var(
      --button-text-color-primary-hover
    ) !important;
    --button-text-color-primary-disabled: var(
      --button-text-color-primary
    ) !important;
    --button-text-color-primary-selected: var(
      --button-text-color-primary-active
    ) !important;
    --button-text-color-selected: var(--button-text-color-active) !important;

    /** Checkbox **/
    --checkbox-margin-inline: var(--space-small) !important;
    --checkbox-size: var(--size-item-small) !important;

    /** Focus Outline **/
    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color) !important;
    --focus-outline-color: var(--accent) !important;
    --focus-outline-inset: calc(-1 * var(--focus-outline-width)) !important;
    --focus-outline-offset: 2px !important;
    --focus-outline-width: 2px !important;

    /** Font Weight **/
    --font-weight: normal !important;
    --font-weight-bold: 700 !important;
    --font-weight-semibold: 600 !important;

    /** Heading **/
    --heading-font-size-medium: var(--font-size-large) !important;
    --heading-font-size-large: var(--font-size-xlarge) !important;
    --heading-font-size-xlarge: var(--font-size-xxlarge) !important;
    --heading-font-weight: var(--font-weight-semibold) !important;

    /** Icon **/
    --icon-color: var(--subtext1) !important;
    --icon-color-critical: var(--red) !important;
    --icon-color-information: var(--sky) !important;
    --icon-color-success: var(--green) !important;
    --icon-color-warning: var(--yellow) !important;
    --icon-size: var(--icon-size-small) !important;
    --icon-size-xsmall: var(--size-item-xsmall) !important;
    --icon-size-small: var(--size-item-small) !important;
    --icon-size-medium: 20px !important;
    --icon-size-large: var(--size-item-medium) !important;
    --icon-size-xlarge: var(--size-item-large) !important;

    /** Input - Text **/
    --input-text-min-height: var(--button-min-height) !important;

    /** Link **/
    --link-focus-outline-offset: 1px !important;

    /** Outline Color **/
    --outline-color-error: var(--red) !important;

    /** Size **/
    --size-item-xsmall: 12px !important;
    --size-item-small: 16px !important;
    --size-item-medium: 24px !important;
    --size-item-large: 32px !important;
    --size-item-xlarge: 48px !important;

    /** Space **/
    --space-xxsmall: calc(0.5 * var(--space-xsmall)) !important;
    --space-xsmall: 0.267rem !important;
    --space-small: calc(2 * var(--space-xsmall)) !important;
    --space-medium: calc(3 * var(--space-xsmall)) !important;
    --space-large: calc(4 * var(--space-xsmall)) !important;
    --space-xlarge: calc(6 * var(--space-xsmall)) !important;
    --space-xxlarge: calc(8 * var(--space-xsmall)) !important;

    /** Text **/
    --text-color-disabled: color-mix(
      in srgb,
      currentColor 40%,
      transparent
    ) !important;
    --text-color-deemphasized: color-mix(
      in srgb,
      currentColor 69%,
      transparent
    ) !important;
    --text-color-error: var(--red) !important;
  }
}

@layer tokens-prefers-contrast {
  @media (prefers-contrast) {
    :root,
    :host(.anonymous-content-host) {
      /** Attention Dot **/
      --attention-dot-color: var(--accent) !important;

      /** Background Color **/
      --background-color-box: var(--base) !important;
      --background-color-box-info: var(--base) !important;
      --background-color-canvas: var(--base) !important;
      --background-color-critical: var(--base) !important;
      --background-color-information: var(--base) !important;
      --background-color-success: var(--base) !important;
      --background-color-warning: var(--base) !important;

      /** Border **/
      --border-color: var(--text) !important;
      --border-color-card: color-mix(
        in srgb,
        currentColor 41%,
        transparent
      ) !important;
      --border-color-deemphasized: currentColor !important;
      --border-color-interactive: var(--text) !important;
      --border-color-transparent: var(--text) !important;

      /** Button **/
      --button-border-color: var(--button-text-color) !important;
      --button-text-color-ghost-hover: var(
        --button-text-color-hover
      ) !important;
      --button-text-color-ghost-active: var(
        --button-text-color-active
      ) !important;

      /** Icon **/
      --icon-color: var(--text) !important;
      --icon-color-critical: var(--icon-color) !important;
      --icon-color-information: var(--icon-color) !important;
      --icon-color-success: var(--icon-color) !important;
      --icon-color-warning: var(--icon-color) !important;

      /** Outline Color **/
      --outline-color-error: var(--border-color) !important;

      /** Text **/
      --text-color: var(--text) !important;
      --text-color-deemphasized: inherit !important;
      --text-color-error: inherit !important;
    }
  }
}

@layer tokens-forced-colors {
  @media (forced-colors) {
    :root,
    :host(.anonymous-content-host) {
      /** Background Color **/
      --table-row-background-color-alternate: var(--base) !important;

      /** Border **/
      --border-color-card: var(--text) !important;
      --border-color-deemphasized: var(--text) !important;
      --border-color-interactive: var(--text) !important;
      --border-color-interactive-hover: var(--accent) !important;
      --border-color-interactive-active: var(--text) !important;
      --border-color-interactive-disabled: var(--subtext0) !important;
      --border-color-selected: var(--accent) !important;

      /** Button **/
      --button-background-color: var(--surface0) !important;
      --button-background-color-hover: var(--crust) !important;
      --button-background-color-active: var(--crust) !important;
      --button-background-color-disabled: var(--surface0) !important;
      --button-background-color-destructive: var(
        --button-background-color-primary
      ) !important;
      --button-background-color-destructive-hover: var(
        --button-background-color-primary-hover
      ) !important;
      --button-background-color-destructive-active: var(
        --button-background-color-primary-active
      ) !important;
      --button-background-color-destructive-disabled: var(
        --button-background-color-primary-disabled
      ) !important;
      --button-background-color-primary-disabled: var(
        --button-text-color-disabled
      ) !important;
      --button-border-color: var(--border-color-interactive) !important;
      --button-border-color-hover: var(
        --border-color-interactive-hover
      ) !important;
      --button-border-color-active: var(
        --border-color-interactive-active
      ) !important;
      --button-border-color-disabled: var(
        --border-color-interactive-disabled
      ) !important;
      --button-border-color-destructive: var(
        --button-border-color-primary
      ) !important;
      --button-border-color-destructive-hover: var(
        --button-border-color-primary-hover
      ) !important;
      --button-border-color-destructive-active: var(
        --button-border-color-primary-active
      ) !important;
      --button-border-color-destructive-disabled: var(
        --button-border-color-primary-disabled
      ) !important;
      --button-border-color-primary: var(--surface0) !important;
      --button-border-color-primary-hover: var(--crust) !important;
      --button-border-color-primary-active: var(--text) !important;
      --button-opacity-disabled: 1 !important;
      --button-text-color: var(--text) !important;
      --button-text-color-hover: var(--accent) !important;
      --button-text-color-active: var(--accent) !important;
      --button-text-color-disabled: var(--subtext0) !important;
      --button-text-color-destructive: var(
        --button-text-color-primary
      ) !important;
      --button-text-color-destructive-hover: var(
        --button-text-color-primary-hover
      ) !important;
      --button-text-color-destructive-active: var(
        --button-text-color-primary-active
      ) !important;
      --button-text-color-destructive-disabled: var(
        --button-text-color-primary-disabled
      ) !important;
      --button-text-color-ghost-hover: var(
        --button-text-color-hover
      ) !important;
      --button-text-color-ghost-active: var(
        --button-text-color-active
      ) !important;
      --button-text-color-primary: var(--surface0) !important;
      --button-text-color-primary-hover: var(--crust) !important;

      /** Color **/
      --color-accent-primary: var(--text) !important;
      --color-accent-primary-hover: var(--accent) !important;
      --color-accent-primary-active: var(
        --color-accent-primary-hover
      ) !important;
      --color-accent-primary-selected: var(--accent) !important;

      /** Focus Outline **/
      --focus-outline-color: var(--text) !important;

      /** Link **/
      --link-color: var(--blue) !important;
      --link-color-hover: var(--blue) !important;
      --link-color-active: var(--red) !important;
      --link-color-visited: var(--link-color) !important;

      /** Text **/
      --text-color-disabled: var(--subtext0) !important;
      --text-color-accent-primary-selected: var(--crust) !important;
    }
  }
}