// Copyright (C) 2025 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@import "../theme";

$chevron-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='8' width='8'%3E%3Cline x1='2' y1='0' x2='6' y2='4' stroke='black'/%3E%3Cline x1='6' y1='4' x2='2' y2='8' stroke='black'/%3E%3C/svg%3E");

.pf-tree {
  display: grid;
  grid-template-columns: [left]auto [right]1fr;
  row-gap: 5px;

  .pf-tree-node {
    display: contents;

    &:hover {
      background: color_hover(transparent);
    }

    .pf-tree-left {
      grid-column: left;
      background: inherit;
      min-width: max-content;
      border-radius: $border-radius 0 0 $border-radius;
      font-weight: bolder;
    }

    .pf-tree-right {
      grid-column: right;
      background: inherit;
      padding: 0 0 0 15px;
      border-radius: 0 $border-radius $border-radius 0;
      overflow-wrap: break-word; // Break words if overflowing
      white-space: pre-wrap;
      min-width: 0; // Allow column to shrink past content if container is thin
    }

    .pf-tree-gutter {
      display: inline-flex;
      position: relative;
      width: 16px;
      justify-content: center;
      align-items: center;
    }

    &.pf-collapsed > .pf-tree-left > .pf-tree-gutter {
      cursor: pointer;

      &::after {
        @include material-icon("chevron_right");
        font-size: inherit;
      }
    }
    &.pf-expanded > .pf-tree-left > .pf-tree-gutter {
      cursor: pointer;
      &::after {
        @include material-icon("expand_more");
        font-size: inherit;
      }
    }

    &.pf-loading > .pf-tree-left > .pf-tree-gutter {
      &::after {
        content: "";
        border: solid 1px var(--pf-color-border);
        border-top: solid 1px var(--pf-color-primary);
        animation: pf-spinner-rotation 1s infinite linear;
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
    }
    .pf-tree-indent-gutter {
      display: block;
      position: relative;
    }

    &.pf-collapsed + .pf-tree-children {
      display: none;
    }
  }

  .pf-tree-children {
    display: grid;
    grid-column: 1 / span 2;
    grid-template-columns: subgrid;
    row-gap: 5px;
    border-left: solid var(--pf-color-border) 1px;
    margin-left: 6px;
    padding-left: 6px;
  }
}
