/* ----------------------------------------- */
/* Theme colors                              */
/* ----------------------------------------- */
:root {
  --bg3-middle-brown: #9d7b53;
  --bg3-border-color: #5f5244;
  --bg3-background-1: #433c36;
  --bg3-background-2: #423c36;
  --bg3-background-3: #2a2522;
  --bg3-background-4: #292421;
  --bg3-text-1: #fafafa;
  --bg3-text-2: #d1c9b9;
  --bg3-text-3: #b0947b;
  --bg3-text-4: #e8dea8;
  --bg3-text-5: #e1d48f;
  --bg3-accent-color-light: #ff7ba2;
  --bg3-accent-color: #ea4a72;
  --bg3-accent-color-dark: #912737;
  --bg3-color-scrollbar-highlight: #fff7d3;
  --bg3-scrollbar-thumb-background: #ecc090;
  --bg3-scrollbar-thumb-border-color: #6c5842;
  --bg3-blue-light: #0c93bd;
  --bg3-blue: #183541;
  --bg3-blue-dark: #1b2a30;
  --bg3-ba-orange: #ab5623;
  --bg3-action-green: #019740;
  --bg3-pactslot-pink: #f950f9;
  --bg3-spellslot-blue: #79ffff;
  --bg3-bardic-yellow: #cfad00;
  --bg3-icon-green-stroke: #95aaa5;
  --bg3-icon-green-light: #1c4137;
  --bg3-icon-green-dark: #1d3733;
  --bg3-attention: #fe265d;

  --bg3-alliance-ally-yellow: #c09e05;
  --bg3-alliance-opposition-red: #de1847;
  --bg3-alliance-companion-blue: #08c6e4;
  --bg3-alliance-ally-green: #52fead;

  --bg3-rarity-legendary: #dfa633;
  --bg3-rarity-very-rare: #d1017b;
  --bg3-rarity-quest: #cd5f21;
  --bg3-rarity-rare: #00bffd;
  --bg3-rarity-uncommon: #01b638;
  --bg3-rarity-common: #ffe6cb;

  --bg3-info-overlay-light: rgba(255, 255, 255, 0.25);
  --bg3-info-overlay-dark: rgba(0, 0, 0, 0.25);

  /* Brown variant */
  --bg3-bg-inner: #241d16;
  --bg3-bg-outer: #1b1a19;
  --bg3-border-inner: #ab7743;
  --bg3-border-outer: #7b542e;
  --bg3-ui-purple: #4e3061;
  /* Blue variant */
  // --bg3-border-inner: #a16a37;
  // --bg3-border-outer: #4a2e18;
  // --bg3-border-internal: #304248;
  // --bg3-bg-inner: #182830;
  // --bg3-bg-outer: #151e29;

  --bg3-inspect-background: #2a2a2a;
  --bg3-inspect-border-color: #aca493;

  --bg3-healing: #49cbc1;

  --bg3-border-background: linear-gradient(
    to right,
    var(--bg3-border-outer) 0%,
    var(--bg3-border-inner) 50%,
    var(--bg3-border-outer) 100%
  );
  --bg3-tooltip-window-background: linear-gradient(
    to right,
    var(--bg3-bg-outer) 0,
    var(--bg3-bg-inner) 50%,
    var(--bg3-bg-outer) 100%
  );
  --bg3-ui-purple-background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bg3-ui-purple) 50%, transparent) 0,
    transparent 15%
  );
  --top-color: transparent;
}

/* ----------------------------------------- */
/* Map v1 styling to v2 values               */
/* ----------------------------------------- */
[data-theme^="bg3"] {
  // --color-shadow-primary: transparent;
  // --color-shadow-highlight: transparent;
  --color-border-light-highlight: var(--bg3-border-outer);
  --color-border-light-primary: var(--bg3-border-outer);
  --color-border-light-secondary: var(--bg3-border-outer);
  --color-border-light-tertiary: var(--bg3-border-inner);
  // --color-border-dark-1: var(--color-secondary-4); // darkest
  // --color-border-dark-2: var(--color-secondary-4);
  // --color-border-dark-3: var(--color-secondary-4);
  // --color-border-dark-4: var(--color-secondary-3);
  // --color-border-dark-5: var(--color-secondary-2);
  --color-border-dark-primary: var(--bg3-border-inner);
  --color-border-dark-secondary: var(--bg3-border-outer);
  // --color-border-light-1: var(--color-secondary-3);
  // --color-border-light-2: var(--color-secondary-4);
  // --color-underline-header: var(--color-primary-2);
  // --color-underline-active: var(--color-primary-1);
  --color-text-hyperlink: var(--accent-color);
  --color-border-highlight: var(--accent-color);
  --color-border-highlight-alt: var(--accent-color-dark);
  // --color-border-light-tertiary: var(--color-secondary-4);
  --color-border-divider: var(--bg3-border-color);
  // --color-bg-btn-minor-inactive: var(--app-background);
  // --color-bg-btn-minor-active: var(--color-primary-2);
  --color-text-dark-primary: var(--text-color-3);
  --color-text-dark-secondary: var(--text-color-5);
  --color-bg-option: var(--alt);
  --color-select-option-bg: #50443a !important;
}

[data-theme^="bg3"][data-dorako-ui-scope="limited"],
[data-theme^="bg3"] {
  --window-app-background: var(--bg3-tooltip-window-background) padding-box, var(--bg3-border-background) border-box;
  --window-app-border-color: transparent;
  --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");
}

/* ----------------------------------------- */
/* DUI variables                             */
/* ----------------------------------------- */
[data-chat-interface-theme^="bg3"] #sidebar-tabs,
[data-chat-interface-theme^="bg3"] #chat-log ~ *,
[data-theme^="bg3"] {
  /* Base colors */
  --color-primary-1: var(--bg3-accent-color-light);
  --color-primary-2: var(--bg3-accent-color);
  --color-primary-3: var(--bg3-border-outer);
  // --color-primary-3-75: color-mix(in srgb, var(--color-primary-3) 75%, transparent);
  // --color-primary-4-75: color-mix(in srgb, var(--color-primary-4) 75%, transparent);
  --color-primary-4: var(--bg3-blue-dark);
  // --color-primary-5: var(--remaster-dark);
  // --color-secondary-1: var(--bg3-accent-text-color);
  // --color-secondary-2: var(--bg3-accent-color);
  // --color-secondary-3: var(--bg3-accent-color-dark);
  // --color-secondary-3-75: color-mix(in srgb, var(--color-secondary-3) 75%, transparent);
  /* Misc variables */
  --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");
  --box-shadow: 0px 1px 2px black;
  --icon-border-color: #ab7743;
  /* Window app variables */
  --window-app-background: radial-gradient(circle at bottom right, #2c282433 0%, #2c2824ff 50%, #0c0804ee 100%),
    radial-gradient(circle at center, transparent 0, #0c0804ee 100%); // Translucent one
  --window-app-border-color: var(--bg3-middle-brown);
  --window-app-border-width: 2px;
  --window-app-box-shadow: 0px 5px 20px 3px black;
  /* App variables */
  --app-background: #161511aa;
  --app-border-color: var(--bg3-border-color);
  --app-border-width: 1px;
  /* Inline variables */
  --inline-background: transparent;
  --inline-border-color: transparent;
  --inline-text-color: var(--bg3-text-4);
  --inline-icon-color: var(--bg3-text-5);
  --inline-box-shadow: none;
  --inline-text-shadow: 0px 1px 1px black;
  /* Input variables */
  --input-box-shadow: none;
  --dui-input-border-color: var(--bg3-bg-outer);
  --dui-input-background: color-mix(in srgb, var(--alt) 50%, transparent);
  --input-disabled-background: var(--bg3-background-4);
  --input-disabled-border-color: var(--bg3-background-3);
  --dui-input-focus-outline-color: var(--tertiary);
  --dui-input-text-color: var(--text-color-2);
  /* Button variables */
  --dui-button-background: var(--app-background);
  --dui-button-border-color: #403b2d;
  --dui-button-text-color: var(--text-color-3);
  --dui-button-focus-outline-color: #d3b87c;
  --button-hover-background: var(--bg3-accent-color-dark);
  --button-hover-border-color: #9a8860;
  --dui-button-hover-text-color: var(--text-color-1);
  --button-disabled-background: rgba(60, 60, 60, 0.5);
  --button-disabled-border-color: rgba(160, 160, 160, 0.5);

  --button-toggle-border-color: #d3b87c;
  --button-toggle-background: radial-gradient(circle, #175868 0, black 100%);
  --button-toggle-hover-background: radial-gradient(circle, var(--bg3-blue-light) 0, var(--bg3-blue) 100%);
  --button-toggle-hover-border-color: #edd5a2;

  --button-bright-text-color: var(--bg3-text-1);
  /* Fieldset variables */
  --fieldset-border-color: transparent;
  --fieldset-background-color: rgba(0, 0, 0, 0.2);
  --fieldset-legend-color: var(--bg3-text-4);
  /* Scrollbar and accent variables */
  --scrollbar-thumb-background: var(--bg3-scrollbar-thumb-background);
  --scrollbar-thumb-border-color: var(--bg3-scrollbar-thumb-border-color);
  --color-scrollbar-hover: var(--bg3-color-scrollbar-highlight);
  --accent-text-color: var(--bg3-text-1);
  --accent-color-light: var(--bg3-accent-color-light);
  --accent-color: var(--bg3-accent-color);
  --accent-color-dark: var(--bg3-accent-color-dark);
  /* Other */

  --rarity-common: var(--bg3-rarity-common) !important;
  --rarity-uncommon: var(--bg3-rarity-uncommon) !important;
  --rarity-rare: var(--bg3-rarity-rare) !important;
  --rarity-unique: var(--bg3-rarity-very-rare) !important;
  --color-rarity-common: var(--bg3-rarity-common) !important;
  --color-rarity-uncommon: var(--bg3-rarity-uncommon) !important;
  --color-rarity-rare: var(--bg3-rarity-rare) !important;
  --color-rarity-unique: var(--bg3-rarity-very-rare) !important;

  --bg3-ui-top-background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--top-color) 40%, transparent) 0,
    transparent 40%
  );

  &[data-rarity="common"] {
    --rarity: var(--rarity-common);
  }
  &[data-rarity="uncommon"] {
    --rarity: var(--rarity-uncommon);
  }
  &[data-rarity="rare"] {
    --rarity: var(--rarity-rare);
  }
  &[data-rarity="unique"] {
    --rarity: var(--rarity-unique);
  }
  &[data-rarity] {
    &.window-app {
      --top-color: var(--rarity);
      --window-app-border-color: transparent;
      --window-app-background: var(--bg3-ui-top-background) border-box, var(--bg3-ui-purple-background),
        var(--bg3-tooltip-window-background) padding-box, var(--bg3-border-background) border-box;
    }
  }

  tags.tags.paizo-style {
    --tags-border-color: transparent;
  }

  &.window-app button.bright {
    --dui-button-background: var(--accent-color);
    --dui-button-border-color: var(--accent-color-dark);
    --dui-button-text-color: white !important;
    --dui-button-hover-text-color: white !important;
  }

  &[data-dorako-ui-scope="limited"].dorako-ux.sheet.pf2e.actor.npc {
    --bg3-border-inner: #a16a37;
    --bg3-border-outer: #4a2e18;
    --bg3-border-internal: #304248;
    --bg3-bg-inner: #182830;
    --bg3-bg-outer: #151e29;

    --bg3-border-background: linear-gradient(
      to right,
      var(--bg3-border-outer) 0%,
      var(--bg3-border-inner) 50%,
      var(--bg3-border-outer) 100%
    );

    --dui-input-placeholder-color: var(--bg3-text-3);
    --section-background: linear-gradient(
      to right,
      var(--bg3-bg-outer) 0,
      var(--bg3-bg-inner) 50%,
      var(--bg3-bg-outer) 100%
    );
    --section-header: linear-gradient(
      to right,
      var(--bg3-bg-outer) 0,
      var(--bg3-bg-inner) 50%,
      var(--bg3-bg-outer) 100%
    );
    --section-border-color: var(--bg3-border-inner);
    --section-outline-color: var(--bg3-border-outer);
    --section-header-text-color: var(--bg3-text-2);
    --tag-border-color: var(--bg3-border-internal);
    --tag-background-color: transparent;
    --tag-text-color: var(--bg3-text-4);
    --color-text-dark-input: var(--bg3-text-2);
    --dui-input-border-color: transparent;
    --dui-input-background: rgba(0, 0, 0, 0.1);
    --dui-input-focus-outline-color: var(--bg3-border-internal);
    --dui-input-placeholder-color: var(--text-color-5);

    --color-border-light-tertiary: var(--bg3-border-inner);
    --text-dark: var(--bg3-text-4);

    form .side-bar-section:not(.collapsed) .side-bar-section-header,
    form .section-container .section-header {
      border-width: 0 0 2px;
      border-image: linear-gradient(90deg, transparent, var(--bg3-border-internal) 50%, transparent) 1 repeat;
      position: relative;
      .side-bar-label,
      h4 {
        z-index: 1;
      }
      &::before {
        background: rgba(255, 255, 255, 0.1);
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.33), transparent);
      }
    }
  }
}

/* ----------------------------------------- */
/* System variables                          */
/* ----------------------------------------- */
[data-theme^="bg3"] {
  --color-text-dark-primary: var(--text-color-2);
  --bg: rgba(0, 0, 0, 0.5);
  --sub: var(--bg3-middle-brown);
  --text-dark: var(--bg3-text-1);
  --color-border-light-1: var(--color-text-light-highlight);
  --color-underline-header: var(--bg3-middle-brown);
}

/* ----------------------------------------- */
/* Specifics                                 */
/* ----------------------------------------- */
[data-theme^="bg3"] {
  .roll-note[data-visibility="gm"],
  table.pf2e,
  table.pf2-table {
    --inline-background: color-mix(in srgb, var(--bg3-accent-color-dark) 75%, transparent);
    --inline-border-color: var(--bg3-accent-color);
    --inline-text-color: var(--bg3-text-1);
    --inline-icon-color: var(--bg3-text-1);
    --inline-box-shadow: 0px 1px 2px black;
    --inline-text-shadow: 0px 1px 1px black;
  }

  // table.pf2e tr:nth-child(odd),
  // table.pf2-table tr:nth-child(odd) {
  //   color: black;
  // }
  h1 {
    border-image: linear-gradient(90deg, transparent, var(--color-underline-header) 50%, transparent) 1;
  }

  &.spellcasting-entry.preparation .item-name {
    --secondary: var(--bg3-text-4);
  }

  &.app.window-app {
    box-shadow: var(--window-app-box-shadow), 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset;
  }

  &.pf2e.item.sheet.app {
    --color-border-medium: var(--bg3-border-color);
  }

  &.actor.sheet .crb-style .sheet-body {
    --color-border-medium: var(--brown-1);
    --color-border-divider: var(--scrollbar-thumb-border-color);
    --text-dark: var(--bg3-text-2);
  }
  &.actor.sheet .inventory .list-row .item-controls {
    --secondary: var(--bg3-text-1);
  }

  &.actor.sheet.character {
    --color-border-light-2: var(--bg3-border-color);
  }

  &.actor.sheet.character .crb-style .sheet-body .sheet-content .tab.effects .effects-list .item,
  &.actor.sheet .crb-style .sheet-body .sheet-content .tab.actions ol.actions-list li.action,
  &.actor.sheet .crb-style .sheet-body .sheet-content .tab.actions ol.actions-list li.strike,
  &.actor.sheet.character .crb-style .sheet-body .sheet-content .tab.actions ol.actions-list li.strike {
    border-image: linear-gradient(90deg, transparent, var(--bg3-text-2) 20%, transparent) 1 !important;
  }

  // prettier-ignore
  &.actor.sheet .inventory .list-row .item-controls,
  &.actor.sheet.character .crb-style .sheet-body .sheet-content .tab.feats .feat-item .item-name .feat-slot-title,
  &.actor.sheet .crb-style .sheet-body .sheet-content ol.spell-list > li .item-name h4:hover,
  &.actor.sheet.character .crb-style .sheet-body .sheet-content .tab.spellcasting .spellcasting-entry .spell-ability-data .skill-score {
      --secondary: var(--bg3-text-1);
      --color-pf-secondary: var(--bg3-text-1);
      --fa-inverse: black;
  }

  &.actor.sheet.character .crb-style .sheet-body .sheet-content .tab.proficiencies .lores-list .skill,
  &.actor.sheet.character .crb-style .sheet-body .sheet-content .tab.proficiencies .combat-list .skill,
  &.actor.sheet.character .crb-style .sheet-body .sheet-content .tab.proficiencies .skills-list .skill {
    --primary: var(--tertiary);
  }

  &.actor.sheet.character .crb-style .sheet-body .sheet-content .tab.effects .effects-list .item,
  &.actor.sheet .crb-style .sheet-body .sheet-content .tab.actions ol.actions-list li.action,
  &.actor.sheet .crb-style .sheet-body .sheet-content .tab.actions ol.actions-list li.strike {
    border-image: linear-gradient(90deg, transparent, var(--tertiary) 20%, transparent) 1;
  }

  &.window-app.sidebar-popout {
    border: none;
  }
}

/* ----------------------------------------- */
/* FPS display                               */
/* ----------------------------------------- */
#fps[data-theme^="bg3"] {
  background: var(--bg3-tooltip-window-background) padding-box,
    linear-gradient(to right, var(--bg3-border-outer) 0%, var(--bg3-border-inner) 50%, var(--bg3-border-outer) 100%)
      border-box;
  border: 2px solid transparent;
  box-shadow: 0px 0px 30px black, 0px 0px 20px black, 0px 0px 10px black;
}

/* ----------------------------------------- */
/* Tooltip                                   */
/* ----------------------------------------- */
#tooltip[data-theme^="bg3"] {
  --border-radius: 12px;
  --bg3-border-inner: #a16a37;
  --bg3-border-outer: #4a2e18;
  --bg3-border-internal: #304248;
  --bg3-bg-inner: #182830;
  --bg3-bg-outer: #151e29;

  --bg3-border-background: linear-gradient(
    to right,
    var(--bg3-border-outer) 0%,
    var(--bg3-border-inner) 50%,
    var(--bg3-border-outer) 100%
  );
  --bg3-tooltip-window-background: linear-gradient(
    to right,
    var(--bg3-bg-outer) 0,
    var(--bg3-bg-inner) 50%,
    var(--bg3-bg-outer) 100%
  );
  box-shadow: 0px 0px 30px black, 0px 0px 20px black, 0px 0px 10px black, 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset;
  backdrop-filter: none;
  border-radius: var(--border-radius);
  text-shadow: none;
  padding: 1em 1em;
  font-family: var(--serif);
  color: var(--bg3-text-3);
  background: var(--bg3-tooltip-window-background) padding-box,
    linear-gradient(to right, var(--bg3-border-outer) 0%, var(--bg3-border-inner) 50%, var(--bg3-border-outer) 100%)
      border-box;
  border: 2px solid transparent;
}

[data-theme^="bg3"]#effects-panel {
  .effect-item .effect-info {
    background: var(--bg3-tooltip-window-background) padding-box,
      linear-gradient(to right, var(--bg3-border-outer) 0%, var(--bg3-border-inner) 50%, var(--bg3-border-outer) 100%)
        border-box;
    border: 2px solid transparent;
    box-shadow: 0px 0px 30px black, 0px 0px 20px black, 0px 0px 10px black, 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset;
    backdrop-filter: none;
    border-radius: var(--border-radius);
    text-shadow: none;
    color: var(--bg3-text-3);
  }
  .effect-item > .icon {
    // --box-shadow: var(--gold-and-glow);
    --border-radius: 50%;
    --icon-border-color: #d3b87c;
    outline: 1px solid #9a8860;
    &.aura {
      border-radius: 33%;
      transform: scale(0.8);
    }
  }
}

/* ----------------------------------------- */
/* Navigation                                */
/* ----------------------------------------- */
[data-dorako-ui-scope="navigation"][data-theme^="bg3"] {
  #nav-toggle {
    background: var(--bg3-tooltip-window-background) padding-box, var(--bg3-border-background) border-box !important;
    border: 2px solid transparent !important;
    box-shadow: 0px 1px 2px black, 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset !important;
  }

  .scene {
    border: 2px solid transparent !important;
    line-height: calc(var(--control-size) - 4px) !important;
    position: relative;
    box-shadow: 0px 1px 2px black, 0px 0px 5px black, 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset !important;
    --button-toggle-focus-outline-color: #d3b87c;
    &.view::before {
      background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
      border-radius: var(--border-radius);
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
      z-index: 0;
    }
  }

  .scene:not(.gm) {
    --button-toggle-background: var(--bg3-tooltip-window-background) padding-box,
      var(--bg3-border-background) border-box;
    --button-toggle-hover-background: var(--bg3-tooltip-window-background) padding-box,
      var(--bg3-border-background) border-box;
  }

  .scene.gm {
    --bg3-border-inner: #a16a37;
    --bg3-border-outer: #4a2e18;
    --bg3-border-internal: #304248;
    --bg3-bg-inner: #182830;
    --bg3-bg-outer: #151e29;

    --bg3-border-background: linear-gradient(
      to right,
      var(--bg3-border-outer) 0%,
      var(--bg3-border-inner) 50%,
      var(--bg3-border-outer) 100%
    );
    --bg3-tooltip-window-background: linear-gradient(
      to right,
      var(--bg3-bg-outer) 0,
      var(--bg3-bg-inner) 50%,
      var(--bg3-bg-outer) 100%
    );
    --button-toggle-background: var(--bg3-tooltip-window-background) padding-box,
      var(--bg3-border-background) border-box;
    --button-toggle-hover-background: var(--bg3-tooltip-window-background) padding-box,
      var(--bg3-border-background) border-box;
    &.active:not(.view) {
      --button-toggle-focus-outline-color: transparent;
    }
  }
}

/* ----------------------------------------- */
/* Hotbar                                    */
/* ----------------------------------------- */
[data-dorako-ui-scope="hotbar"][data-theme^="bg3"] {
  // position: relative;
  // &::before {
  //   // background: var(--bg3-ui-purple-background);
  //   background: rgba(255, 255, 255, 0.1);
  //   content: "";
  //   position: absolute;
  //   bottom: -10px;
  //   left: -5px;
  //   width: 648px;
  //   height: 122px;
  //   box-shadow: 0px 0px 30px black, 0px 0px 20px black, 0px 0px 10px black !important;
  //   border-radius: 10px 10px 0px 0px;
  //   border-bottom: none !important;
  //   overflow: visible;
  //   pointer-events: none;
  //   background: var(--bg3-tooltip-window-background);
  //   border: 4px solid var(--bg3-border-outer) !important;
  //   border-bottom: none !important;
  // }

  nav.action-bar {
    // background: rgba(0, 0, 0, 0.5);
    border-radius: var(--border-radius);
    --app-border-color: rgba(0, 0, 0, 0.4);
    --box-shadow: 0px 0px 6px 2px black inset;
    .macro {
      --border-radius: 3px;
      --app-background: rgba(80, 80, 80, 0.4);
    }
  }
  .bar-controls {
    background: var(--bg3-tooltip-window-background) !important;
    border: 1px solid var(--bg3-border-outer) !important;
    border-top-color: var(--bg3-border-inner) !important;
    border-bottom-color: var(--bg3-border-inner) !important;
    box-shadow: var(--box-shadow), 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset !important;
    z-index: 1;
  }
}

/* ----------------------------------------- */
/* Chat message                              */
/* ----------------------------------------- */
[data-theme^="bg3"].chat-message .message-content .damage-application button[data-action="apply-healing"]:hover,
[data-theme^="bg3"].chat-message
  .message-content
  + .pf2e-toolbelt-target-damage
  .target-damage-application
  button[data-action="target-apply-healing"]:hover {
  --color-level-success: var(--bg3-healing) !important;
  --color-level-success-border: color-mix(in srgb, var(--bg3-healing) 20%, white) !important;
}

[data-theme^="bg3"].message
  .message-content
  .damage-application
  button[data-action="apply-healing"]
  .fa-stack
  i.fa-plus {
  --fa-inverse: black;
}

[data-theme^="bg3"].message.chat-message {
  --window-app-background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--player-color) 40%, transparent) 0,
        transparent 40%
      )
      border-box,
    var(--bg3-tooltip-window-background) padding-box,
    linear-gradient(to right, var(--bg3-border-outer) 0%, var(--bg3-border-inner) 50%, var(--bg3-border-outer) 100%)
      border-box;
  background: var(--window-app-background);
  border: 2px solid transparent !important;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset;

  &[data-theme^="bg3-blue"] {
    --bg3-border-inner: #a16a37;
    --bg3-border-outer: #4a2e18;
    --bg3-border-internal: #304248;
    --bg3-bg-inner: #182830;
    --bg3-bg-outer: #151e29;

    --bg3-border-background: linear-gradient(
      to right,
      var(--bg3-border-outer) 0%,
      var(--bg3-border-inner) 50%,
      var(--bg3-border-outer) 100%
    );
    --bg3-tooltip-window-background: linear-gradient(
      to right,
      var(--bg3-bg-outer) 0,
      var(--bg3-bg-inner) 50%,
      var(--bg3-bg-outer) 100%
    );
    background: linear-gradient(to bottom, color-mix(in srgb, var(--player-color) 40%, transparent) 0, transparent 40%)
        border-box,
      var(--bg3-tooltip-window-background) padding-box,
      linear-gradient(to right, var(--bg3-border-outer) 0%, var(--bg3-border-inner) 50%, var(--bg3-border-outer) 100%)
        border-box;

    .card-content hr {
      border-color: var(--bg3-border-outer);
      border: solid transparent;
      border-image: linear-gradient(90deg, #f1edea, #d5cac1) 1 repeat;
      border-width: 0 0 2px;
      border-image: linear-gradient(90deg, transparent, var(--bg3-border-internal) 50%, transparent) 1 repeat;
    }

    &.dfce-cm-middle,
    &.dfce-cm-bottom {
      background: var(--bg3-tooltip-window-background) padding-box,
        linear-gradient(to right, var(--bg3-border-outer) 0%, var(--bg3-border-inner) 50%, var(--bg3-border-outer) 100%)
          border-box;
      border-top-width: 1px !important;
    }
  }

  &.dfce-cm-top {
    border-bottom-width: 1px !important;
  }
  &.dfce-cm-middle,
  &.dfce-cm-bottom {
    background: var(--bg3-tooltip-window-background) padding-box,
      linear-gradient(to right, var(--bg3-border-outer) 0%, var(--bg3-border-inner) 50%, var(--bg3-border-outer) 100%)
        border-box;
    border-top-width: 1px !important;
  }
  &.dfce-cm-middle {
    border-bottom-width: 1px !important;
  }

  .message-header {
    color: var(--bg3-text-1);
    background: none;
  }

  .card-content hr {
    border: 1px solid var(--bg3-border-outer);
  }

  &[data-has-footer] {
    padding-bottom: 0px;
    .pf2e.chat-card .card-footer {
      position: relative;
      padding: 5px 5px 5px 5px;
      border-radius: 0px 0px 3px 3px;
      border: none;
      background: linear-gradient(
        to top,
        color-mix(in srgb, var(--bg3-ui-purple) 60%, transparent) 0,
        transparent 100%
      );
      &::before {
        background: linear-gradient(to top, color-mix(in srgb, var(--bg3-text-3) 10%, transparent) 0, transparent 100%);
        content: "";
        position: absolute;
        top: -25px;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
        z-index: 0;
      }
    }
  }

  .message-timestamp,
  .header-meta {
    @include dui-app;
    background-color: color-mix(in srgb, var(--player-color) 33%, transparent);
    border-color: color-mix(in srgb, var(--player-color) 50%, rgba(255, 255, 255, 0.5)) !important;
    color: var(--bg3-text-1);
    text-shadow: 0px 1px 1px black;

    &.whisper {
      background-color: color-mix(in srgb, var(--bg3-alliance-companion-blue) 50%, transparent);
      border-color: color-mix(in srgb, var(--bg3-alliance-companion-blue) 100%, rgba(255, 255, 255, 0.5)) !important;
    }
    &.blind {
      background-color: color-mix(in srgb, var(--bg3-alliance-opposition-red) 50%, transparent);
      border-color: color-mix(in srgb, var(--bg3-alliance-opposition-red) 100%, rgba(255, 255, 255, 0.5)) !important;
    }
  }

  .tags .tag.tag_transparent:not([data-visibility]:not([data-visibility="all"])),
  .tags .tag option.tag_transparent:not([data-visibility]:not([data-visibility="all"])) {
    background-color: color-mix(in srgb, var(--player-color) 20%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--player-color) 50%, rgba(255, 255, 255, 0.5));
  }

  .dice-tooltip .part-header {
    border-color: var(--damage-color);
    .part-total {
      border-color: var(--damage-color);
    }
  }
}

/* ----------------------------------------- */
/* Placeable HUD                             */
/* ----------------------------------------- */
[data-theme="bg3"] [data-dorako-ui-scope="placeable-hud"] {
  // Space is intentional
  --dui-button-background: radial-gradient(circle, #363534 0, black 100%);
  --dui-button-border-color: #594537;
  --button-hover-background: radial-gradient(circle, var(--bg3-alliance-opposition-red) 0, black 100%);
  --dui-button-focus-outline-color: #d3b87c;
  --button-hover-border-color: #9a8860;
  --button-toggle-border-color: #d3b87c;
  --button-toggle-background: radial-gradient(circle, #0d3c48 0, black 100%);
  --button-toggle-hover-background: radial-gradient(circle, var(--bg3-blue-light) 0, var(--bg3-blue) 100%);
}

/* ----------------------------------------- */
/* Controls                                  */
/* ----------------------------------------- */
[data-dorako-ui-scope="controls"][data-theme="bg3"] {
  --dui-button-background: radial-gradient(circle, #363534 0, black 100%);
  --dui-button-border-color: #594537;
  --button-hover-background: radial-gradient(circle, var(--bg3-alliance-opposition-red) 0, black 100%);
  --dui-button-focus-outline-color: #d3b87c;
  --button-hover-border-color: #9a8860;
  --box-shadow: 0px 0px 5px black, 0px 1px 2px black;
}

[data-dorako-ui-scope="players"][data-theme="bg3"] {
  --app-background: var(--bg3-tooltip-window-background) padding-box,
    linear-gradient(to right, var(--bg3-border-outer) 0%, var(--bg3-border-inner) 50%, var(--bg3-border-outer) 100%)
      border-box;
  --app-border-color: transparent;
  --app-border-width: 2px;
  box-shadow: 0px 0px 20px black, 0px 0px 10px black, 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset !important;
  &#players h3 {
    margin: 3px 0px;
  }
}

/* ----------------------------------------- */
/* TAH                                       */
/* ----------------------------------------- */
[data-theme="bg3"]#token-action-hud {
  --dui-button-background: radial-gradient(#363534 0, black 100%);
  --dui-button-border-color: #594537;
  --button-hover-background: radial-gradient(var(--bg3-alliance-opposition-red) 0, black 100%);
  --dui-button-focus-outline-color: #d3b87c;
  --button-hover-border-color: #9a8860;
}

[data-theme="bg3"].locked-tooltip.tah-tooltip,
[data-theme="bg3"].tah-tooltip,
[data-theme="bg3"]#tooltip.active:has(.tah-tooltip-wrapper) {
  --bg3-border-inner: #a16a37;
  --bg3-border-outer: #4a2e18;
  --bg3-border-internal: #304248;
  --bg3-bg-inner: #182830;
  --bg3-bg-outer: #151e29;

  --bg3-border-background: linear-gradient(
    to right,
    var(--bg3-border-outer) 0%,
    var(--bg3-border-inner) 50%,
    var(--bg3-border-outer) 100%
  );
  --bg3-tooltip-window-background: linear-gradient(
    to right,
    var(--bg3-bg-outer) 0,
    var(--bg3-bg-inner) 50%,
    var(--bg3-bg-outer) 100%
  );

  background: var(--bg3-tooltip-window-background) padding-box, var(--bg3-border-background) border-box !important;
  box-shadow: 0px 0px 20px black, 0px 0px 10px black, 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset !important;

  h3 {
    color: var(--bg3-text-1);
  }

  strong {
    color: var(--bg3-text-2);
  }

  hr {
    margin-left: -16px;
    margin-right: -16px;
    border-color: var(--bg3-border-outer);
    border: solid transparent;
    border-image: linear-gradient(90deg, #f1edea, #d5cac1) 1 repeat;
    border-width: 0 0 2px;
    border-image: linear-gradient(90deg, transparent, var(--bg3-border-internal) 50%, transparent) 1 repeat;
    width: auto;
  }
}

[data-theme^="bg3"][data-dorako-ui-scope="limited"]#rolodex {
  --window-app-border-width: 2px;
  --window-app-border-color: #7b542e;
  .sheet-navigation-controls {
    --app-background: #7b542e;
    --box-shadow: none;
  }
}

/* ----------------------------------------- */
/* ITT                                       */
/* ----------------------------------------- */
[data-theme="bg3"]#pf2e-token-hud {
  --bg3-border-inner: #a16a37;
  --bg3-border-outer: #4a2e18;
  --bg3-border-internal: #304248;
  --bg3-bg-inner: #182830;
  --bg3-bg-outer: #151e29;

  --bg3-border-background: linear-gradient(
    to right,
    var(--bg3-border-outer) 0%,
    var(--bg3-border-inner) 50%,
    var(--bg3-border-outer) 100%
  );
  --bg3-tooltip-window-background: linear-gradient(
    to right,
    var(--bg3-bg-outer) 0,
    var(--bg3-bg-inner) 50%,
    var(--bg3-bg-outer) 100%
  );
  > div {
    background: var(--bg3-tooltip-window-background) padding-box, var(--bg3-border-background) border-box !important;
    box-shadow: 0px 0px 20px black, 0px 0px 10px black, 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset !important;
  }
  --app-border-color: transparent;
  --app-border-width: 2px;

  --color-primary-1: green;
  --color-primary-2: var(--bg3-text-1);
  --color-secondary-4: var(--bg3-bg-inner);
  --color-secondary-5: var(--bg3-border-outer);

  a:hover {
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
  }

  .item-img.hover {
    --color-primary-1: var(--bg3-text-1);
    --color-primary-2: var(--bg3-accent-color-dark);
  }

  .inner {
    .header {
      z-index: 1;
      &::before {
        // background: var(--bg3-ui-purple-background);
        background: rgba(255, 255, 255, 0.1);
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 27px;
        // box-shadow: 0px 0px 30px black, 0px 0px 20px black, 0px 0px 10px black !important;
        // border-radius: 10px 10px 0px 0px;
        overflow: hidden;
        pointer-events: none;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.33), transparent);
      }
    }
    .footer {
      position: relative;
      z-index: 1;
      margin-left: -5px;
      margin-right: -5px;

      a {
        z-index: 1;
      }

      &::before {
        // background: var(--bg3-ui-purple-background);
        background: rgba(255, 255, 255, 0.1);
        content: "";
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 24px;
        // box-shadow: 0px 0px 30px black, 0px 0px 20px black, 0px 0px 10px black !important;
        // border-radius: 10px 10px 0px 0px;
        overflow: hidden;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.33), transparent);
      }
    }
  }
  .inner > hr {
    margin-left: -5px;
    margin-right: -5px;
    border-color: var(--bg3-border-outer);
    border: solid transparent;
    border-image: linear-gradient(90deg, #f1edea, #d5cac1) 1 repeat;
    border-width: 0 0 2px;
    border-image: linear-gradient(90deg, transparent, var(--bg3-border-internal) 50%, transparent) 1 repeat;
    width: auto;
  }
  .sidebar {
    box-shadow: 0px 0px 20px black, 0px 0px 10px black, 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset !important;
  }
  .distance.free {
    --app-background: var(--bg3-bg-outer);
    --app-border-color: var(--bg3-border-inner);
  }
  .popup {
    box-shadow: 0px 0px 30px black, 0px 0px 20px black, 0px 0px 10px black, 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset !important;
  }
}

/* ----------------------------------------- */
/* ITT PF2e HUD                              */
/* ----------------------------------------- */

[data-theme="bg3"][id^="pf2e-hud-tooltip"] {
  --bg3-border-inner: #a16a37;
  --bg3-border-outer: #4a2e18;
  --bg3-border-internal: #304248;
  --bg3-bg-inner: #182830;
  --bg3-bg-outer: #151e29;

  --bg3-border-background: linear-gradient(
    to right,
    var(--bg3-border-outer) 0%,
    var(--bg3-border-inner) 50%,
    var(--bg3-border-outer) 100%
  );
  --bg3-tooltip-window-background: linear-gradient(
    to right,
    var(--bg3-bg-outer) 0,
    var(--bg3-bg-inner) 50%,
    var(--bg3-bg-outer) 100%
  );

  > div {
    --app-border-width: 1px; // breaks with 2px
    border-color: transparent !important;
    background: var(--bg3-tooltip-window-background) padding-box, var(--bg3-border-background) border-box !important;
    box-shadow: 0px 0px 20px black, 0px 0px 10px black, 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset !important;
  }

  // &[id^="pf2e-hud-tooltip"] {
  //   padding: 12px !important;
  //   --app-border-width: 0px;
  // }
}

[data-theme="bg3"][id^="pf2e-hud-persistent"] .shortcut.app > .app {
  --bg3-border-inner: #a16a37;
  --bg3-border-outer: #4a2e18;
  --bg3-border-internal: #304248;
  --bg3-bg-inner: #182830;
  --bg3-bg-outer: #151e29;
  --bg3-border-background: linear-gradient(
    to right,
    var(--bg3-border-outer) 0%,
    var(--bg3-border-inner) 50%,
    var(--bg3-border-outer) 100%
  );
  --bg3-tooltip-window-background: linear-gradient(
    to right,
    var(--bg3-bg-outer) 0,
    var(--bg3-bg-inner) 50%,
    var(--bg3-bg-outer) 100%
  );

  --app-border-width: 1px; // breaks with 2px
  border-color: transparent !important;
  background: var(--bg3-tooltip-window-background) padding-box, var(--bg3-border-background) border-box !important;
  box-shadow: 0px 0px 10px black, 0px 0px 5px black, 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset !important;
}

[data-theme="bg3"][id^="pf2e-hud-persistent"],
[data-theme="bg3"][id^="pf2e-hud-tracker"],
[data-theme="bg3"][id^="pf2e-hud-sidebar"],
.game [data-theme="bg3"][id^="pf2e-hud-token"] #pf2e-hud-token-main.exploded {
  --bg3-bg-inner: #241d16;
  --bg3-bg-outer: #1b1a19;
  --bg3-border-inner: #ab7743;
  --bg3-border-outer: #7b542e;
  --app-border-width: 1px;

  --bg3-border-background: linear-gradient(
    to right,
    var(--bg3-border-outer) 0%,
    var(--bg3-border-inner) 50%,
    var(--bg3-border-outer) 100%
  );
  --bg3-tooltip-window-background: linear-gradient(
    to right,
    var(--bg3-bg-outer) 0,
    var(--bg3-bg-inner) 50%,
    var(--bg3-bg-outer) 100%
  );

  > .inner,
  > .panel {
    // #pf2e-hud-token-main.exploded > .panel
    // --bg3-bg-inner: #241d16;
    // --bg3-bg-outer: #1b1a19;
    // --bg3-border-inner: #ab7743;
    // --bg3-border-outer: #7b542e;
    --app-border-width: 1px;
    --bg3-tooltip-window-background: linear-gradient(
      to right,
      var(--bg3-bg-outer) 0,
      var(--bg3-bg-inner) 50%,
      var(--bg3-bg-outer) 100%
    );
    --app-border-width: 2px;
    background: var(--bg3-tooltip-window-background) padding-box, var(--bg3-border-background) border-box !important;
    box-shadow: 0px 0px 20px black, 0px 0px 10px black, 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset !important;
  }

  &[id^="pf2e-hud-tracker"] {
    // --bg3-bg-inner: #241d16;
    // --bg3-bg-outer: #1b1a19;
    background: var(--bg3-tooltip-window-background) padding-box, var(--bg3-border-background) border-box !important;
    box-shadow: 0px 0px 20px black, 0px 0px 10px black, 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset !important;
  }

  &[id^="pf2e-hud-persistent"].app,
  &[id^="pf2e-hud-persistent"] .app {
    // --bg3-bg-inner: #241d16;
    // --bg3-bg-outer: #1b1a19;
    // --bg3-border-inner: #ab7743;
    // --bg3-border-outer: #7b542e;
    --app-border-width: 1px;
    --bg3-tooltip-window-background: linear-gradient(
      to right,
      var(--bg3-bg-outer) 0,
      var(--bg3-bg-inner) 50%,
      var(--bg3-bg-outer) 100%
    );
    background: var(--bg3-tooltip-window-background) padding-box, var(--bg3-border-background) border-box !important;
    border: 1px solid var(--bg3-border-outer) !important;
    border-top-color: var(--bg3-border-inner) !important;
    border-bottom-color: var(--bg3-border-inner) !important;
    box-shadow: var(--box-shadow), 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset !important;
  }

  --app-border-color: transparent;
  --app-border-width: 2px;

  --color-primary-1: green;
  --color-primary-2: var(--bg3-text-1);
  --color-secondary-4: var(--bg3-bg-inner);
  --color-secondary-5: var(--bg3-border-outer);
}

/* ----------------------------------------- */
/* Chatlog                                   */
/* ----------------------------------------- */
[data-chat-interface-theme="bg3"] {
  --scrollbar-thumb-background: var(--bg3-scrollbar-thumb-background);
  --scrollbar-thumb-border-color: var(--bg3-scrollbar-thumb-border-color);
  --color-scrollbar-hover: var(--bg3-color-scrollbar-highlight);

  #sidebar-tabs {
    --button-hover-background: radial-gradient(circle, var(--bg3-alliance-opposition-red) 50%, black 100%);
    --button-hover-border-color: #d3b87c;
  }
}

[data-chat-interface-theme="bg3"] #chat-log ~ * {
  #dorako-rt-buttons button {
    --button-toggle-background: radial-gradient(circle, #363534 0, black 100%);
    --dui-button-focus-outline-color: #d3b87c;
    --button-toggle-border-color: #9a8860;
    --button-toggle-hover-border-color: #9a8860;
    &[data-id="publicroll"] {
      --button-hover-background: radial-gradient(circle, var(--bg3-alliance-ally-yellow) 0, black 100%);
    }
    &[data-id="gmroll"] {
      --button-hover-background: radial-gradient(circle, var(--bg3-alliance-companion-blue) 0, black 100%);
    }
    &[data-id="blindroll"] {
      --button-hover-background: radial-gradient(circle, var(--bg3-alliance-opposition-red) 0, black 100%);
    }
    &[data-id="selfroll"] {
      --button-hover-background: radial-gradient(circle, var(--bg3-alliance-ally-green) 0, black 100%);
    }
  }
}
