[data-theme] {
  &.chat-message.message .pf2e-token-hud .rk-lores,
  &.chat-message.message .pf2e-token-hud .rk-lores-rolls,
  &.chat-message.message .pf2e-token-hud .rk-skills,
  &.chat-message.message .pf2e-token-hud .rk {
    --rarity-uncommon: #c45500;
    --rarity-rare: #5362ff;
    --rarity-unique: #e127e1;
    --color-rarity-uncommon: #c45500;
    --color-rarity-rare: #5362ff;
    --color-rarity-unique: #e127e1;
    --color-rank-1: dodgerblue; // Symon recommended
    --color-rank-2: #bf4fdb;
    --color-rank-3: #cf931d;
    --color-rank-4: red; // Symon recommended
    font-size: unset;

    background: repeating-linear-gradient(
      color-mix(in srgb, var(--color-secondary-3) 20%, transparent) 0 var(--row-height),
      transparent var(--row-height) calc(var(--row-height) * 2)
    );
  }
}

[data-theme][data-color-scheme="dark"] {
  &.chat-message.message .pf2e-token-hud .rk-skills,
  &.chat-message.message .pf2e-token-hud .rk {
    --text-dark: var(--text-color-2);
    --rarity-common: #e1d8cf;
    --color-rarity-common: #e1d8cf;
    --color-rank-0: #a6a6a6;
    background: repeating-linear-gradient(
      color-mix(in srgb, var(--color-secondary-3) 20%, transparent) 0 var(--row-height),
      transparent var(--row-height) calc(var(--row-height) * 2)
    );
  }
}

[data-theme] {
  &#pf2e-token-hud {
    // --primary: var(--color-primary-2);
    --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;
    --color-rank-0: #a6a6a6;
    --color-rank-1: dodgerblue; // Symon recommended
    --color-rank-2: #bf4fdb;
    --color-rank-3: #cf931d;
    --color-rank-4: red; // Symon recommended
    --color-disabled: var(--text-color-disabled);
    padding-bottom: 0px;
  }

  &#pf2e-token-hud .sidebar .sidebar-header input {
    @include dui-input;
  }

  &#pf2e-token-hud .sidebar .sidebar-content .item-img img {
    border: 1px solid;
    border-color: var(--icon-border-color);
    border-radius: var(--border-radius);
  }

  &#pf2e-token-hud input,
  &#pf2e-token-hud select,
  &#pf2e-token-hud .sidebar .sidebar-toggles .toggle select {
    @include dui-input;
    --app-border-width: 1px;
  }

  &#pf2e-token-hud .sidebar .sidebar-toggles {
    padding: unset;
  }

  &#pf2e-token-hud .sidebar .sidebar-content .details input {
    @include dui-input;
    // padding: 1px;
    // padding-block: 5px;
    // border: none;
    // &:hover {
    //   border: none;
    // }
  }

  &#pf2e-token-hud .sidebar.spells .sidebar-content .entry .spell .details .extras .actions .uses {
    input {
      // --dui-input-background: transparent;
      --dui-input-border-color: transparent;
      --box-shadow: transparent;
    }
  }

  &#pf2e-token-hud .sidebar.extras .sidebar-content .row select {
    @include dui-input;
  }

  &#pf2e-token-hud .sidebar.items .sidebar-content .hud-bulk .over-max {
    color: var(--color-level-red-border);
  }

  &#pf2e-token-hud a:not(.disabled, :disabled):hover {
    color: var(--color-primary-2);
  }

  &#pf2e-token-hud .sidebar .sidebar-content .item-img.hover i {
    background: var(--color-primary-2);
    border-color: var(--color-primary-1);
    color: var(--text-color-1);
    text-shadow: 0px 1px 2px black;
  }

  &#pf2e-token-hud .sidebar .sidebar-content .details .extras .actions a i.greyed {
    color: var(--text-color-disabled);
  }

  &#pf2e-token-hud .sidebar .sidebar-content .header {
    background: var(--color-secondary-4);
    border-color: var(--color-secondary-5);
    margin: 0px -5px;
  }

  &#pf2e-token-hud .sidebar.doubled .sidebar-content .header {
    margin: 0px 0px;
  }

  &.pf2e-token-hud .no-macro,
  &#pf2e-token-hud .no-macro {
    @include dui-app;
    background: var(--color-primary-3);
    border: 1px solid var(--scrollbar-thumb-border-color);
  }

  &#pf2e-token-hud .sidebar.spells .expended img {
    filter: saturate(0);
  }

  &#pf2e-token-hud .sidebar.spells .sidebar-content .entry .spell .details .extras .actions {
    a:not(.disabled) {
      color: var(--text-color-3);
      :hover {
        color: var(--color-primary-2);
      }
    }
    span {
      color: var(--text-color-4);
    }
  }

  &#pf2e-token-hud .sidebar,
  &#pf2e-token-hud .inner,
  &#pf2e-token-hud .popup {
    background: unset;
    @include dui-app;
    backdrop-filter: blur(4px);
  }

  &#pf2e-token-hud .popup .item-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
    button {
      @include dui-button;
    }
  }

  &#pf2e-token-hud .inner .group .section input[type="number"] {
    @include dui-input;
    border-radius: 3px;
  }

  &#pf2e-token-hud .sidebar .sidebar-content .action-icon img {
    filter: invert(1);
    mix-blend-mode: plus-lighter;
  }

  &#pf2e-token-hud .free {
    background: unset;
    @include dui-app;
    backdrop-filter: blur(4px);
    &.status {
      bottom: 0px;
      border-top-left-radius: unset;
      border-top-right-radius: unset;
      border-top: unset;
    }
    &.distance {
      border-bottom-left-radius: unset;
      border-bottom-right-radius: unset;
      border-bottom: unset;
    }
  }

  &#pf2e-token-hud .popup .header:before {
    background: unset;
    color: var(--text-color-2);
  }

  &#pf2e-token-hud .sidebar.actions .sidebar-content .toggles .toggle select {
    @include dui-input;
    margin: unset;
  }

  &#pf2e-token-hud .sidebar.skills .sidebar-content .skill .header .modifier,
  &#pf2e-token-hud .sidebar.skills .sidebar-content .lore .modifier {
    color: var(--color-primary-1);
  }
}

[data-theme] {
  &[id^="pf2e-perception-"] {
    height: auto !important;
    .window-content {
      max-height: 100%;
    }
  }
  &[id^="pf2e-perception-"] .window-content .tokens section .token[data-token-id]:is(:hover, .hover) {
    background: color-mix(in srgb, var(--color-primary-2) 80%, transparent);
  }
  &[id^="pf2e-perception-"] .window-content .buttons button {
    @include dui-button;
    box-shadow: unset;
  }
  &[id^="pf2e-perception-"] .window-content .tokens section .token.ui-selected .name,
  &[id^="pf2e-perception-"] .window-content .tokens section .token.ui-selecting .name {
    color: var(--color-primary-1);
    text-shadow: 0px 0px 5px var(--color-primary-2);
  }
}

/* ----------------------------------------- */
/* Symon Custom CSS                          */
/* ----------------------------------------- */

#pf2e-token-hud.colorized .inner {
  i.fa-solid.fa-circle-h {
    color: darkgoldenrod;
  }
  i.fa-solid.fa-user-graduate {
    color: rgb(141, 69, 212);
  }
  i.fa-solid.fa-heart-half-stroke {
    color: orangered;
  }
  i.fa-solid.fa-heart {
    color: rgb(192, 1, 1);
  }
  i.fa-regular.fa-helmet-battle {
    color: #cdcdcd;
  }
  i.fa-light.fa-block-brick {
    color: deepskyblue;
  }
  i.fa-solid.fa-shield,
  i.fa-regular.fa-shield {
    color: rgb(103, 235, 213);
  }
  i.fa-solid.fa-hand-fist {
    color: rgb(201, 4, 201);
  }
  i.fa-solid.fa-person-running {
    color: blue;
  }
  i.fa-solid.fa-brain {
    color: deeppink;
  }
  i.fa-solid.fa-tombstone {
    color: brown;
  }
  i.fa-solid.fa-shoe-prints {
    color: green;
  }
  i.fa-solid.fa-chevrons-down::before {
    content: "\f713";
    font: (--fa-font-solid);
    color: rgb(175, 87, 24);
  }
  i.fa-solid.fa-feather {
    color: white;
  }
  i.fa-solid.fa-person-swimming {
    color: dodgerblue;
  }
  i.fa-solid.fa-spider {
    color: #b7346f;
  }
  i.fa-solid.fa-eye {
    color: cadetblue;
  }
  i.fa-solid.fa-chess-rook {
    color: rgb(110, 143, 54);
  }
}

#pf2e-token-hud.dorako-ui .sidebar.actions .section .action-icon {
  background-color: #ffffffb5;
}
#pf2e-token-hud.dorako-ui .sidebar.hazard .section .action-icon {
  background-color: #ffffffb5;
}
#pf2e-token-hud.dorako-ui .sidebar .sidebar-content .action-icon {
  background-color: #ffffffb5;
}
