.trendingWindow {
  &__panelHeader {
    padding: 4px 0 2px;
    > p {
      border: 2px inset #ededed;
      padding: 0.25rem 0.5rem;
      width: 25%;
      &:last-of-type {
        width: 75%;
        margin-left: 4px;
      }
    }
  }
  &__panel {
    border: 2px inset #ededed;
    padding: 0.5rem;
    margin-top: 2px;
    background-color: #fff;
    &.-tree {
      width: 25%;
    }
    &.-icons {
      width: 75%;
      margin-left: 4px;
      > pre {
        white-space: pre-wrap;
      }
    }
  }
  &__footer {
    margin-top: 5px;
    border: 2px inset #ededed;
    > p {
      padding: 0.25rem 0.5rem;
    }
  }
}

.trendingIcon {
  width: 100px;
  max-height: 120px;
  padding: 0.5rem;
  text-align: center;
  background: transparent;
  outline: none;
  border: none;
  &.-highlighted .trendingIcon__name {
    outline: 2px dotted #000;
  }

  > canvas {
    margin: auto;
    pointer-events: none;
  }

  &__name {
    margin: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    pointer-events: none;
  }
}
