@import "@/styles/mixins.scss";
@import "@/styles/variables.scss";

.catalogue {
  border-top: 1px solid rgba($black, 0.15);
  padding-top: 1rem;

  div {
    cursor: pointer;
    user-select: none;
  }

  :global(.catalogue-node) {
    padding: 0.5rem 1rem 0.5rem 0.5rem;

    &:global(.catalogue-expand-false) {
      :global(.catalogue-indent) {
        i {
          transform: translateY(-50%) rotate(-90deg);
        }
      }
    }

    &:global(.catalogue-focus-true) {
      background: $grey;

      :global(.catalogue-indent) {
        span {
          opacity: 1;
        }
      }
    }

    &:hover {
      background: $grey;
    }

    :global(.catalogue-indent) {
      position: relative;

      i {
        display: inline-block;
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: 1.5rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;

        &:global(.catalogue-icon-false) {
          &::before {
            visibility: hidden;
          }
        }
      }

      span {
        display: inline-block;
        @include p1;
        padding-left: 1.75rem;
        color: $F1;
        opacity: 0.6;

        word-break: break-all;

        &:hover {
          opacity: 1;
        }
      }
    }

    :global(.catalogue-3) {
      padding-left: 1.75rem;
    }

    :global(.catalogue-4) {
      padding-left: 3.5rem;
    }
  }

  :global(.catalogue-children) {
    &:global(.catalogue-expand-true) {
      display: block;
    }

    &:global(.catalogue-expand-false) {
      display: none;
    }
  }
}