/* Copyright 2025 Mozilla Foundation
 *
 * 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.
 */

.treeView {
  --treeitem-color: light-dark(rgb(0 0 0 / 0.8), rgb(255 255 255 / 0.8));
  --treeitem-bg-color: light-dark(rgb(0 0 0 / 0.15), rgb(255 255 255 / 0.15));
  --treeitem-hover-color: light-dark(rgb(0 0 0 / 0.9), rgb(255 255 255 / 0.9));
  --treeitem-selected-color: light-dark(
    rgb(0 0 0 / 0.9),
    rgb(255 255 255 / 0.9)
  );
  --treeitem-selected-bg-color: light-dark(
    rgb(0 0 0 / 0.25),
    rgb(255 255 255 / 0.25)
  );
  --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
  --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);

  &.withNesting {
    .treeItemToggler {
      &::before {
        /* All matching images have a size of 16x16
         * All relevant containers have a size of 28x28 */
        position: absolute;
        display: inline-block;
        width: 16px;
        height: 16px;
        inset-inline-end: 4px;

        content: "";
        background-color: var(--toolbar-icon-bg-color);
        mask-image: var(--treeitem-expanded-icon);
        mask-size: cover;
      }

      position: relative;
      float: var(--inline-start);
      height: 0;
      width: 0;
      color: rgb(255 255 255 / 0.5);

      &.treeItemsHidden {
        &::before {
          mask-image: var(--treeitem-collapsed-icon);
          transform: scaleX(var(--dir-factor));
        }

        ~ .treeItems {
          display: none;
        }
      }

      &:hover + a,
      &:hover ~ .treeItems {
        background-color: var(--treeitem-bg-color);
        background-clip: padding-box;
        border-radius: 2px;
        color: var(--treeitem-hover-color);
      }
    }

    > .treeItem,
    .treeItem > .treeItems {
      margin-inline-start: 20px;
    }
  }

  &#layersView .treeItem > a {
    * {
      cursor: pointer;
    }

    > label {
      display: flex;
      align-items: center;
      padding-inline-start: 4px;
      > input {
        margin-top: 1px;
      }
    }
  }

  .treeItem {
    > a {
      text-decoration: none;
      display: inline-block;
      /* Subtract the right padding (left, in RTL mode) of the container: */
      min-width: calc(100% - 4px);
      height: auto;
      margin-bottom: 1px;
      padding: 2px 0 5px;
      padding-inline-start: 4px;
      border-radius: 2px;
      color: var(--treeitem-color);
      font-size: 13px;
      line-height: 15px;
      user-select: none;
      white-space: normal;
      cursor: default;

      &:hover {
        background-color: var(--treeitem-bg-color);
        background-clip: padding-box;
        border-radius: 2px;
        color: var(--treeitem-hover-color);
      }
    }

    &.selected > a {
      background-color: var(--treeitem-selected-bg-color);
      color: var(--treeitem-selected-color);
    }
  }
}