: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;

    .tree-node-info {
      display: flex;

      & > 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;
    }

    .hydration {
      margin: auto 8px auto auto;
      font-size: 14px;
      color: #60a6fc;

      position: sticky;
      right: 0;

      &.skipped {
        color: #9a9a9a;
      }

      &.mismatched {
        color: #ff0040;
      }
    }
  }
}

@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: '/>';
  }
}

.hydration-error {
  color: #e62222;
  margin-left: 16px;
  padding: 0 8px 8px 0px;

  pre {
    margin: 0;
    background: rgba(1, 1, 1, 0.05);
    padding: 8px;
    border-radius: 8px;

    &:not(:last-child) {
      margin-bottom: 16px;
    }
  }
}

: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;
    }

    .hydration {
      color: #60a6fc;

      &.skipped {
        color: #9a9a9a;;
      }

      &.mismatched {
        color: #ff0040;
      }
    }

    .hydration-error {
      color: #ea7171;
      pre {
        background: rgb(1, 1, 1, 0.2);
      }
    }
  }
}
