/* ----------------------------------------- */
/* FPS display                               */
/* ----------------------------------------- */

#fps[data-theme] {
  @include dui-app;
}

/* ----------------------------------------- */
/* Tooltip                                   */
/* ----------------------------------------- */

#tooltip[data-theme] {
  background: var(--app-background);
  border: 1px solid var(--color-primary-1);
  box-shadow: 0px 0px 6px var(--color-primary-2), 0px 2px 8px 1px var(--color-primary-3);
  backdrop-filter: blur(5px);
  border-radius: var(--border-radius);
  -webkit-backdrop-filter: blur(5px);
  font-size: var(--font-size-16);
  line-height: var(--font-size-16);
  text-shadow: 0px 1px 2px black;
  padding: 0.4em 0.6em;
}

/* ----------------------------------------- */
/* Players                                   */
/* ----------------------------------------- */

#players[data-theme] {
  @include dui-app;

  h3 {
    cursor: pointer;
    @include quick-transition;
    color: var(--text-color-3);

    &:hover {
      color: var(--text-color-1);
      text-shadow: 0px 0px 8px var(--color-shadow-highlight);
    }
  }
}

/* ----------------------------------------- */
/* Context menu                              */
/* ----------------------------------------- */

[data-theme] #context-menu {
  @include dui-tooltip;
  li.context-item {
    &:first-child {
      border-top-left-radius: var(--border-radius);
      border-top-right-radius: var(--border-radius);
    }
    &:last-child {
      border-bottom-left-radius: var(--border-radius);
      border-bottom-right-radius: var(--border-radius);
    }
    &:hover {
      box-shadow: 0px 0px 0px 1px var(--color-primary-1);
      background: var(--color-primary-2);
      text-shadow: 0px 1px 2px black;
    }
  }
}

/* ----------------------------------------- */
/* Map v1 styling to v2 values               */
/* ----------------------------------------- */

[data-theme] {
  --color-shadow-primary: transparent;
  --color-shadow-highlight: transparent;
  // --color-bg-option: var(--dui-input-background); // select dropdown, can't contain transparency
}

/* ----------------------------------------- */
/* Map v2 styling to Dorako UI values        */
/* ----------------------------------------- */
[data-theme] {
  input[type="checkbox"] {
    --checkbox-checked-color: var(--accent-color);
    // --checkbox-disabled-color: var(--color-cool-4);
    // --checkbox-background-color: var(--color-cool-4);
  }
}

/* ----------------------------------------- */
/* limited scope specific                    */
/* ----------------------------------------- */

[data-theme][data-dorako-ui-scope="limited"][data-color-scheme="dark"] {
  --rarity-common: #e1d8cf;
  --rarity-uncommon: #c45500;
  --rarity-rare: #5362ff;
  --rarity-unique: #e127e1;
  --ornamentation: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' overflow='scroll'%3E%3Cstyle%3E.st1{stroke:wheat;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='1'%3E%3Cpath class='st1' d='M.5 20v-7'/%3E%3Cpath class='st2' d='M13 20v-7'/%3E%3Cpath class='st1' d='M13 .5h7'/%3E%3Cpath class='st2' d='M13 13h7'/%3E%3Cpath class='st1' d='M32.5 13v7'/%3E%3Cpath class='st2' d='M20 13v7'/%3E%3Cpath class='st1' d='M20 32.5h-7'/%3E%3Cpath class='st2' d='M20 20h-7'/%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zm3.1 3.1h3.1v3.1H3.6zm3.2 0h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zm0 0H.5V13M13 .5H6.8v3.1M29.4.5h3.1v3.1h-3.1zm-3.1 3.1h3.1v3.1h-3.1zm0 3.2h3.1v3.1h-3.1zm-3.2-3.2h3.1v3.1h-3.1zm3.2 0V.5H20M32.5 13V6.8h-3.1M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zm-3.2 0h3.1v3.1h-3.1zm3.2-3.2h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zm3.1-3.1h3.1v3.1H3.6zm0-3.2h3.1v3.1H3.6zm3.2 3.2h3.1v3.1H6.8zM6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- */
/* Generalized style choices (inclusive of limited scope)        */
/* ------------------------------------------------------------- */

[data-theme][data-color-scheme="dark"] {
  // Dark theme
  --rarity-common: #e1d8cf;
  --rarity-uncommon: #c45500;
  --rarity-rare: #5362ff;
  --rarity-unique: #e127e1;
  --color-rarity-common: #e1d8cf;
  --color-rarity-uncommon: #c45500;
  --color-rarity-rare: #5362ff;
  --color-rarity-unique: #e127e1;
  --ornamentation: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' overflow='scroll'%3E%3Cstyle%3E.st1{stroke:wheat;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='1'%3E%3Cpath class='st1' d='M.5 20v-7'/%3E%3Cpath class='st2' d='M13 20v-7'/%3E%3Cpath class='st1' d='M13 .5h7'/%3E%3Cpath class='st2' d='M13 13h7'/%3E%3Cpath class='st1' d='M32.5 13v7'/%3E%3Cpath class='st2' d='M20 13v7'/%3E%3Cpath class='st1' d='M20 32.5h-7'/%3E%3Cpath class='st2' d='M20 20h-7'/%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zm3.1 3.1h3.1v3.1H3.6zm3.2 0h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zm0 0H.5V13M13 .5H6.8v3.1M29.4.5h3.1v3.1h-3.1zm-3.1 3.1h3.1v3.1h-3.1zm0 3.2h3.1v3.1h-3.1zm-3.2-3.2h3.1v3.1h-3.1zm3.2 0V.5H20M32.5 13V6.8h-3.1M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zm-3.2 0h3.1v3.1h-3.1zm3.2-3.2h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zm3.1-3.1h3.1v3.1H3.6zm0-3.2h3.1v3.1H3.6zm3.2 3.2h3.1v3.1H6.8zM6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  /* Degrees of success */
  --degree-success-critical: rgb(107, 255, 0);
  --degree-success: rgb(0, 241, 255);
  --degree-failure: rgb(255, 129, 0);
  --degree-failure-critical: rgb(255, 0, 0);

  /* Value adjustments (e.g. weak/elite) */
  --adjusted-higher: #009988;
  --adjusted-lower: #cc3311;

  &.pf2e.item.sheet {
    --color-text-dark-2: var(--text-color-3);
    --color-text-dark-4: var(--text-color-3);
    --color-text-dark-input: var(--text-color-3);
    --color-border-dark: var(--text-color-2);
    --color-border-medium: var(--dui-input-border-color);
  }
}

[data-theme][data-color-scheme="dark"] {
  &.chat-message .message-content + .pf2e-toolbelt-target-damage,
  &.chat-message .message-content + .pf2e-toolbelt-target-spell {
    --criticalSuccess: var(--degree-success-critical);
    --success: var(--degree-success);
    --failure: var(--degree-failure);
    --criticalFailure: var(--degree-failure-critical);
  }
}

[data-color-scheme="light"] {
  // Dark theme
  --rarity-common: #323232;
  --rarity-uncommon: #98513d;
  --rarity-rare: #002664;
  --rarity-unique: #54166e;
  --color-rarity-common: #323232;
  --color-rarity-uncommon: #98513d;
  --color-rarity-rare: #002664;
  --color-rarity-unique: #54166e;
  --ornamentation: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' overflow='scroll'%3E%3Cstyle%3E.st1{stroke:wheat;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='1'%3E%3Cpath class='st1' d='M.5 20v-7'/%3E%3Cpath class='st2' d='M13 20v-7'/%3E%3Cpath class='st1' d='M13 .5h7'/%3E%3Cpath class='st2' d='M13 13h7'/%3E%3Cpath class='st1' d='M32.5 13v7'/%3E%3Cpath class='st2' d='M20 13v7'/%3E%3Cpath class='st1' d='M20 32.5h-7'/%3E%3Cpath class='st2' d='M20 20h-7'/%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zm3.1 3.1h3.1v3.1H3.6zm3.2 0h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zm0 0H.5V13M13 .5H6.8v3.1M29.4.5h3.1v3.1h-3.1zm-3.1 3.1h3.1v3.1h-3.1zm0 3.2h3.1v3.1h-3.1zm-3.2-3.2h3.1v3.1h-3.1zm3.2 0V.5H20M32.5 13V6.8h-3.1M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zm-3.2 0h3.1v3.1h-3.1zm3.2-3.2h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zm3.1-3.1h3.1v3.1H3.6zm0-3.2h3.1v3.1H3.6zm3.2 3.2h3.1v3.1H6.8zM6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  /* Degrees of success */
  --degree-success-critical: rgb(0, 128, 0);
  --degree-success: rgb(0, 0, 255);
  --degree-failure: rgb(255, 69, 0);
  --degree-failure-critical: red;

  /* Value adjustments (e.g. weak/elite) */
  --adjusted-higher: #009988;
  --adjusted-lower: #cc3311;

  &.filepicker .favorites .paths {
    --color-text-dark-primary: white;
    --dui-button-text-color: white;
  }
}

/* ----------------------------------------- */
/* Default values                            */
/* ----------------------------------------- */

[data-chat-interface-theme] #chat-log ~ *,
[data-theme] {
  /* App variables */
  --app-background: transparent;
  --app-border-color: black;
  --app-text-shadow: none;
  --app-border-width: 1px;
  /* Window app variables */
  --window-app-background: white;
  --window-app-box-shadow: 0px 5px 30px black;
  /* Input variables */
  /* Other variables */
  --icon-border-color: yellow;
  --box-shadow: 0px 1px 3px 1px black;
  --ornamentation-gray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' overflow='scroll'%3E%3Cstyle%3E.st1%7Bstroke:%23231f20;stroke-miterlimit:10%7D.st1,.st2%7Bfill:none%7D%3C/style%3E%3Cg opacity='.25'%3E%3Cpath class='st1' d='M.5 20v-7'/%3E%3Cpath class='st2' d='M13 20v-7'/%3E%3Cpath class='st1' d='M13 .5h7'/%3E%3Cpath class='st2' d='M13 13h7'/%3E%3Cpath class='st1' d='M32.5 13v7'/%3E%3Cpath class='st2' d='M20 13v7'/%3E%3Cpath class='st1' d='M20 32.5h-7'/%3E%3Cpath class='st2' d='M20 20h-7'/%3E%3Cg%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zM3.6 3.6h3.1v3.1H3.6zM6.8 3.6h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zM3.6 6.8H.5V13M13 .5H6.8v3.1'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st1' d='M29.4.5h3.1v3.1h-3.1zM26.3 3.6h3.1v3.1h-3.1zM26.3 6.8h3.1v3.1h-3.1zM23.1 3.6h3.1v3.1h-3.1zM26.3 3.6V.5H20'/%3E%3Cpath class='st1' d='M32.5 13V6.8h-3.1'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st1' d='M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zM23.1 26.3h3.1v3.1h-3.1zM26.3 23.1h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zM3.6 26.3h3.1v3.1H3.6zM3.6 23.1h3.1v3.1H3.6zM6.8 26.3h3.1v3.1H6.8z'/%3E%3Cpath class='st1' d='M6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --ornamentation-gold: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' overflow='scroll'%3E%3Cstyle%3E.st1{stroke:wheat;stroke-miterlimit:10}.st1,.st2{fill:none}%3C/style%3E%3Cg opacity='1'%3E%3Cpath class='st1' d='M.5 20v-7'/%3E%3Cpath class='st2' d='M13 20v-7'/%3E%3Cpath class='st1' d='M13 .5h7'/%3E%3Cpath class='st2' d='M13 13h7'/%3E%3Cpath class='st1' d='M32.5 13v7'/%3E%3Cpath class='st2' d='M20 13v7'/%3E%3Cpath class='st1' d='M20 32.5h-7'/%3E%3Cpath class='st2' d='M20 20h-7'/%3E%3Cpath class='st1' d='M.5.5h3.1v3.1H.5zm3.1 3.1h3.1v3.1H3.6zm3.2 0h3.1v3.1H6.8zM3.6 6.8h3.1v3.1H3.6zm0 0H.5V13M13 .5H6.8v3.1M29.4.5h3.1v3.1h-3.1zm-3.1 3.1h3.1v3.1h-3.1zm0 3.2h3.1v3.1h-3.1zm-3.2-3.2h3.1v3.1h-3.1zm3.2 0V.5H20M32.5 13V6.8h-3.1M29.4 29.4h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M26.3 26.3h3.1v3.1h-3.1zm-3.2 0h3.1v3.1h-3.1zm3.2-3.2h3.1v3.1h-3.1z'/%3E%3Cpath class='st1' d='M29.4 26.3h3.1V20M20 32.5h6.3v-3.1'/%3E%3Cg%3E%3Cpath class='st1' d='M.5 29.4h3.1v3.1H.5zm3.1-3.1h3.1v3.1H3.6zm0-3.2h3.1v3.1H3.6zm3.2 3.2h3.1v3.1H6.8zM6.8 29.4v3.1H13M.5 20v6.3h3.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  .item-controls button[data-action="apply"],
  button[data-action="accept"],
  form button[type="submit"],
  form button[data-action="save"],
  form.check-modifiers-content button.roll,
  button.bright {
    @include dui-button-bright;
  }

  ::-webkit-scrollbar-thumb {
    outline: none;
    border-radius: 3px;
    background: var(--scrollbar-thumb-background);
    border: 1px solid var(--scrollbar-thumb-border-color);
    transition: outline 0.15s;
    // &:hover {
    //   border: 1px solid var(--color-scrollbar);
    //   background: var(--color-scrollbar-hover);
    // }
  }

  ::-webkit-scrollbar-track {
    box-shadow: 0 0 1px var(--color-secondary-3) inset;
    box-shadow: unset;
    border-radius: 4px;
  }

  input[type="checkbox"]:checked,
  input[type="radio"]:checked {
    accent-color: var(--accent-color);
  }

  code {
    background: var(--color-secondary-4);
    border: 1px solid var(--color-secondary-3);
    color: var(--text-color-2);
    border-radius: 3px;
    padding: 0px 2px;
  }

  span[data-pf2-action][data-secret] {
    color: #191813;
  }

  a.content-link,
  [data-pf2-check]:not([data-pf2-traits*="secret"], [data-secret]),
  a.entity-link,
  [data-pf2-action]:not([data-secret]),
  span[data-pf2-action][data-pf2-glyph],
  span[data-pf2-effect-area],
  a.inline-check:not([data-pf2-traits*="secret"], [data-secret]),
  a.inline-check:not([data-pf2-traits*="secret"], [data-secret]) .label,
  a.inline-roll {
    background: var(--inline-background) !important;
    border: 1px solid var(--inline-border-color);
    color: var(--inline-text-color) !important;
    box-shadow: var(--inline-box-shadow);

    [data-visibility]:not([data-visibility="all"])[data-visibility="gm"] {
      background: none !important;
    }

    &.broken {
      border: 1px dashed red;
      background: rgba(255, 0, 0, 0.05);
    }

    &.gmroll {
      background: #e8e8ef !important;
      border-color: #545469;
      color: black !important;
      i {
        color: var(--color-text-dark-inactive) !important;
      }
    }
    &.blindroll {
      background: #f5eaf5 !important;
      border-color: #6b476b;
      color: black !important;
      i {
        color: var(--color-text-dark-inactive) !important;
      }
    }

    &::before,
    i,
    i.icon {
      color: var(--inline-icon-color);
    }

    [data-visibility]:not([data-visibility="all"]) {
      color: var(--inline-text-color) !important;
      outline: 1px dashed var(--inline-text-color);
    }
  }

  [data-pf2-check][data-pf2-traits*="secret"] {
    color: black;
  }

  [data-visibility]:not([data-visibility="all"], .tag, .dice-tooltip, .dice-result) {
    color: black;
    text-shadow: none;
    background: var(--visibility-gm-bg);
  }

  i[data-pf2-repost] {
    @include quick-transition;
    cursor: pointer;
    background: unset;
    border-left: unset;
    &:hover::before {
      color: var(--color-primary-2);
    }
  }

  &.pf2e.item.sheet form .sheet-body fieldset.basics {
    background: none !important;
    border: none !important;
  }
}

/* ------------------------------------------------------------ */
/* Generalized style choices (exlusive of limited scope)        */
/* ------------------------------------------------------------ */

[data-theme][data-color-scheme="dark"][data-dorako-ui-scope="unlimited"] {
  h1 {
    color: var(--color-text-dark-primary);
  }
  h2 {
    color: var(--color-text-dark-primary);
  }
  h3 {
    color: var(--color-text-dark-primary);
  }
  h4:not([data-visibility]) {
    color: var(--color-text-dark-secondary);
    &.message-sender {
      color: var(--color-text-dark-primary);
    }
  }
  h4[data-visibility] {
    &.message-sender {
      color: black;
    }
  }
  h5 {
    color: var(--color-text-dark-secondary);
  }
  h6 {
    color: var(--color-text-dark-secondary);
  }
}

[data-theme][data-dorako-ui-scope="unlimited"] {
  // color: var(--text-color-3);

  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  input[type="search"] {
    min-width: 24px;
  }

  fieldset {
    border: 1px solid var(--fieldset-border-color) !important;
    background: var(--fieldset-background-color) !important;
    border-radius: var(--border-radius);
    > legend {
      color: var(--fieldset-legend-color);
      text-shadow: unset;
    }
  }

  input[type="range"] {
    background: none !important;
    --dui-input-focus-outline-color: transparent;
    --dui-input-border-color: transparent;
    --box-shadow: none;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    box-shadow: unset;
    border-radius: 3px;
    background: var(--color-secondary-5);
    border: 1px solid var(--color-secondary-4);
  }

  input[type="range"]::-webkit-slider-thumb {
    border-radius: 50%;
    box-shadow: unset;
  }

  input[type="range"]:disabled::-webkit-slider-thumb {
    background: color-mix(in srgb, var(--accent-color) 50%, black);
    border: 1px solid color-mix(in srgb, var(--accent-text-color) 50%, black);
  }

  input[type="range"]:not(:disabled)::-webkit-slider-thumb {
    background: var(--accent-color);
    border: 1px solid var(--color-primary-1);
  }

  input[type="color"][data-edit] {
    border: 1px solid var(--color-border-light-highlight);
    border-radius: var(--border-radius);
  }

  input[type="color" i]::-webkit-color-swatch {
    border-color: var(--color-secondary-4);
  }

  input[type="range"] + .range-value {
    flex: none;
    height: 24px;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--accent-color);
    border: 1px solid var(--color-primary-1);
    color: var(--accent-text-color);
    text-shadow: none;
    box-shadow: var(--box-shadow);
    border-radius: 3px;
    font-size: var(--font-size-12);
  }

  a.list-row,
  a.button,
  button:not(.pm-dropdown, .flat) {
    @include dui-button;
  }

  .prosemirror menu .pm-dropdown:hover i {
    color: black;
  }

  &.dialog .dialog-buttons button {
    @include dui-button;
  }

  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  select:not(.tag) {
    @include dui-input;
  }

  &.app.tag-selector form input[type="search"],
  &.app.tag-selector form input[type="text"] {
    @include dui-input;
  }

  textarea {
    color: var(--dui-input-text-color);
    background: var(--dui-input-background);
    border-width: var(--app-border-width);
    border-color: var(--dui-input-border-color);
  }

  hr {
    border: none;
    border-top: 1px solid var(--app-border-color);
    border-bottom: 1px solid var(--app-border-color);
  }

  &.dialog .dialog-buttons button.default {
    @include dui-button;
  }

  form .form-group .form-fields button {
    height: var(--form-field-height);
  }

  &.sheet header.sheet-header img {
    @include dui-app;
    border: 1px solid var(--icon-border-color);
  }

  &.sheet header.sheet-header h1 input {
    --font-size: inherit;
    font-size: 28px;
  }

  &.app.sidebar-popout .window-content {
    color: inherit;
  }
}

/* ----------------------------------------- */
/* App and Window-app                        */
/* ----------------------------------------- */

body.game [data-theme].window-app,
body.game [data-theme].application {
  // --background: url(../ui/parchment.jpg) repeat;
  --color-text-primary: var(--text-color-2);
  --color-header-background: var(--text-color-3);
  --color-fieldset-border: var(--text-color-2);
  // color-text-primary is a core variable
  // color-text-dark-primary+secondary are system variables
  --color-form-label: var(--color-text-dark-primary);
  --color-form-label-hover: var(--color-text-dark-primary);
  --color-form-hint: var(--color-text-dark-secondary);
  --color-form-hint-hover: var(--color-text-dark-secondary);
}

// The background has issues with transparency. This ensures an opaque background is always used. It can be overwritten by more specific !important statements per theme.
[data-color-scheme="light"] {
  --color-select-option-bg: white !important;
}
[data-color-scheme="dark"] {
  --color-select-option-bg: black !important;
}

// Unsets the blurring applied by core Foundry
.theme-dark .application[data-theme] .window-content {
  backdrop-filter: unset;
  -webkit-backdrop-filter: unset;
}

[data-theme].application:not([data-ui-scope="limited"]) {
  select {
    @include dui-input;
  }

  input {
    @include dui-input;
  }

  .buttons button {
    @include dui-button;
  }
}

.chat-popout.window-app {
  .window-header {
    border: none;
  }
  .window-content {
    background: none;
  }
}

[data-theme] {
  &.app {
    border-radius: var(--border-radius);
    background: unset;

    background: var(--app-background);
    background-position: top;
    background-size: cover;
    border: var(--app-border-width) solid;
    border-color: var(--app-border-color);
  }

  &.application,
  &.window-app {
    background: var(--window-app-background);
    background-position: top;
    background-size: cover;
    border: var(--window-app-border-width) solid;
    border-color: var(--window-app-border-color);
    // backdrop-filter: blur(4px);
    // prettier-ignore
    // box-shadow: 0px 5px 20px 3px black, 0px 0px 50px 30px color-mix(in srgb, var(--color-primary-3) 10%, transparent), 0px 0px 30px 20px color-mix(in srgb, var(--color-primary-2) 20%, transparent), 0px 0px 10px 05px color-mix(in srgb, var(--color-primary-1) 40%, transparent);
    // Electron app bug
    box-shadow: var(--window-app-box-shadow);

    &.abc-picker,
    &.sidebar-popout {
      border: var(--app-border-width) solid var(--window-app-border-color);
      box-shadow: var(--box-shadow);
      backdrop-filter: blur(5px);
      --color-text-dark-secondary: #a89d8b;
    }

    .window-header {
      flex: 0 0 27px;
      border: unset;
      // text-shadow: 0px 1px 2px black;
      border-radius: var(--border-radius) var(--border-radius) 0px 0px;
      --color-header-background: transparent; // App v2 header
      --color-light-1: var(--text-color-1); // App v2 header
      color: var(--text-color-1);

      .header-control {
        background: none;
        border: none;
        box-shadow: none;
      }

      .window-title {
        --color-text-dark-secondary: var(--color-text-dark-primary);
      }
    }

    .window-content {
      background: unset !important; // Stops modules from adding their own background
      box-shadow: unset;
    }

    .window-resizable-handle {
      background: var(--color-primary-4);
      border: 1px solid var(--window-app-border-color);
      border-radius: 4px 0px var(--border-radius) 0px;
      border-bottom-color: var(--color-primary-3);
      border-right-color: var(--color-primary-3);
      bottom: -1px;
      right: -1px;
      z-index: 2;
    }
  }
}

/* ----------------------------------------- */
/* Application specific                      */
/* ----------------------------------------- */
[data-theme] {
  &.tour .content {
    color: var(--text-color-2);
  }

  &.token-sheet,
  &.dialog:not(.application) {
    height: auto !important;
  }

  &.token-sheet nav.sheet-tabs.secondary-tabs {
    margin-top: 2px;
  }

  .inline-roll .dice-tooltip {
    background: var(--app-background);
    border: 1px solid var(--color-primary-1);
    box-shadow: 0px 0px 6px var(--color-primary-2), 0px 2px 8px 1px var(--color-primary-3);
    backdrop-filter: blur(5px);
    border-radius: var(--border-radius);
    -webkit-backdrop-filter: blur(5px);
    font-size: var(--font-size-16);
    line-height: var(--font-size-16);
    text-shadow: 0px 1px 2px black;
    padding: 0.4em 0.6em;
  }

  #chat-controls .roll-type-select {
    @include dui-input;
    margin: 0px;
  }

  &.filepicker .favorites .paths {
    box-shadow: unset;
    border: 1px solid var(--dui-input-border-color);
    background: var(--dui-input-background);
    .path {
      @include dui-button-toggle;
      border-radius: 3px;
    }
  }

  &.filepicker .current-dir button {
    height: 32px;
  }

  &.package-configuration aside.sidebar {
    border: unset;
    nav.tabs {
      gap: 5px;
      .category-tab {
        @include dui-button;
        padding: 4px 8px;
        margin: 1px 4px;
      }
    }
  }

  &.sheet nav.sheet-tabs {
    border: none;
  }

  .directory .action-buttons button {
    box-shadow: var(--box-shadow);
  }

  .directory .directory-header .header-search input {
    @include dui-input;
  }

  .directory .action-buttons button,
  .settings-sidebar button {
    @include dui-button;
  }

  nav.sheet-tabs > [data-tab] {
    @include dui-button;
  }

  // also affects settings which is vertical
  &.window-app .tabs .item {
    @include dui-button;
    padding: 5px 10px;
    // padding: 4px 8px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // flex-direction: column;
  }

  &.pf2e.item.sheet form > nav > .tabs {
    gap: 5px;
    padding-left: 2px;
    padding-right: 2px;
  }

  &.sheet nav.sheet-tabs {
    gap: 5px;
  }

  .pf2e.chat-card > hr {
    display: none;
  }
}

/* ----------------------------------------- */
/* Core overwrites                           */
/* ----------------------------------------- */

[data-theme][data-color-scheme="dark"] {
  &.app.token-sheet .tab.active[data-tab="appearance"] fieldset {
    border-color: var(--color-secondary-3);
    > legend {
      color: var(--text-color-2);
    }
  }
}

/* ----------------------------------------- */
/* Journals                                  */
/* ----------------------------------------- */

[data-theme] {
  &.sheet.journal-entry .journal-entry-content {
    background: unset;
    border: unset;
  }

  &.journal-sheet .journal-header .title {
    @include dui-input;
    // background: var(--color-secondary-4);
  }

  .editor-edit {
    @include dui-button;
    border-radius: 3px;
    padding: 2px 5px;
  }
}

/* ----------------------------------------- */
/* Tables                                    */
/* ----------------------------------------- */

[data-theme] {
  table.pf2e,
  table.pf2-table {
    --text-dark: black;
  }

  table:not(.pf2-table, .pf2e) tr:nth-child(even) {
    background: color-mix(in srgb, var(--color-secondary-3) 20%, transparent);
  }
}

/* ----------------------------------------- */
/* Tagify and tags                           */
/* ----------------------------------------- */

[data-theme] {
  .tags.paizo-style tag,
  .tags.paizo-style .tag,
  .tags.paizo-style select.tag {
    --tag-color: var(--color-text-trait);
  }
  .pf2e.chat-card .tags {
    border: none;
  }

  .tags.light > .tag,
  .tags > .tag.light {
    --tag-color: var(--input-color);
    background: var(--dui-input-background);
  }

  .tags .tag.tag_transparent {
    margin-top: 1px;
    margin-right: 2px;
  }

  // .tags > .tag {
  //   --tag-color: var(--text-color-2);
  //   --color-pf-alternate-dark: var(--text-color-2);
  // }
  .tagify,
  .tah-dialog-tags-dropdown .tagify__dropdown__wrapper,
  tags.tagify.pf2e-tagify {
    --tags-disabled-bg: #f1f1f1;
    --tags-border-color: #ddd;
    --tags-hover-border-color: #ccc;
    --tags-focus-border-color: #3595f6;
    --tag-border-radius: 3px;
    --tag-bg: #e5e5e5;
    --tag-hover: #d3e2e2;
    --tag-text-color: black;
    --tag-text-color--edit: black;
    --tag-pad: 0.3em 0.5em;
    --tag-inset-shadow-size: 1.1em;
    --tag-invalid-color: #d39494;
    --tag-invalid-bg: rgba(211, 148, 148, 0.5);
    --tag-remove-bg: rgba(211, 148, 148, 0.3);
    --tag-remove-btn-color: black;
    --tag-remove-btn-bg: none;
    --tag-remove-btn-bg--hover: #c77777;
    --input-color: inherit;
    --tag-hide-transition: 0.3s;
    --placeholder-color: rgba(0, 0, 0, 0.4);
    --placeholder-color-focus: rgba(0, 0, 0, 0.25);

    --tag-bg: var(--color-primary-2);
    --tags-hover-border-color: var(--color-secondary-3);
    --tag-color: var(--text-color-2);

    --tag-bg: var(--color-secondary-4);
    --tag-border-color: var(--color-border-medium);
    --tags-border-color: var(--color-border-medium);

    background: var(--dui-input-background);
    border: var(--app-border-width) solid var(--dui-input-border-color);
    box-shadow: var(--input-box-shadow);
    border-radius: 3px;

    .tagify__dropdown__item {
      color: var(--text-color-1);
    }

    &.tagify--empty .tagify__input::before {
      color: var(--text-color-5);
    }

    &:hover {
      box-shadow: unset;
    }
    select.tag {
      border-width: 1px 1px 1px 1px;
      // height: var(--font-size-23);
    }

    tag {
      border-radius: 4px;
      border: 1px solid var(--tag-border-color);
    }
    tag .tagify__tag__removeBtn {
      width: 12px;
      height: 12px;
      font: 12px/1 Arial;
    }
    tag .tagify__tag__removeBtn,
    tag > div .tagify__tag-text {
      color: var(--tag-color);
    }
  }
}

/* ----------------------------------------- */
/* System overwrites                         */
/* ----------------------------------------- */

[data-theme][data-color-scheme="dark"] {
  &.pf2e.item.sheet {
    --color-text-dark-2: var(--text-color-3);
    --color-text-dark-4: var(--text-color-3);
    --color-text-dark-input: var(--text-color-3);
    --color-border-dark: var(--text-color-2);
    --color-border-medium: var(--color-secondary-3);
  }
}

[data-theme] {
  --visibility-gm-bg: #e8e8efaa;
  --visibility-owner-bg: #ddebe1aa;

  &.pf2e.item.sheet form .sheet-body .tab.active label {
    color: var(--color-form-label);
  }

  table.pf2-table {
    text-shadow: none;
  }

  [data-visibility]:not([data-visibility="all"])[data-visibility="gm"] [data-visibility="gm"] {
    background: none;
  }

  &.pf2e.item.sheet {
    input:not([type="range"]) {
      @include dui-input;
    }
  }
  &.pf2e.item.sheet form .tab.active.rules .rule-form .rule-element-header .priority input {
    width: 5ch;
  }

  &.actor.sheet[data-color-scheme="dark"] section.window-content .inventory ul.items > li .item-summary {
    // color: var(--text-color-2);
    background: rgba(0, 0, 0, 0.33);
  }

  &.actor.sheet section.window-content .item-summary .gm-notes {
    color: black;
  }

  &.pf2e.item.sheet form .sheet-content section.sidebar .item-summary,
  &.pf2e.item.sheet form .sheet-content section.sheet-sidebar .item-summary {
    color: var(--color-text-dark-secondary);
  }

  &.pf2e.item.sheet .sheet-header .details {
    align-items: center;
  }

  &#generate-check-prompt {
    nav h4 a {
      @include dui-button;
      padding: 4px 8px;
    }

    .dialog-content tags.tagify {
      --tags-disabled-bg: #f1f1f1;
      --tags-border-color: #ddd;
      --tags-hover-border-color: #ccc;
      --tags-focus-border-color: #3595f6;
      --tag-border-radius: 3px;
      --tag-bg: #e5e5e5;
      --tag-hover: #d3e2e2;
      --tag-text-color: black;
      --tag-text-color--edit: black;
      --tag-pad: 0.3em 0.5em;
      --tag-inset-shadow-size: 1.1em;
      --tag-invalid-color: #d39494;
      --tag-invalid-bg: rgba(211, 148, 148, 0.5);
      --tag-remove-bg: rgba(211, 148, 148, 0.3);
      --tag-remove-btn-color: black;
      --tag-remove-btn-bg: none;
      --tag-remove-btn-bg--hover: #c77777;
      --input-color: inherit;
      --tag-hide-transition: 0.3s;
      --placeholder-color: rgba(0, 0, 0, 0.4);
      --placeholder-color-focus: rgba(0, 0, 0, 0.25);

      --tag-bg: var(--color-primary-2);
      --tags-border-color: var(--color-secondary-4);
      --tags-hover-border-color: var(--color-secondary-3);
      --tag-color: var(--text-color-2);

      --tag-bg: var(--color-secondary-4);
      --tag-border-color: var(--color-secondary-3);
      --tags-border-color: var(--color-secondary-3);

      border: 1px solid var(--tag-border-color);
      border-radius: 3px;
    }
  }

  &.pf2e.item.sheet form .form-list,
  &.pf2e.item.sheet form section.sheet-body fieldset {
    border-color: var(--color-secondary-3);
    > legend {
      color: var(--text-color-2);
    }
    &.basics {
      border-color: transparent;
    }
  }

  section.compendium-sidebar ol.directory-list ol.document-matches li.match {
    .thumbnail img {
      @include dui-app;
      padding: 0px;
    }
    &:hover .thumbnail img {
      border: var(--app-border-width) solid;
      border-color: var(--color-primary-2);
    }
  }

  &.pf2e.item.sheet form .sheet-body .tab.active.description .editor:hover a.add-gm-notes {
    display: flex;
  }

  &.pf2e.item.sheet form .sheet-body .tab.active.description .editor a.add-gm-notes {
    @include dui-button-bright;
    border-radius: 3px;
    align-content: center;
    justify-content: center;
    right: 40px;
    height: 28px;
    width: 28px;
    background-color: var(--color-primary-4);
    border-color: var(--color-primary-3);
    > i {
      margin-top: 3px;
    }
  }

  &.pf2e.item.sheet form .sheet-body .tab.active.description .editor a.editor-edit {
    @include dui-button-bright;
    border-radius: 3px;
    // display: flex;
    align-content: center;
    justify-content: center;
    height: 28px;
    width: 28px;
  }

  &.pf2e.item.sheet form .sheet-content input[type="text"],
  &.pf2e.item.sheet form .sheet-content input[type="number"],
  &.pf2e.item.sheet form .sheet-content select,
  &.pf2e.item.sheet form section.sheet-body input[type="text"],
  &.pf2e.item.sheet form section.sheet-body input[type="number"] {
    @include dui-input;
  }

  &.pf2e.item.sheet .sheet-header input[type="text"],
  &.pf2e.item.sheet .sheet-header input[type="number"] {
    @include dui-input;
  }

  &.pf2e.item.sheet form .sheet-body .tab.active.details select,
  &.pf2e.item.sheet form .sheet-body .tab.active.details fieldset.publication .data .license select,
  &.pf2e.item.sheet form .sheet-content section.sidebar select {
    @include dui-input;
  }

  &.pf2e.item.sheet form .sheet-content button:hover:not(:disabled),
  &.pf2e.item.sheet form .sheet-content button:focus {
    border: 1px solid var(--dui-button-border-color);
    box-shadow: unset;
  }

  &.pf2e.item.sheet form .sheet-content input:not([type="range"], [type="checkbox"]):hover:not(:disabled),
  &.pf2e.item.sheet form .sheet-content input:not([type="range"], [type="checkbox"]):focus,
  &.pf2e.item.sheet form .sheet-content select:hover:not(:disabled),
  &.pf2e.item.sheet form .sheet-content select:focus {
    @include dui-input;
  }

  &.pf2e.item.sheet form .tab.active.rules .rule-form .rules-drop-container .rules-drop-zone {
    @include dui-app;
    --text-dark: var(--text-color-3);
  }
  &.pf2e.item.sheet form .tab.active.rules .rule-form .rules-drop-container .rules-drop-zone i {
    @include dui-app;
  }

  &.pf2e.item.sheet.action form .drop-zone {
    @include dui-app;
  }

  &.pf2e.item.sheet.action form .drop-zone a.content-link,
  &.pf2e.item.sheet.action form .drop-zone picture,
  &.pf2e.item.sheet.action form .drop-zone img {
    @include dui-app;
  }

  &.pf2e.item.sheet .sheet-header {
    border: unset;
  }

  &.pf2e.item.sheet form > nav {
    border: unset;
    .sheet-tabs {
      gap: 5px;
      margin: 2px;
      > a {
        @include dui-button;
      }
    }
  }

  &.pf2e.item.sheet form .tab.active.rules .rule-form nav.rule-tabs {
    border: unset;
    h4 {
      > a {
        @include dui-button;
        padding: 5px 10px;
      }
    }
  }

  &.pf2e.item.sheet form .effects-container,
  &.pf2e.item.sheet form .details-container,
  &.pf2e.item.sheet form .dice-data {
    gap: 5px;
    align-items: center;
  }

  &.pf2e.item.sheet form section.sheet-body .item-mystification.active .mystification-status label {
    color: var(--color-text-dark-4); // System using hardcoded color
  }

  &.pf2e.item.sheet form .sheet-body .tab.active.description .gm-notes,
  &.pf2e.item.sheet form section.sheet-body .item-description .descriptions .gm-notes {
    @include dui-app;
    background-color: var(--visibility-gm-bg);
    border-style: dashed;
    border-color: var(--color-primary-4);
    text-shadow: none;
    color: black;
  }

  &.pf2e.item.sheet form section.sheet-body .item-description .descriptions .editor a.add-gm-notes,
  &.pf2e.item.sheet form section.sheet-body .item-description .descriptions .editor a.editor-edit {
    background: var(--color-secondary-4);
    border: 1px solid var(--color-secondary-3);
    color: var(--text-color-2);
  }

  &.pf2e.item.sheet form .sheet-body .tab.mystification.active .unidentified img {
    @include dui-app;
    border: 1px solid;
    border-color: var(--icon-border-color);
  }

  &.pf2e.item.sheet .sheet-header img {
    @include dui-app;
    --app-border-width: 1px;
    border-color: var(--icon-border-color);
    border-radius: var(--border-radius);
    margin-left: 2px;
    margin-top: 2px;
  }

  &.pf2e.item.sheet form .tab.active.rules .rule-form .attached-input .attachment,
  &.pf2e.item.sheet form .item-rules .rule-form .attached-input .attachment {
    @include dui-button-bright;
    border-radius: 3px 0px 0px 3px;
  }

  &.pf2e.item.sheet form .item-rules .rule-form .attached-input input,
  &.pf2e.item.sheet form .item-rules .rule-form .attached-input tags {
    border-left: unset;
    &:hover {
      border-left: unset;
    }
  }

  .tox .tox-sidebar-wrap {
    background-color: white;
  }
  .tox.tox-tinymce .tox-tbtn {
    --dui-button-background: white;
    --button-hover-background: gray;
    --app-text-shadow: none;
    --box-shadow: none;
    color: black;
  }
}
