.x-panel-header-default {
  background-color: $content-background-color;
  border: none;

  .x-tool-tool-el {
    background-color: transparent;
  }
}

// The small navigation elements in the panel header bar e.g. to
// collapse a panel
.x-tool-img {
  filter: brightness(175%);

  // these are brighter per default, so they don't need to be
  // brigthened as much
  &.x-tool-expand,
  &.x-tool-collapse,
  &.x-tool-refresh {
    filter: brightness(125%);
  }

  // this icon uses multiple tones, to have them behave appropriatelly
  // invert them before brightening them
  &.x-tool-print {
    filter: invert(100%) hue-rotate(180deg) brightness(125%);
  }

  .x-tool-over & {
    filter: brightness(200%);
  }

  .x-tool-over &.x-tool-expand,
  .x-tool-over &.x-tool-collapse,
  .x-tool-over &.x-tool-refresh {
    filter: brightness(150%);
  }

  .x-tool-over &.x-tool-print {
    filter: invert(100%) hue-rotate(180deg) brightness(150%);
  }
}

.x-panel-header-title-default {
  color: $highlighted-text;
}

.x-panel-body-default {
  background-color: $background-darker;
  border-color: $border-color-alt;
  color: $text-color;
}

// override the border around the pve-resource-tree specifically to be
// more consistent with crisp, while keep allignments "correct"
div[id^="pveResourceTree-"][id$="-body"] {
  border-color: $background-darker;
}
