:host {
  width: 100%;
  height: 100%;
  overflow: auto;

  .tree-node {
    position: relative;
    color: #8a1882;

    cursor: default;
    font-family: Menlo, monospace;
    font-size: 11px;
    line-height: 18px;

    white-space: nowrap;
    text-overflow: ellipsis;

    & > button {
      outline: none;
      border: 0;
      padding: 0;
      position: absolute;
      background-color: transparent;
      top: 2px;
    }

    .mat-icon {
      font-size: 0.8em;
      width: 16px;
      height: 13px;
      display: inline-block;
    }

    .dir-names {
      color: #9b4807;
    }

    .console-reference {
      color: #748591;
      padding-left: 8px;
      font-style: italic;
    }

    &:hover {
      background-color: #ebf1fb;
    }

    &.matched {
      background-color: #ebf1fb;

      &:hover {
        background-color: #cfe8fc;
      }
    }

    &.selected,
    &.highlighted {
      background-color: #cfe8fc;
    }
  }
}

@keyframes appear {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: #cfe8fc;
  }
  100% {
    background-color: transparent;
  }
}

.new-node {
  animation: appear 1.5s;
}

.filter {
  display: flex;

  .icon {
    width: 20px;
    height: 20px;
    margin: auto 12px;
    opacity: 0.7;
  }

  .filter-input {
    border: none;
    background: rgba(0, 0, 0, 0.003);
    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
    width: 100%;
    font-size: 2em;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.4em;
    padding: 12px 6px;
  }
}

.up-down-buttons {
  width: 20%;
  display: flex;
}

.tree-wrapper {
  overflow-y: auto;
  height: calc(100% - 33px);
}

.angular-element {
  content: '';
  color: #1b1aa5;

  &::before {
    content: '<';
  }

  &::after {
    content: '/>';
  }
}

:host-context(.dark-theme) {
  .tree-node {
    color: #5cadd3;

    .mat-icon {
      color: #bcc5ce;
    }

    .dir-names {
      color: #91adcb;
    }

    .angular-element {
      color: #dc8c61;
    }

    &:hover {
      background-color: #262d36;
    }

    &.matched {
      background-color: #262d36;

      &:hover {
        background-color: #073d69;
      }
    }

    &.selected,
    &.highlighted {
      background-color: #073d69;
    }
  }
}
