li .icon {
  margin: -3px -5px -3px -5px;
  background: linear-gradient(45deg, hsl(0deg 0% 50%), hsl(0deg 0% 70%)); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

.tree-outline li {
  min-height: 20px;
}

.tree-outline li:hover:not(.selected) .selection {
  display: block;
  background-color: var(--item-hover-color);
}

.navigator-fs-tree-item .icon {
  background: linear-gradient(45deg, hsl(28deg 75% 50%), hsl(28deg 75% 70%)); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

.navigator-sm-script-tree-item .icon,
.navigator-script-tree-item .icon,
.navigator-snippet-tree-item .icon {
  background: linear-gradient(45deg, hsl(48deg 70% 50%), hsl(48deg 70% 70%)); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

.navigator-sm-stylesheet-tree-item .icon,
.navigator-stylesheet-tree-item .icon {
  background: linear-gradient(45deg, hsl(256deg 50% 50%), hsl(256deg 50% 70%)); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

.navigator-image-tree-item .icon,
.navigator-font-tree-item .icon {
  background: linear-gradient(45deg, hsl(109deg 33% 50%), hsl(109deg 33% 70%)); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

@media (forced-colors: active) {
  li .icon,
  .navigator-fs-tree-item .icon,
  .navigator-sm-script-tree-item .icon,
  .navigator-script-tree-item .icon,
  .navigator-snippet-tree-item .icon,
  .navigator-sm-stylesheet-tree-item .icon,
  .navigator-stylesheet-tree-item .icon,
  .navigator-image-tree-item .icon,
  .navigator-font-tree-item .icon {
    background-color: ButtonText;
    background-image: none;
    forced-color-adjust: none;
  }
}