.component-tree-item {
  color: var(--base12);
  font-size: 1.2rem;
  min-height: 22px;

  &-actions {
    min-height: 22px;
    opacity: 0;
    right: var(--unit1);

    /**
      * -actions is position:sticky so it is always visible and on top.
      * Due to margins and padding on various elements, it was
      * difficult to keep the background of -actions on top
      * of .tree-item text and align with the .tree-item background.
      * This pseudo element is 100% of the width of -actions plus
      * a little extra to guarantee alignment.
    */
    &::after {
      border-bottom-right-radius: var(--unit1);
      border-top-right-radius: var(--unit1);
      inset: 0 calc(var(--unit1) * -1);
      content: "";
      position: absolute;
    }

    /**
      * -actions is position:sticky so it is always visible and on top.
      * :before is a gradient to soften the edge when overlaying text.
    */
    &::before {
      bottom: 0;
      content: "";
      left: calc(var(--unit3) * -1);
      position: absolute;
      top: 0;
      width: var(--unit3);
    }
  }

  &-action {
    &:focus {
      outline: none;
    }

    polygon,
    rect,
    path {
      fill: var(--base15);
    }
  }

  /**
    * This element helps with a visual bug.
    * When an item overflows the bounds of the list,
    * the item background color clips at the point of the overflow.
    * This child of the item has the same background color
    * and will extend past the overflow point.
  */
  .component-tree-item-background {
    min-height: 22px;
  }

  &:hover {
    background-color: var(--component-highlighted-bg);

    .component-tree-item-background {
      background-color: var(--component-highlighted-bg);
    }

    .component-tree-item-actions {
      opacity: 1;

      &::after {
        background-color: var(--component-highlighted-bg);
      }

      &::before {
        background: linear-gradient(
          to right,
          var(--transparent),
          var(--component-highlighted-bg) 75%
        );
      }
    }
  }
}

.component-tree-item-tag {
  .component-name {
    color: var(--component-name);
  }

  .bracket-token {
    color: var(--base09);
  }

  .key-token {
    color: var(--component-attr);
  }

  .value-token {
    color: var(--spec03);
  }

  .arg-value-token {
    background: none;
    border: none;
    padding: 0 2px;
  }

  .arg-value-token:hover {
    background-color: var(--spec03);
    color: var(--base00);
    cursor: pointer;
  }
}

/**
 * Modifier
 * highlighted - the component currently being previewed
 */

.component-tree-item.component-tree-item-highlighted {
  background-color: var(--component-highlighted-bg);
  border-radius: 0;
}

.component-tree-item-pinned .component-tree-item-tag {
  .component-name,
  .bracket-token,
  .key-token,
  .value-token {
    color: var(--focus-text);
  }
}

.component-tree-item-bracket::before,
.component-tree-item-bracket::after,
.component-tree-item-classic-bracket::before,
.component-tree-item-classic-bracket::after {
  color: var(--base09);
}

.component-tree-item-has-modifier::after {
  content: "" !important;
}

.component-tree-item-closing::before {
  content: ">";
  margin-left: -13px;
}

.component-tree-item-self-closing::before {
  content: "/>";
}

.component-tree-item-bracket::before {
  content: "<";
}

.component-tree-item-bracket::after {
  content: ">";
}

.component-tree-item-bracket.component-tree-item-bracket-self-closing::after {
  content: "/>";
}

.component-tree-item-classic-bracket::before {
  content: "{{";
}

.component-tree-item-classic-bracket::after {
  content: "}}";
}

/**
 * Modifier
 * selected - user clicked on component
 */

.component-tree-item.component-tree-item-pinned {
  background: var(--focus);
  color: var(--focus-text);

  &:hover {
    background: var(--focus);
  }

  .component-tree-item-background {
    background: var(--focus);
  }

  .component-tree-item-actions {
    opacity: 1;

    &::after {
      background: var(--focus);
    }

    &::before {
      background: linear-gradient(
        to right,
        var(--transparent),
        var(--focus) 75%
      );
    }
  }

  .component-tree-item-bracket::before,
  .component-tree-item-bracket::after {
    color: var(--component-backets-selected);
  }

  .component-tree-item-expand,
  .component-tree-item-action {
    opacity: 1;

    polygon,
    rect,
    path {
      fill: var(--focus-text);
    }
  }
}

.component-tree-item-component {
  color: var(--base09);
}