/*
  stores all configurable variables used for styling

  colors
    light mode
    dark mode
    colors based on the choosen theme
  buttons and inputs shape
*/



/* colors
============================================================================ */

/* colors: light mode
------------------------------ */
:root {
    /* general content */
    --pos-color-light-content-background: rgb(var(--base));
    --pos-color-light-content-foreground: rgb(var(--normal));
    --pos-color-light-content-inverted-background: rgb(var(--pos-color-content-foreground));
    --pos-color-light-content-inverted-foreground: rgb(var(--inverted));

    --pos-color-light-content-supplementary: rgb(var(--supplementary));

    --pos-color-light-focused: #ca1591; /* outline for focused elements */
    --pos-color-light-highlighted: var(--pos-color-light-navigation-hover); /* elements that needs user attention */

    /* interactive elements */
    --pos-color-light-interactive-text: rgb(var(--interactive-text));
    --pos-color-light-interactive-hover: rgb(var(--interactive-hover));
    --pos-color-light-interactive-active: rgb(var(--interactive-hover));
    --pos-color-light-interactive-disabled: rgb(var(--interactive-disabled));

    /* colorful elements */
    --pos-color-light-colorful-background: rgb(var(--colorful));
    --pos-color-light-colorful-foreground: #fff;
    --pos-color-light-colorful-hover: rgb(var(--colorful-hover));

    /* content selection */
    --pos-color-light-selection-background: #ca1591;
    --pos-color-light-selection-foreground: #fff;

    /* frames */
    --pos-color-light-divider: rgb(var(--divider));

    /* buttons */
    --pos-color-light-button-default-background: rgb(var(--button-primary));
    --pos-color-light-button-default-foreground: rgb(var(--button-primary-foreground));
    --pos-color-light-button-default-frame: rgb(var(--button-primary-stroke));
    --pos-color-light-button-default-hover-background: rgb(var(--button-primary-hover));
    --pos-color-light-button-default-hover-foreground: rgb(var(--button-primary-foreground-hover));
    --pos-color-light-button-default-hover-frame: rgb(var(--button-primary-stroke-hover));
    --pos-color-light-button-default-disabled-background: rgba(var(--button-primary), .5);
    --pos-color-light-button-default-disabled-foreground: #ffffff;
    --pos-color-light-button-default-disabled-frame: rgba(var(--button-primary), .5);

    --pos-color-light-button-secondary-background: rgb(var(--button-secondary));
    --pos-color-light-button-secondary-foreground: rgb(var(--button-secondary-foreground));
    --pos-color-light-button-secondary-frame: rgb(var(--button-secondary-stroke));
    --pos-color-light-button-secondary-hover-background: rgb(var(--button-secondary-hover));
    --pos-color-light-button-secondary-hover-foreground: rgb(var(--button-secondary-foreground-hover));
    --pos-color-light-button-secondary-hover-frame: rgb(var(--button-secondary-stroke-hover));
    --pos-color-light-button-secondary-disabled-background: rgba(var(--button-secondary), .5);
    --pos-color-light-button-secondary-disabled-foreground: #82abdd;
    --pos-color-light-button-secondary-disabled-frame: rgba(var(--button-secondary), .5);

    /* links and interactive elements */
    --pos-color-light-interactive-text: var(--interactive-text);
    --pos-color-light-interactive-hover: var(--interactive-hover);

    --pos-color-light-navigation-hover: #fdd9bd;

    /* inputs */
    --pos-color-light-input-default-placeholder: rgb(var(--pos-color-content-supplementary));
    --pos-color-light-input-default-background: rgb(var(--input));
    --pos-color-light-input-default-foreground: rgb(var(--input-foreground));
    --pos-color-light-input-default-border: rgb(var(--input-border));
    --pos-color-light-input-default-hover-background: rgb(var(--input-background));
    --pos-color-light-input-default-hover-foreground: rgb(var(--input-foreground));
    --pos-color-light-input-default-hover-border: rgb(var(--input-border));
    --pos-color-light-input-default-focus-background: rgb(var(--input));
    --pos-color-light-input-default-focus-foreground: rgb(var(--input-foreground));
    --pos-color-light-input-default-focus-border: rgb(var(--pos-color-input-default-border));

    /* utility */
    --pos-color-light-important: rgb(var(--important));
    --pos-color-light-important-hover: rgb(var(--important-hover));
    --pos-color-light-important-disabled: rgb(var(--important-disabled));
    --pos-color-light-confirmation: rgb(var(--confirmation));
    --pos-color-light-confirmation-hover: rgb(var(--confirmation-hover));
    --pos-color-light-confirmation-disabled: rgb(var(--confirmation-disabled));
    --pos-color-light-warning: rgb(var(--warning));
    --pos-color-light-warning-hover: rgb(var(--warning-hover));
    --pos-color-light-warning-disabled: rgb(var(--warning-disabled));
  }

  /* colors: dark mode
  ------------------------------ */
  :root {
    /* general content */
    --pos-color-dark-content-background: rgb(var(--base));
    --pos-color-dark-content-foreground: rgb(var(--normal));
    --pos-color-dark-content-inverted-background: rgb(var(--pos-color-content-foreground));
    --pos-color-dark-content-inverted-foreground: rgb(var(--inverted));

    --pos-color-dark-content-supplementary: rgb(var(--supplementary));

    --pos-color-dark-focused: #ca1591; /* outline for focused elements */
    --pos-color-dark-highlighted: var(--pos-color-dark-navigation-hover); /* elements that needs user attention */

    /* interactive elements */
    --pos-color-dark-interactive-text: rgb(var(--interactive-text));
    --pos-color-dark-interactive-hover: rgb(var(--interactive-hover));
    --pos-color-dark-interactive-active: rgb(var(--interactive-hover));
    --pos-color-dark-interactive-disabled: rgb(var(--interactive-disabled));

    /* colorful elements */
    --pos-color-dark-colorful-background: rgb(var(--colorful));
    --pos-color-dark-colorful-foreground: #fff;
    --pos-color-dark-colorful-hover: rgb(var(--colorful-hover));

    /* content selection */
    --pos-color-dark-selection-background: #ca1591;
    --pos-color-dark-selection-foreground: #fff;

    /* frames */
    --pos-color-dark-divider: rgb(var(--divider));

    /* buttons */
    --pos-color-dark-button-default-background: rgb(var(--button-primary));
    --pos-color-dark-button-default-foreground: rgb(var(--button-primary-foreground));
    --pos-color-dark-button-default-frame: rgb(var(--button-primary-stroke));
    --pos-color-dark-button-default-hover-background: rgb(var(--button-primary-hover));
    --pos-color-dark-button-default-hover-foreground: rgb(var(--button-primary-foreground-hover));
    --pos-color-dark-button-default-hover-frame: rgb(var(--button-primary-stroke-hover));
    --pos-color-dark-button-default-disabled-background: rgba(var(--button-primary), .5);
    --pos-color-dark-button-default-disabled-foreground: #ffffff;
    --pos-color-dark-button-default-disabled-frame: rgba(var(--button-primary), .5);

    --pos-color-dark-button-secondary-background: rgb(var(--button-secondary));
    --pos-color-dark-button-secondary-foreground: rgb(var(--button-secondary-foreground));
    --pos-color-dark-button-secondary-frame: rgb(var(--button-secondary-stroke));
    --pos-color-dark-button-secondary-hover-background: rgb(var(--button-secondary-hover));
    --pos-color-dark-button-secondary-hover-foreground: rgb(var(--button-secondary-foreground-hover));
    --pos-color-dark-button-secondary-hover-frame: rgb(var(--button-secondary-stroke-hover));
    --pos-color-dark-button-secondary-disabled-background: rgba(var(--button-secondary), .5);
    --pos-color-dark-button-secondary-disabled-foreground: #82abdd;
    --pos-color-dark-button-secondary-disabled-frame: rgba(var(--button-secondary), .5);

    /* links and interactive elements */
    --pos-color-dark-interactive-text: var(--interactive-text);
    --pos-color-dark-interactive-hover: var(--interactive-hover);

    --pos-color-dark-navigation-hover: #fdd9bd;

    /* inputs */
    --pos-color-dark-input-default-placeholder: rgb(var(--pos-color-content-supplementary));
    --pos-color-dark-input-default-background: rgb(var(--input));
    --pos-color-dark-input-default-foreground: rgb(var(--input-foreground));
    --pos-color-dark-input-default-border: rgb(var(--input-border));
    --pos-color-dark-input-default-hover-background: rgb(var(--input-background));
    --pos-color-dark-input-default-hover-foreground: rgb(var(--input-foreground));
    --pos-color-dark-input-default-hover-border: rgb(var(--input-border));
    --pos-color-dark-input-default-focus-background: rgb(var(--input));
    --pos-color-dark-input-default-focus-foreground: rgb(var(--input-foreground));
    --pos-color-dark-input-default-focus-border: rgb(var(--pos-color-input-default-border));

    /* utility */
    --pos-color-dark-important: rgb(var(--important));
    --pos-color-dark-important-hover: rgb(var(--important-hover));
    --pos-color-dark-important-disabled: rgb(var(--important-disabled));
    --pos-color-dark-confirmation: rgb(var(--confirmation));
    --pos-color-dark-confirmation-hover: rgb(var(--confirmation-hover));
    --pos-color-dark-confirmation-disabled: rgb(var(--confirmation-disabled));
    --pos-color-dark-warning: rgb(var(--warning));
    --pos-color-dark-warning-hover: rgb(var(--warning-hover));
    --pos-color-dark-warning-disabled: rgb(var(--warning-disabled));
  }

  /* colors based on the theme choosen
  ------------------------------ */
  :root,
  :root.pos-theme-light {
    /* general content */
    --pos-color-content-background: var(--pos-color-light-content-background);
    --pos-color-content-foreground: var(--pos-color-light-content-foreground);
    --pos-color-content-inverted-background: var(--pos-color-light-content-inverted-background);
    --pos-color-content-inverted-foreground: var(--pos-color-light-content-inverted-foreground);

    --pos-color-content-supplementary: var(--pos-color-light-content-supplementary);

    --pos-color-focused: var(--pos-color-light-focused);
    --pos-color-highlighted: var(--pos-color-light-highlighted);

    /* interactive elements */
    --pos-color-interactive-text: var(--pos-color-light-interactive-text);
    --pos-color-interactive-hover: var(--pos-color-light-interactive-hover);
    --pos-color-interactive-active: var(--pos-color-light-interactive-active);
    --pos-color-interactive-disabled: var(--pos-color-light-interactive-disabled);

    /* colorful elements */
    --pos-color-colorful-background: var(--pos-color-light-colorful-background);
    --pos-color-colorful-foreground: var(--pos-color-light-colorful-foreground);
    --pos-color-colorful-hover: var(--pos-color-light-colorful-hover);

    /* content selection */
    --pos-color-selection-background: var(--pos-color-light-selection-background);
    --pos-color-selection-foreground: var(--pos-color-light-selection-foreground);

    /* frames */
    --pos-color-divider: var(--pos-color-light-divider);

    /* buttons */
    --pos-color-button-default-background: var(--pos-color-light-button-default-background);
    --pos-color-button-default-foreground: var(--pos-color-light-button-default-foreground);
    --pos-color-button-default-frame: var(--pos-color-light-button-default-frame);
    --pos-color-button-default-hover-background: var(--pos-color-light-button-default-hover-background);
    --pos-color-button-default-hover-foreground: var(--pos-color-light-button-default-hover-foreground);
    --pos-color-button-default-hover-frame: var(--pos-color-light-button-default-hover-frame);
    --pos-color-button-default-disabled-background: var(--pos-color-light-button-default-disabled-background);
    --pos-color-button-default-disabled-foreground: var(--pos-color-light-button-default-disabled-foreground);
    --pos-color-button-default-disabled-frame: var(--pos-color-light-button-default-disabled-frame);

    --pos-color-button-secondary-background: var(--pos-color-light-button-secondary-background);
    --pos-color-button-secondary-foreground: var(--pos-color-light-button-secondary-foreground);
    --pos-color-button-secondary-frame: var(--pos-color-light-button-secondary-frame);
    --pos-color-button-secondary-hover-background: var(--pos-color-light-button-secondary-hover-background);
    --pos-color-button-secondary-hover-foreground: var(--pos-color-light-button-secondary-hover-foreground);
    --pos-color-button-secondary-hover-frame: var(--pos-color-light-button-secondary-hover-frame);
    --pos-color-button-secondary-disabled-background: var(--pos-color-light-button-secondary-disabled-background);
    --pos-color-button-secondary-disabled-foreground: var(--pos-color-light-button-secondary-disabled-foreground);
    --pos-color-button-secondary-disabled-frame: var(--pos-color-light-button-secondary-disabled-frame);

    /* links and interactive elements */
    --pos-color-interactive-text: var(--pos-color-light-interactive-text);
    --pos-color-interactive-hover: var(--pos-color-light-interactive-hover);

    --pos-color-navigation-hover: var(--pos-color-light-navigation-hover);

    /* inputs */
    --pos-color-input-default-placeholder: var(--pos-color-light-input-default-placeholder);
    --pos-color-input-default-background: var(--pos-color-light-input-default-background);
    --pos-color-input-default-foreground: var(--pos-color-light-input-default-foreground);
    --pos-color-input-default-border: var(--pos-color-light-input-default-border);
    --pos-color-input-default-hover-background: var(--pos-color-light-input-default-hover-background);
    --pos-color-input-default-hover-foreground: var(--pos-color-light-input-default-hover-foreground);
    --pos-color-input-default-hover-border: var(--pos-color-light-input-default-hover-border);
    --pos-color-input-default-focus-background: var(--pos-color-light-input-default-focus-background);
    --pos-color-input-default-focus-foreground: var(--pos-color-light-input-default-focus-foreground);
    --pos-color-input-default-focus-border: var(--pos-color-light-input-default-focus-border);

    /* utility */
    --pos-color-important: var(--pos-color-light-important);
    --pos-color-important-hover: var(--pos-color-light-important-hover);
    --pos-color-important-disabled: var(--pos-color-light-important);
    --pos-color-confirmation: var(--pos-color-light-confirmation);
    --pos-color-confirmation-hover: var(--pos-color-light-confirmation);
    --pos-color-confirmation-disabled: var(--pos-color-light-confirmation-disabled);
    --pos-color-warning: var(--pos-color-light-warning);
    --pos-color-warning-hover: var(--pos-color-light-warning-hover);
    --pos-color-warning-disabled: var(--pos-color-light-warning-disabled);
  }

  :root.pos-theme-dark {
    /* general content */
    --pos-color-content-background: var(--pos-color-dark-content-background);
    --pos-color-content-foreground: var(--pos-color-dark-content-foreground);
    --pos-color-content-inverted-background: var(--pos-color-dark-content-inverted-background);
    --pos-color-content-inverted-foreground: var(--pos-color-dark-content-inverted-foreground);

    --pos-color-content-supplementary: var(--pos-color-dark-content-supplementary);

    --pos-color-focused: var(--pos-color-dark-focused);
    --pos-color-highlighted: var(--pos-color-dark-highlighted);

    /* interactive elements */
    --pos-color-interactive-text: var(--pos-color-dark-interactive-text);
    --pos-color-interactive-hover: var(--pos-color-dark-interactive-hover);
    --pos-color-interactive-active: var(--pos-color-dark-interactive-active);
    --pos-color-interactive-disabled: var(--pos-color-dark-interactive-disabled);

    /* colorful elements */
    --pos-color-colorful-background: var(--pos-color-dark-colorful-background);
    --pos-color-colorful-foreground: var(--pos-color-dark-colorful-foreground);
    --pos-color-colorful-hover: var(--pos-color-dark-colorful-hover);

    /* content selection */
    --pos-color-selection-background: var(--pos-color-dark-selection-background);
    --pos-color-selection-foreground: var(--pos-color-dark-selection-foreground);

    /* frames */
    --pos-color-divider: var(--pos-color-dark-divider);

    /* buttons */
    --pos-color-button-default-background: var(--pos-color-dark-button-default-background);
    --pos-color-button-default-foreground: var(--pos-color-dark-button-default-foreground);
    --pos-color-button-default-frame: var(--pos-color-dark-button-default-frame);
    --pos-color-button-default-hover-background: var(--pos-color-dark-button-default-hover-background);
    --pos-color-button-default-hover-foreground: var(--pos-color-dark-button-default-hover-foreground);
    --pos-color-button-default-hover-frame: var(--pos-color-dark-button-default-hover-frame);
    --pos-color-button-default-disabled-background: var(--pos-color-dark-button-default-disabled-background);
    --pos-color-button-default-disabled-foreground: var(--pos-color-dark-button-default-disabled-foreground);
    --pos-color-button-default-disabled-frame: var(--pos-color-dark-button-default-disabled-frame);

    --pos-color-button-secondary-background: var(--pos-color-dark-button-secondary-background);
    --pos-color-button-secondary-foreground: var(--pos-color-dark-button-secondary-foreground);
    --pos-color-button-secondary-frame: var(--pos-color-dark-button-secondary-frame);
    --pos-color-button-secondary-hover-background: var(--pos-color-dark-button-secondary-hover-background);
    --pos-color-button-secondary-hover-foreground: var(--pos-color-dark-button-secondary-hover-foreground);
    --pos-color-button-secondary-hover-frame: var(--pos-color-dark-button-secondary-hover-frame);
    --pos-color-button-secondary-disabled-background: var(--pos-color-dark-button-secondary-disabled-background);
    --pos-color-button-secondary-disabled-foreground: var(--pos-color-dark-button-secondary-disabled-foreground);
    --pos-color-button-secondary-disabled-frame: var(--pos-color-dark-button-secondary-disabled-frame);

    /* links and interactive elements */
    --pos-color-interactive-text: var(--pos-color-dark-interactive-text);
    --pos-color-interactive-hover: var(--pos-color-dark-interactive-hover);

    --pos-color-navigation-hover: var(--pos-color-dark-navigation-hover);

    /* inputs */
    --pos-color-input-default-placeholder: var(--pos-color-dark-input-default-placeholder);
    --pos-color-input-default-background: var(--pos-color-dark-input-default-background);
    --pos-color-input-default-foreground: var(--pos-color-dark-input-default-foreground);
    --pos-color-input-default-border: var(--pos-color-dark-input-default-border);
    --pos-color-input-default-hover-background: var(--pos-color-dark-input-default-hover-background);
    --pos-color-input-default-hover-foreground: var(--pos-color-dark-input-default-hover-foreground);
    --pos-color-input-default-hover-border: var(--pos-color-dark-input-default-hover-border);
    --pos-color-input-default-focus-background: var(--pos-color-dark-input-default-focus-background);
    --pos-color-input-default-focus-foreground: var(--pos-color-dark-input-default-focus-foreground);
    --pos-color-input-default-focus-border: var(--pos-color-dark-input-default-focus-border);

    /* utility */
    --pos-color-important: var(--pos-color-dark-important);
    --pos-color-important-hover: var(--pos-color-dark-important-hover);
    --pos-color-important-disabled: var(--pos-color-dark-important-disabled);
    --pos-color-confirmation: var(--pos-color-dark-confirmation);
    --pos-color-confirmation-hover: var(--pos-color-dark-confirmation);
    --pos-color-confirmation-disabled: var(--pos-color-dark-confirmation-disabled);
    --pos-color-warning: var(--pos-color-dark-warning);
    --pos-color-warning-hover: var(--pos-color-dark-warning-hover);
    --pos-color-warning-disabled: var(--pos-color-dark-warning-disabled);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      /* general content */
      --pos-color-content-background: var(--pos-color-dark-content-background);
      --pos-color-content-foreground: var(--pos-color-dark-content-foreground);
      --pos-color-content-inverted-background: var(--pos-color-dark-content-inverted-background);
      --pos-color-content-inverted-foreground: var(--pos-color-dark-content-inverted-foreground);

      --pos-color-content-supplementary: var(--pos-color-dark-content-supplementary);

      --pos-color-focused: var(--pos-color-dark-focused);
      --pos-color-highlighted: var(--pos-color-dark-highlighted);

      /* interactive elements */
      --pos-color-interactive-text: var(--pos-color-dark-interactive-text);
      --pos-color-interactive-hover: var(--pos-color-dark-interactive-hover);
      --pos-color-interactive-active: var(--pos-color-dark-interactive-active);
      --pos-color-interactive-disabled: var(--pos-color-dark-interactive-disabled);

      /* colorful elements */
      --pos-color-colorful-background: var(--pos-color-dark-colorful-background);
      --pos-color-colorful-foreground: var(--pos-color-dark-colorful-foreground);
      --pos-color-colorful-hover: var(--pos-color-dark-colorful-hover);

      /* content selection */
      --pos-color-selection-background: var(--pos-color-dark-selection-background);
      --pos-color-selection-foreground: var(--pos-color-dark-selection-foreground);

      /* frames */
      --pos-color-divider: var(--pos-color-dark-divider);

      /* buttons */
      --pos-color-button-default-background: var(--pos-color-dark-button-default-background);
      --pos-color-button-default-foreground: var(--pos-color-dark-button-default-foreground);
      --pos-color-button-default-frame: var(--pos-color-dark-button-default-frame);
      --pos-color-button-default-hover-background: var(--pos-color-dark-button-default-hover-background);
      --pos-color-button-default-hover-foreground: var(--pos-color-dark-button-default-hover-foreground);
      --pos-color-button-default-hover-frame: var(--pos-color-dark-button-default-hover-frame);
      --pos-color-button-default-disabled-background: var(--pos-color-dark-button-default-disabled-background);
      --pos-color-button-default-disabled-foreground: var(--pos-color-dark-button-default-disabled-foreground);
      --pos-color-button-default-disabled-frame: var(--pos-color-dark-button-default-disabled-frame);

      --pos-color-button-secondary-background: var(--pos-color-dark-button-secondary-background);
      --pos-color-button-secondary-foreground: var(--pos-color-dark-button-secondary-foreground);
      --pos-color-button-secondary-frame: var(--pos-color-dark-button-secondary-frame);
      --pos-color-button-secondary-hover-background: var(--pos-color-dark-button-secondary-hover-background);
      --pos-color-button-secondary-hover-foreground: var(--pos-color-dark-button-secondary-hover-foreground);
      --pos-color-button-secondary-hover-frame: var(--pos-color-dark-button-secondary-hover-frame);
      --pos-color-button-secondary-disabled-background: var(--pos-color-dark-button-secondary-disabled-background);
      --pos-color-button-secondary-disabled-foreground: var(--pos-color-dark-button-secondary-disabled-foreground);
      --pos-color-button-secondary-disabled-frame: var(--pos-color-dark-button-secondary-disabled-frame);

      /* links and interactive elements */
      --pos-color-interactive-text: var(--pos-color-dark-interactive-text);
      --pos-color-interactive-hover: var(--pos-color-dark-interactive-hover);

      --pos-color-navigation-hover: var(--pos-color-dark-navigation-hover);

      /* inputs */
      --pos-color-input-default-placeholder: var(--pos-color-dark-input-default-placeholder);
      --pos-color-input-default-background: var(--pos-color-dark-input-default-background);
      --pos-color-input-default-foreground: var(--pos-color-dark-input-default-foreground);
      --pos-color-input-default-border: var(--pos-color-dark-input-default-border);
      --pos-color-input-default-hover-background: var(--pos-color-dark-input-default-hover-background);
      --pos-color-input-default-hover-foreground: var(--pos-color-dark-input-default-hover-foreground);
      --pos-color-input-default-hover-border: var(--pos-color-dark-input-default-hover-border);
      --pos-color-input-default-focus-background: var(--pos-color-dark-input-default-focus-background);
      --pos-color-input-default-focus-foreground: var(--pos-color-dark-input-default-focus-foreground);
      --pos-color-input-default-focus-border: var(--pos-color-dark-input-default-focus-border);

      /* utility */
      --pos-color-important: var(--pos-color-dark-important);
      --pos-color-important-hover: var(--pos-color-dark-important-hover);
      --pos-color-important-disabled: var(--pos-color-dark-important-disabled);
      --pos-color-confirmation: var(--pos-color-dark-confirmation);
      --pos-color-confirmation-hover: var(--pos-color-dark-confirmation);
      --pos-color-confirmation-disabled: var(--pos-color-dark-confirmation-disabled);
      --pos-color-warning: var(--pos-color-dark-warning);
      --pos-color-warning-hover: var(--pos-color-dark-warning-hover);
      --pos-color-warning-disabled: var(--pos-color-dark-warning-disabled);
    }
  }


/* buttons and inputs shape
============================================================================ */
:root {
  --pos-padding-input: 12px;

  --pos-height-input: 44px;

  --pos-border-input: 1px;

  --pos-radius-input: 0;
  --pos-radius-button: 22px;
}