/* ----------------------------------------- */
/* Theme colors                              */
/* ----------------------------------------- */
:root {
  --dnd5e-color-black: #000;
  --dnd5e-color-dark: #191813;
  --dnd5e-color-faint: #c9c7b8;
  --dnd5e-color-beige: #b5b3a4;
  --dnd5e-color-tan: #7a7971;
  --dnd5e-color-olive: #4b4a44;
  --dnd5e-color-crimson: #44191a;
  --dnd5e-color-groove: #eeede0;
  --dnd5e-color-gold: #9f9275;
  --dnd5e-color-red: #ed1c24;
  --dnd5e-color-blue: cornflowerblue;
  --dnd5e-color-green: #205b15;
  --dnd5e-color-maroon: #741b2b;
  --dnd5e-color-parchment: #f1ebe8;
  --dnd5e-color-card: #f8f4f1;
  --dnd5e-color-hp-1: #1b4b29;
  --dnd5e-color-hp-2: #3ba55d;
  --dnd5e-color-hp-3: #276d3c;
  --dnd5e-color-hd-1: #401f25;
  --dnd5e-color-hd-2: var(--dnd5e-color-maroon);
  --dnd5e-color-hd-3: #500000;
  --dnd5e-color-sc-1: #433754;
  --dnd5e-color-sc-2: #776493;
  --dnd5e-color-iron-gray: #313131;
  --dnd5e-color-light-gray: #3d3d3d;
  --dnd5e-color-success: #006c00;
  --dnd5e-color-success-background: #c7d0c0;
  --dnd5e-color-success-critical: green;
  --dnd5e-color-failure: #6e0000;
  --dnd5e-color-failure-background: #ffdddd;
  --dnd5e-color-failure-critical: red;
  --dnd5e-background-10: rgba(0, 0, 0, 0.1);
  --dnd5e-background-5: rgba(0, 0, 0, 0.05);
  --dnd5e-border-light: 1px solid #ccc;
  --dnd5e-border-groove: 2px groove var(--dnd5e-color-groove);
  --dnd5e-border-dotted: 1px dotted #bbb;
  --dnd5e-font-modesto: "Modesto Condensed", "Palatino Linotype", serif;
  --dnd5e-font-roboto: Roboto, sans-serif;
  --dnd5e-font-roboto-condensed: "Roboto Condensed", sans-serif;
  --dnd5e-font-roboto-slab: "Roboto Slab", serif;
  --dnd5e-sheet-background: url("../../../systems/dnd5e/ui/parchment.jpg") repeat;
  --dnd5e-shadow-45: rgba(0, 0, 0, 0.45);
  --dnd5e-shadow-15: rgba(0, 0, 0, 0.15);
  --dnd5e-highlight-45: rgba(255, 255, 255, 0.45);
  --font-size-9: 0.5625rem;
  --font-size-10: 0.625rem;
  --font-size-23: 1.4375rem;
  --font-size-30: 1.875rem;
  --font-size-36: 2.25rem;
  --font-size-42: 2.625rem;
  --font-size-46: 2.875rem;
  --dnd5e-capacity-container-background-color: oklch(57.5% 0.012 101);
  --dnd5e-capacity-container-border-color: oklch(20.8% 0.01 98);
  --dnd5e-capacity-background-color: oklch(62% 0.05 246);
  --dnd5e-capacity-border-color: oklch(91% 0.044 252.5);
  --dnd5e-capacity-text-color: oklch(95% 0 0);
  --dnd5e-color-scrollbar: var(--dnd5e-color-gold);

  // --dnd5e-bg: url("../img/dnd5e2/texture-gray1.webp") no-repeat top left,
  //   url("../img/dnd5e2/texture-gray2.webp") no-repeat bottom right, var(--dnd5e-color-parchment);
  --dnd5e-bg: url("../../../systems/dnd5e/ui/texture-gray1.webp") no-repeat top left,
    url("../../../systems/dnd5e/ui/texture-gray2.webp") no-repeat bottom right, var(--dnd5e-color-parchment);
}

.dnd5e2 .pills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;

  .pill {
    font-family: var(--dnd5e-font-roboto);
    font-weight: bold;
    font-size: var(--font-size-11);
    text-transform: uppercase;
    border: 1px solid var(--color-border-dark-5);
    border-radius: 3px;
    background: var(--dnd5e-color-card);
    padding: 0.1875rem 0.375rem;
    display: flex;
    gap: 0.25rem;

    &.green,
    &.maroon {
      color: var(--color-text-light-0);
    }

    &.green {
      background-color: var(--dnd5e-color-green);
    }
    &.maroon {
      background-color: var(--dnd5e-color-maroon);
    }

    &.pill-sm {
      color: #4e4e4e;
      border: 1px dotted var(--color-border-dark-5);
      background-color: transparent;
    }
  }
}

.dnd5e2 .card {
  border-radius: 4px;
  background: var(--dnd5e-color-card);
  box-shadow: 0 0 6px var(--dnd5e-shadow-45);
  border: 1px solid var(--dnd5e-color-gold);
}

.dnd5e2 .card .header {
  background: linear-gradient(to right, var(--dnd5e-color-hd-1), var(--dnd5e-color-hd-2));
  color: white;
  border-radius: 3px 3px 0 0;
  border-bottom: 1px solid var(--dnd5e-color-gold);
}

.dnd5e2 .gold-icon {
  border: 2px solid var(--dnd5e-color-gold);
  box-shadow: 0 0 4px var(--dnd5e-shadow-45);
  border-radius: 0;
  background-color: var(--dnd5e-color-light-gray);
}

.dnd5e2.sheet.actor.character::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  border: 1px solid var(--dnd5e-color-gold);
  box-shadow: 0 0 20px var(--color-shadow-dark);
  border-radius: 5px;
}

/* ----------------------------------------- */
/* Map v1 styling to v2 values               */
/* ----------------------------------------- */
[data-theme^="dnd5e2"] {
  --color-border-light-highlight: var(--dnd5e-color-gold);
}

/* ----------------------------------------- */
/* DUI variables                             */
/* ----------------------------------------- */
[data-chat-interface-theme^="dnd5e2"] #sidebar-tabs,
[data-chat-interface-theme^="dnd5e2"] #chat-log ~ *,
[data-theme^="dnd5e2"] {
  --color-primary-1: var(--dnd5e-color-gold);
  --color-primary-1-40: color-mix(in srgb, var(--color-primary-1) 40%, transparent);
  --color-primary-2: var(--dnd5e-color-gold);
  --color-primary-2-20: color-mix(in srgb, var(--color-primary-2) 20%, transparent);
  --color-primary-3: var(--dnd5e-color-gold);
  --color-primary-3-10: color-mix(in srgb, var(--color-primary-3) 10%, transparent);
  --color-primary-3-75: color-mix(in srgb, var(--color-primary-3) 75%, transparent);
  --color-primary-4: var(--dnd5e-color-gold);
  --color-primary-4-75: color-mix(in srgb, var(--color-primary-4) 75%, transparent);
  --color-primary-5: var(--dnd5e-color-gold);

  --color-secondary-1: var(--dnd5e-color-groove);
  --color-secondary-2: var(--dnd5e-color-groove);
  --color-secondary-3: var(--dnd5e-color-groove);
  --color-secondary-3-75: color-mix(in srgb, var(--color-secondary-3) 75%, transparent);
  --color-secondary-4: var(--dnd5e-color-light-gray);
  --color-secondary-5: var(--dnd5e-color-iron-gray);

  --color-secondary-5-25: rgba(11, 10, 19, 0.25);
  --color-secondary-5-50: rgba(11, 10, 19, 0.5);
  --color-secondary-5-75: rgba(11, 10, 19, 0.75);
  --color-secondary-5-90: rgba(11, 10, 19, 0.9);

  --text-color-1: var(--color-text-dark-primary);
  --text-color-2: var(--color-text-dark-primary);
  --text-color-3: var(--color-text-dark-primary);
  --text-color-4: var(--color-text-dark-primary);
  --text-color-5: var(--color-text-dark-primary);
  --text-color-disabled: var(--color-text-dark-inactive);

  --icon-border-color: var(--dnd5e-color-gold);
  --box-shadow: 0 0 3px var(--dnd5e-shadow-15);

  --scrollbar-thumb-background: var(--dnd5e-color-scrollbar);
  --scrollbar-thumb-border-color: transparent;

  --input-box-shadow: 0 0 6px var(--dnd5e-shadow-15);
  --dui-input-background: var(--dnd5e-color-card);
  --dui-input-border-color: var(--dnd5e-color-gold);
  --dui-input-focus-text-color: var(--color-text-dark-primary);
  --dui-input-text-color: var(--color-text-dark-primary);
  --dui-input-placeholder-color: var(--color-text-dark-5);
  --input-text-selection-color: var(--color-secondary-3);
  --dui-input-focus-outline-color: var(--dnd5e-color-gold);

  --input-disabled-background: color-mix(in srgb, var(--dnd5e-color-card) 50%, transparent);
  --input-disabled-border-color: color-mix(in srgb, var(--color-border-dark-5) 50%, transparent);

  --fieldset-border-color: var(--dnd5e-color-gold);
  --fieldset-background-color: transparent;
  --fieldset-legend-color: var(--color-text-dark-primary);

  --dui-button-border-color: var(--color-secondary-3);
  --app-border-width: 1px;
  --app-background: var(--dnd5e-color-card);
  --app-border-color: var(--color-border-light-2);

  --dui-button-background: var(--dnd5e-color-card);
  --dui-button-border-color: var(--app-border-color);
  --dui-button-text-color: black;
  --dui-button-focus-outline-color: var(--dnd5e-color-gold);
  --button-hover-background: var(--dnd5e-color-iron-gray);
  --button-hover-border-color: var(--dnd5e-color-black);
  --dui-button-hover-text-color: var(--dnd5e-color-gold);
  --button-disabled-background: var(--color-primary-5);
  --button-disabled-border-color: var(--color-primary-4);

  --button-toggle-border-color: var(--color-secondary-2);
  --button-toggle-background: var(--dnd5e-color-gold);
  --button-toggle-hover-background: var(--dnd5e-color-iron-gray);
  --button-toggle-hover-border-color: var(--dnd5e-color-light-gray);
  --button-toggle-focus-outline-color: var(--color-primary-1);

  --app-border-color: var(--dnd5e-color-gold);
  --window-app-background: var(--dnd5e-bg);
  --window-app-border-width: 2px;
  --window-app-border-color: var(--dnd5e-color-gold);
  --window-app-box-shadow: 0 0 30px var(--dnd5e-shadow-15), 0 0 6px var(--dnd5e-shadow-45);

  --accent-text-color: var(--dnd5e-color-gold);
  --accent-color-light: color-mix(in srgb, var(--dnd5e-color-iron-gray) 80%, white);
  --accent-color: var(--dnd5e-color-iron-gray);
  --accent-color-dark: color-mix(in srgb, var(--dnd5e-color-iron-gray) 80%, black);

  --inline-background: var(--dnd5e-color-card);
  --inline-border-color: var(--color-border-dark-5);
  --inline-text-color: var(--color-text-dark-primary);
  --inline-icon-color: var(--dnd5e-color-gold);
  --inline-box-shadow: 0 0 6px var(--dnd5e-shadow-15);
}

[data-theme="dnd5e2"] {
  --color-pf-primary: var(--dnd5e-color-maroon);
  // --color-pf-alternate: var(--dnd5e-color-gold);
  --color-bg-trait: var(--dnd5e-color-maroon);
  --color-bg-size: var(--dnd5e-color-green);
  &.window-app .window-header {
    text-shadow: unset;
  }

  &.window-app .window-resizable-handle {
    background: none;
    border: none;
    width: 13px;
    bottom: -2px;
    cursor: nwse-resize;
    > i::before {
      content: "\f7a5";
    }
  }

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

  .tab.category.active[data-tab="pf2e-dorako-ux"] h2,
  .tab.category.active[data-tab="pf2e-dorako-ui"] h2 {
    background: none !important;
    color: var(--dnd5e-color-maroon) !important;
    box-shadow: none !important;
    border: none !important;
    text-shadow: 0px 1px 1px black !important;
  }

  .form-group.dorako.settings-header {
    background: var(--app-background) !important;
    border: 1px solid var(--dnd5e-color-gold) !important;
    box-shadow: 0 0 6px var(--dnd5e-shadow-45) !important;
    .name {
      color: var(--dnd5e-color-gold) !important;
    }
  }

  #context-menu {
    text-shadow: unset;
  }
  &.pf2e.item.sheet .sheet-header input[type="text"],
  &.pf2e.item.sheet .sheet-header input[type="number"] {
    --dui-input-background: var(--dnd5e-background-10);
    --dui-input-border-color: transparent;
    --input-box-shadow: none;
  }
}

/* ----------------------------------------- */
/* Tooltip                                   */
/* ----------------------------------------- */
#tooltip[data-theme^="bg3"] {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

/* ----------------------------------------- */
/* Chat message                              */
/* ----------------------------------------- */
:is(.chat-popout, #chat-log) .message[data-theme^="dnd5e2"] {
  // padding: 0.5rem;
  border-width: 1px;
  border-block-end-width: 2px;
  border-radius: 6px;
  font-family: var(--dnd5e-font-roboto);
  font-size: var(--font-size-13);
  position: relative;
  // background: var(--dnd5e-color-parchment);
  .message-header {
    color: var(--text-color-1);
  }
}
:is(.chat-popout, #chat-log) .message[data-theme^="dnd5e2"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent url("../../../systems/dnd5e/ui/texture-gray1.webp") no-repeat top left;
  border-radius: 6px;
  pointer-events: none;
  z-index: 0;
}
:is(.chat-popout, #chat-log) .message[data-theme^="dnd5e2"].whisper::before {
  filter: grayscale(1);
}
:is(.chat-popout, #chat-log) .message[data-theme^="dnd5e2"].blind::before {
  mix-blend-mode: luminosity;
}

[data-theme^="dnd5e2"] {
  &.chat-message {
    --window-app-background: var(--dnd5e-color-parchment);
    --box-shadow: 0 0 3px var(--dnd5e-shadow-15);

    &.whisper[data-color-scheme="light"] {
      --window-app-background: #e8e8ef;
      border-color: #8f8f9f;
    }

    &.blind[data-color-scheme="light"] {
      --window-app-background: #f5eaf5;
      border-color: #9e8e9e;
    }

    &[data-color-scheme="dark"] {
      --window-app-background: var(--dnd5e-color-dark);
      --box-shadow: 0 0 3px var(--dnd5e-shadow-45);
    }

    &.whisper[data-color-scheme="dark"] {
      --window-app-background: #2b2b4e;
      border-color: #7b7b8c;
    }

    &.blind[data-color-scheme="dark"] {
      --window-app-background: var(--dnd5e-color-sc-1);
      border-color: var(--dnd5e-color-sc-2);
    }

    > header {
      z-index: 1;
    }

    .message-content {
      text-shadow: unset;
      z-index: 1;
    }

    .message-header .header-meta {
      &.whisper {
        background-color: var(--dnd5e-color-blue);
        border-color: color-mix(in srgb, var(--dnd5e-color-groove) 100%, rgba(255, 255, 255, 0.5));
        color: white;
      }
      &.blind {
        background-color: var(--dnd5e-color-sc-2);
        border-color: color-mix(in srgb, var(--dnd5e-color-groove) 100%, rgba(255, 255, 255, 0.5));
        color: white;
      }
    }

    button[data-action="shield-block"]:hover,
    .damage-application button[data-action="shield-block"].shield-activated,
    .damage-application button[data-action="shield-block"].shield-activated:hover {
      background-color: var(--dnd5e-color-gold) !important;
      border-color: var(--dnd5e-color-groove) !important;
      color: white !important;
      text-shadow: 0 0 4px var(--dnd5e-highlight-45);
      > i {
        color: white;
      }
    }
    .damage-application button[data-action="apply-healing"]:hover {
      background-color: var(--dnd5e-color-hp-2) !important;
      border-color: var(--dnd5e-color-hp-3) !important;
      color: white !important;
      text-shadow: 0px 0px 0px white;
      > i {
        color: white;
      }
      .fa-plus {
        color: var(--dnd5e-color-hp-2) !important;
      }
    }
  }
}

/* ----------------------------------------- */
/* NPC sheet                                 */
/* ----------------------------------------- */
[data-theme^="dnd5e2"][data-dorako-ui-scope="limited"] {
  &.sheet.pf2e.actor.npc.app {
    --section-background: var(--app-background);
    --section-header: linear-gradient(to right, var(--dnd5e-color-hd-1), var(--dnd5e-color-hd-2));
    --section-border-color: var(--tertiary);
    --section-outline-color: var(--gold-brown);
    --section-header-text-color: white;
    --tag-border-color: var(--color-text-dark-primary);
    --tag-background-color: transparent;
    --tag-text-color: var(--color-text-dark-primary);
    --color-text-dark-input: var(--color-text-dark-primary);
    --dui-input-border-color: transparent;
    --dui-input-background: rgba(0, 0, 0, 0.1);
    --dui-input-focus-outline-color: var(--tertiary);
    --dui-input-placeholder-color: rgba(80, 80, 80, 1);
    --text-dark: var(--color-text-dark-primary);
    --contrastive-transparent: rgba(0, 0, 0, 0.5);
    --text-color-3: var(--color-text-dark-primary);
    --app-text-shadow: none;

    &.actor.npc.sheet form .sheet-body .entries-list .spellcasting-entry .header .inline-field .attack-input,
    &.actor.npc.sheet form .sheet-body .entries-list .spellcasting-entry .header .inline-field .dc-input {
      --dui-input-text-color: white;
    }

    &.actor.npc.sheet form a.roll:hover {
      --color-pf-primary-light: var(--primary-light);
    }

    .window-header {
      color: var(--color-text-dark-primary);
      text-shadow: none;
    }

    &.actor.npc.sheet form .side-bar-section.initiative select {
      --box-shadow: none;
    }

    input {
      --box-shadow: none;
    }
  }
}

/* ----------------------------------------- */
/* Light theme                               */
/* ----------------------------------------- */
[data-theme^="dnd5e2"][data-color-scheme="light"] {
  &.sheet.journal-entry .journal-sidebar {
    --color-border-light-highlight: var(--dnd5e-color-black);
    --color-border-light-primary: var(--discord-background-2);
    --color-text-hyperlink: var(--dnd5e-color-maroon);
    --color-text-light-highlight: var(--dnd5e-color-black);
    --color-border-highlight: var(--accent-color);
    --color-border-highlight-alt: var(--accent-color-dark);
    --color-border-divider: var(--dnd5e-color-maroon);
    --color-text-dark-primary: var(--discord-text-3);
    --color-text-dark-secondary: var(--discord-text-5);
  }

  &.sheet.familiar .window-header {
    color: var(--dnd5e-color-black);
  }
}

/* ----------------------------------------- */
/* Dark theme                                */
/* ----------------------------------------- */
:is(.chat-popout, #chat-log) .message[data-theme^="dnd5e2"][data-color-scheme="dark"]::before {
  background: transparent url(../../../systems/dnd5e/ui/texture-gray1.webp) no-repeat top left;
  filter: invert(1) grayscale(1) opacity(0.5);
}
:is(.chat-popout, #chat-log) .message[data-theme^="dnd5e2"][data-color-scheme="dark"].whisper::before {
  // background: transparent url(../../../systems/dnd5e/ui/texture-gray1.webp) no-repeat top left;
  filter: invert(1) grayscale(1) opacity(0.5);
}
:is(.chat-popout, #chat-log) .message[data-theme^="dnd5e2"][data-color-scheme="dark"].blind::before {
  // background: transparent url(../../../systems/dnd5e/ui/texture-gray1.webp) no-repeat top left;
  filter: invert(1) grayscale(1);
}
[data-theme^="dnd5e2"][data-color-scheme="dark"] {
  --color-text-dark-primary: #cfd2da;
  --color-text-dark-secondary: var(--color-text-light-6);
  --text-dark: var(--color-text-dark-primary);
  --secondary: var(--dnd5e-color-blue);
  --primary: var(--dnd5e-color-maroon);

  --fieldset-border-color: #434857;
  --fieldset-background-color: transparent;
  --fieldset-legend-color: var(--dnd5e-color-gold);

  --box-shadow: 0 0 3px var(--dnd5e-shadow-45);
  --app-background: #262830;
  --app-border-color: #999;

  // --input-box-shadow: 0 0 6px var(--dnd5e-shadow-45);
  // --dui-input-background: var(--dnd5e-color-dark);
  // --dui-input-border-color: var(--dnd5e-color-gold);
  // --dui-input-focus-text-color: var(--color-text-dark-primary);
  // --dui-input-text-color: var(--color-text-dark-primary);
  // --dui-input-placeholder-color: var(--color-text-dark-5);
  // --input-text-selection-color: var(--color-secondary-3);
  // --dui-input-focus-outline-color: var(--dnd5e-color-gold);

  // --input-box-shadow: unset; No shadow in real theme
  --input-box-shadow: 0 0 2px var(--dnd5e-shadow-45);

  --dui-input-background: #262830;
  --dui-input-border-color: #262830;
  --dui-input-focus-text-color: var(--color-text-dark-primary);
  --dui-input-text-color: var(--color-text-dark-primary);
  --dui-input-placeholder-color: var(--color-text-light-6);
  --input-text-selection-color: var(--color-secondary-3);
  --dui-input-focus-outline-color: var(--dnd5e-color-gold);

  --input-disabled-background: color-mix(in srgb, var(--dnd5e-color-card) 50%, transparent);
  --input-disabled-border-color: color-mix(in srgb, var(--color-border-dark-5) 50%, transparent);

  // --dui-button-background: var(--dnd5e-color-dark);
  // --dui-button-border-color: var(--dnd5e-color-gold);
  // --dui-button-text-color: var(--dnd5e-color-gold);
  // --dui-button-focus-outline-color: var(--dnd5e-color-gold);
  // --button-hover-background: var(--dnd5e-color-iron-gray);
  // --button-hover-border-color: var(--dnd5e-color-gold);
  // --dui-button-hover-text-color: var(--dnd5e-color-gold);
  // --button-disabled-background: var(--color-primary-5);
  // --button-disabled-border-color: var(--color-primary-4);

  --dui-button-background: #262830;
  --dui-button-border-color: #999;
  --dui-button-text-color: #d0d2da;
  --dui-button-focus-outline-color: #999;
  --button-hover-background: #3a3c48;
  --button-hover-border-color: #a8a8a8;
  --dui-button-hover-text-color: #d0d2da;
  --button-disabled-background: var(--color-primary-5);
  --button-disabled-border-color: var(--color-primary-4);

  --accent-text-color: white;
  --accent-color-light: color-mix(in srgb, var(--dnd5e-color-maroon) 80%, white);
  --accent-color: var(--dnd5e-color-maroon);
  --accent-color-dark: color-mix(in srgb, var(--dnd5e-color-maroon) 80%, black);

  --inline-background: var(--dnd5e-color-dark);
  --inline-border-color: var(--dnd5e-color-gold);
  --inline-text-color: var(--color-text-dark-primary);
  --inline-icon-color: var(--dnd5e-color-gold);
  --inline-box-shadow: 0 0 3px var(--dnd5e-shadow-45);

  --text-color-disabled: var(--dnd5e-color-dark);
  --color-disabled: var(--color-text-dark-secondary);

  // prettier-ignore
  &.actor.sheet.character section.window-content .crb-style .sheet-body .sheet-content > .tab.active.feats ol.feats-list li.slot .item-name .feat-slot-title, 
  &.actor.sheet.character .crb-style .sheet-body .sheet-content .tab.feats li.feat-item .item-name .feat-slot-title {
    --accent-color: var(--dnd5e-color-card);
  }

  &.application,
  &.app.window-app {
    background: var(--dnd5e-color-dark);
    background: var(--dnd5e-color-dark) url(../../../ui/denim075.png);

    // &::before {
    //   content: "";
    //   position: absolute;
    //   inset: 0;
    //   background: url("../../../systems/dnd5e/ui/texture-gray1.webp") no-repeat top left,
    //     url("../../../systems/dnd5e/ui/texture-gray2.webp") no-repeat bottom right;
    //   border-radius: 6px;
    //   pointer-events: none;
    //   z-index: -1;
    //   filter: invert(1) grayscale(1) opacity(0.5);
    // }
  }
}
