weseek__growi/apps/app/src/components/ItemsTree/ItemsTree.module.scss

@use '~/styles/mixins' as *;
$grw-sidebar-content-header-height: 58px;
$grw-sidebar-content-footer-height: 50px;
$grw-pagetree-item-padding-left: 10px;
$grw-pagetree-item-container-height: 40px;

.grw-pagetree {

  .grw-pagetree-item-skeleton-text {
    @include grw-skeleton-text($font-size:16px, $line-height:$grw-pagetree-item-container-height);
    padding-left: 12px;
  }

  .grw-pagetree-item-skeleton-text-child {
    @extend .grw-pagetree-item-skeleton-text;
    padding-left: 12px + $grw-pagetree-item-padding-left;
  }

  :global {
    min-height: calc(100vh - ($grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));

    .btn-page-item-control {
      .icon-plus::before {
        font-size: 18px;
      }
    }

    .list-group-item {
      .grw-visible-on-hover {
        display: none;
      }

      &:hover {
        .grw-visible-on-hover {
          display: block;
        }

        .grw-count-badge {
          display: none;
        }
      }

      .grw-pagetree-triangle-btn {
        border: 0;
        transition: all 0.2s ease-out;
        transform: rotate(0deg);

        &.grw-pagetree-open {
          transform: rotate(90deg);
        }
      }

      .grw-pagetree-title-anchor {
        width: 100%;
        overflow: hidden;
        text-decoration: none;
      }

      .grw-pagetree-count-wrapper {
        display: inline-block;

        &:hover {
          display: none;
        }
      }
    }

    .grw-pagetree-item-container {
      .grw-triangle-container {
        // TODO: ignore width frickering
        // https://redmine.weseek.co.jp/issues/130828
        // min-width: 35px;
        height: $grw-pagetree-item-container-height;
      }
    }
  }
  &:global{
    // To realize a hierarchical structure, set multiplied padding-left to each pagetree-item
    > .grw-pagetree-item-container {
      > .list-group-item {
        padding-left: 0;
      }
      > .grw-pagetree-item-children {
        > .grw-pagetree-item-container {
          > .list-group-item {
            padding-left: $grw-pagetree-item-padding-left;
          }
          > .grw-pagetree-item-children {
            > .grw-pagetree-item-container {
              > .list-group-item {
                padding-left: $grw-pagetree-item-padding-left * 2;
              }
              > .grw-pagetree-item-children {
                > .grw-pagetree-item-container {
                  > .list-group-item {
                    padding-left: $grw-pagetree-item-padding-left * 3;
                  }
                  > .grw-pagetree-item-children {
                    > .grw-pagetree-item-container {
                      > .list-group-item {
                        padding-left: $grw-pagetree-item-padding-left * 4;
                      }
                      > .grw-pagetree-item-children {
                        > .grw-pagetree-item-container {
                          > .list-group-item {
                            padding-left: $grw-pagetree-item-padding-left * 5;
                          }
                          > .grw-pagetree-item-children {
                            > .grw-pagetree-item-container {
                              > .list-group-item {
                                padding-left: $grw-pagetree-item-padding-left * 6;
                              }
                              > .grw-pagetree-item-children {
                                > .grw-pagetree-item-container {
                                  > .list-group-item {
                                    padding-left: $grw-pagetree-item-padding-left * 7;
                                  }
                                  > .grw-pagetree-item-children {
                                    > .grw-pagetree-item-container {
                                      > .list-group-item {
                                        padding-left: $grw-pagetree-item-padding-left * 8;
                                      }
                                      > .grw-pagetree-item-children {
                                        > .grw-pagetree-item-container {
                                          > .list-group-item {
                                            padding-left: $grw-pagetree-item-padding-left * 9;
                                          }
                                          .grw-pagetree-item-children {
                                            > .grw-pagetree-item-container {
                                              > .list-group-item {
                                                padding-left: $grw-pagetree-item-padding-left * 10;
                                              }
                                            }
                                          }
                                        }
                                      }
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}


.grw-pagetree :global {
  .grw-pagetree-triangle-btn {
    --btn-color: var(--bs-tertiary-color);
  }
}