/* ----------------------------------------- */
/* Placeable HUD                             */
/* ----------------------------------------- */

[data-theme] {
  #token-hud .attribute.bar1 input {
    --dui-input-border-color: var(--color-level-success-border);
    --dui-input-focus-outline-color: var(--color-level-success-border);
    --dui-input-background: var(--color-level-success-bg);
    --dui-input-focus-text-color: var(--text-color-2);
    --dui-input-text-color: var(--text-color-2);
  }

  #token-hud .attribute.bar2 input {
    --dui-input-border-color: var(--color-level-info-border);
    --dui-input-focus-outline-color: var(--color-level-info-border);
    --dui-input-background: var(--color-level-info-bg);
    --dui-input-text-color: var(--text-color-2); // looks disabled otherwise
  }

  &.placeable-hud input[type="text"] {
    @include dui-input;
    text-shadow: 0px 1px 2px black;
    --dui-input-focus-text-color: var(--text-color-2);
    &[name="elevation"] {
      --dui-input-background: var(--app-background);
      font-size: 18px;
      width: 42px;
    }
  }

  .placeable-hud .control-icon img {
    opacity: 1;
  }

  #token-hud .attribute i.fas {
    color: var(--color-secondary-1);
    text-shadow: 0px 1px 2px black;
  }
}

/* ----------------------------------------- */
/* Token HUD                                 */
/* ----------------------------------------- */
#token-hud[data-theme] .status-effects.active {
  gap: 5px;
  background: unset;
  border: unset;
  box-shadow: unset;
  picture {
    img {
      opacity: unset;
      @include dui-app;
    }

    &:hover img {
      border-color: var(--color-primary-2);
      box-shadow: 0px 0px 6px var(--color-primary-3), 0px 2px 8px 1px var(--color-primary-4);
    }

    &.active img {
      border-color: var(--color-primary-1);
      box-shadow: 0px 0px 6px var(--color-primary-2), 0px 2px 8px 1px var(--color-primary-3);
    }
  }
}

#token-hud[data-theme] .status-effects .title-bar {
  @include dui-tooltip;
}

#token-hud[data-theme] .status-effects .effect-control .badge {
  border-width: 1px;
  border-radius: 0px var(--border-radius) 0px 3px;
  background: var(--color-primary-3);
  border-left-color: var(--color-primary-1);
  border-bottom-color: var(--color-primary-1);
  color: var(--text-color-2);
  font-size: 10px;
  text-shadow: 0px 1px 2px black;
  top: 0px;
  right: 1px;
  font-weight: 600;
  &.fa-lock:before {
    position: relative;
    font-size: 6px;
  }
}

#token-hud[data-theme] .status-effects .effect-control {
  opacity: unset;
}

[data-theme] {
  .control-icon {
    @include dui-button;
    @include dui-grayscale;

    // These are toggles, inactive -> active -> inactive
    &[data-action="visibility"],
      &[data-action="effects"],
      &[data-action="combat"],
      &[data-action="locked"],
      &[data-action="target"],
      &[data-action="active"], // From Monk's Active Tiles
      &[data-action="mystify"] // from Workbench
    {
      @include dui-button-toggle;
    }
  }
}
