lila/ui/lib/css/tree/_tree.scss

$c-transp-border: $m-font--fade-88;
$disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));

.tview2 {
  white-space: normal;

  --c-base: var(--c-font);

  .active {
    --c-base: var(--c-primary);
  }

  .inaccuracy {
    --c-base: var(--c-inaccuracy);
  }

  .mistake {
    --c-base: var(--c-mistake);
  }

  .blunder {
    --c-base: var(--c-blunder);
  }

  .good {
    --c-base: var(--c-good);
  }

  .brilliant {
    --c-base: var(--c-brilliant);
  }

  .interesting {
    --c-base: var(--c-interesting);
  }

  .anchor {
    position: relative;
  }

  * {
    overflow: visible;
  }
}

.tview2.hidden {
  visibility: hidden;
}

.tview2 move {
  @extend %san, %nowrap-hidden;

  display: inline-block;
  color: var(--c-base);
  padding: 0.25em 0.17em;
  font-size: 1.092em;
  cursor: pointer;

  @media (hover: none) {
    @include prevent-select;
  }

  &.active {
    color: white;
    background: $m-primary--alpha-85;

    shapes,
    eval,
    index {
      color: white;
    }

    .disclosure {
      background-color: $c-font-dimmer;
    }
  }

  &.current {
    border: 1px solid $c-accent;
  }

  &.nongame {
    font-style: italic;
  }

  &.empty {
    pointer-events: none;
    color: $c-font-dimmer;
  }

  &.context-menu {
    border: 0;
    background: $c-accent !important;
    color: $c-over !important;

    index {
      color: $c-over;
    }
  }

  &.pending-deletion {
    border-radius: unset;
    background: $m-bad--alpha-30 !important;
  }

  &.pending-copy {
    border-radius: unset;
    background: $m-good--alpha-30 !important;
  }
}

.tview2 eval {
  @extend %roboto;

  margin-inline-start: auto;
  font-size: 0.8em;
  color: $c-font-dim;
}

.tview2 glyph {
  @extend %base-font;

  margin-inline-start: 0.08em;
  vertical-align: bottom;
}

.tview2 shapes {
  margin-inline-start: 0.4em;
  color: $c-good;

  &::before {
    @extend %data-icon;

    vertical-align: baseline;
    font-size: 13px;
    content: $licon-DiscBigOutline;
  }
}

.tview2 move index {
  font-size: 90%;
  color: $c-font-dim;
}

.tview2 interrupt > interrupt {
  display: block;
  margin-inline-start: 9px;
}

.tview2 > interrupt {
  font-size: 95%;

  move {
    margin-inline: 2px 0;
  }

  inline lines {
    margin-inline-start: 0;
  }
}

.tview2 comment .by {
  @extend %nowrap-ellipsis, %roboto;

  display: inline-block;
  vertical-align: middle;
  color: $c-font;
  opacity: 0.8;
  max-width: 9em;
}

.tview2 line {
  display: block;
  padding-inline-start: 7px;
  position: relative;

  comment {
    font-size: 90%;
  }

  > branch {
    border-inline-start: 2px solid $c-transp-border;
    margin-inline-start: -9px;
    position: absolute;
    width: 8px;
    height: 100%;
  }

  > branch::after {
    margin-top: 0.8em;
    content: ' ';
    border-top: 2px solid $c-transp-border;
    position: absolute;
    width: 7px;
    height: 2px;
  }

  &:last-child > branch {
    height: calc(0.8em + 2px) !important;
  }
}

.tview2 lines {
  display: block;
  margin-block: 2px;
  margin-inline-start: 1px;
  padding-inline-start: 2px;
  overflow-x: clip;

  &.single {
    border-inline-start: none;
  }

  &:last-child {
    margin-bottom: 0;
  }

  lines move {
    font-size: 13px;
  }
}

.tview2 inline {
  display: inline;
  font-style: italic;
  font-size: 0.9em;
  opacity: 0.8;

  move {
    margin-inline-start: 0;
  }

  &::before,
  &::after {
    vertical-align: 7px;
    opacity: 0.7;
    font-size: 1.1em;
  }

  &::before {
    content: '(';
    margin-inline: 2px -2px;
  }

  &::after {
    content: ')';
    margin-inline: -1px 1px;
  }
}

.tview2 .conceal {
  opacity: 0.4;
}

.tview2 .hide {
  display: none;
}

.tview2 .disclosure {
  display: inline-block;
  background-color: $c-transp-border;
  vertical-align: -2px;
  align-self: center;
  width: $disclosure-btn-size;
  height: $disclosure-btn-size;
  mask: url('/assets/images/buttons/plus-button-mask.webp') 0 0 / contain no-repeat;

  + san::before,
  + index::before {
    content: '-';
    color: transparent;
  }
}

.tview2 .disclosure.expanded {
  mask: url('/assets/images/buttons/minus-button-mask.webp') 0 0 / contain no-repeat;

  + san::before,
  + index::before {
    color: $c-transp-border;
  }
}

.tview2 .disclosure-connector {
  position: absolute;
  pointer-events: none;
  inset-inline-start: 0;
  border-inline-start: 2px solid $c-transp-border;
  border-top: 2px solid $c-transp-border;
}

.tview2 .disclosure-connector.riser {
  inset-inline: unset;
  inset-inline-end: 0;

  $riser-height: calc((10px - var(---button-size-pointer-adjust, 0px)) / 2);

  top: calc(-2px - $riser-height);
  height: $riser-height;
  width: 2px;
}

.tview2-column {
  @extend %flex-wrap;
}

.tview2-column move {
  font-size: 1.092em;
  padding: 2px;
}

.tview2-column > move {
  flex: 0 0 43.5%;
  display: flex;
  font-size: 1.185em;
  line-height: 1.75em;
  padding: 0 0.3em 0 0.5em;

  index {
    padding-inline-start: 5px;

    &:first-child {
      padding-inline-start: 0;
    }
  }

  glyph {
    flex: 0 1 auto;
    text-align: center;
    overflow: hidden;
    font-size: 0.82em;
  }

  &.active {
    font-weight: bold;
  }
}

.tview2-column > index {
  flex: 0 0 13%;
  display: flex;
  justify-content: center;
  border-inline-end: $border;
  background: $c-bg-zebra;
  line-height: 2.07em;
  color: $c-font-dimmer;

  + move {
    border-inline-end: $c-transp-border;
  }
}

.tview2-column line {
  move {
    @extend %box-radius;
  }

  comment {
    display: inline;
    overflow-wrap: break-word;
    padding: 0 5px 0 3px;
    vertical-align: 7px;
  }
}

.tview2-column lines lines > .disclosure-connector + line > branch {
  margin-top: 0;
  height: 100%;
}

.tview2-column > interrupt > lines > line > branch {
  margin-top: -2px;
  height: calc(100% + 2px);
}

.tview2-column > interrupt {
  flex: 0 0 100%;
  max-width: 100%;
  background: $c-bg-zebra;
  border-top: 1px solid $c-transp-border;
  border-bottom: 1px solid $c-transp-border;

  > comment {
    @extend %break-word;

    color: var(--c-base);
    display: block;
    padding: 3px 5px;
    border-inline-start: 2px solid $c-transp-border;
  }
}

.tview2-inline {
  @include padding-direction(7px, 3px, 7px, 7px);

  .mainline {
    font-weight: bold;
    background: color-mix(in srgb, $c-clearer 4%, transparent);
  }

  move {
    @extend %box-radius;

    margin-inline-end: 2px;
    font-size: 13px;
    font-weight: bold;
  }

  move index {
    padding-inline-end: 0.2em;
    line-height: 111.11%;
  }

  comment {
    vertical-align: 45%;
    overflow-wrap: break-word;
    margin: 0 0.2em 0 0.1em;
    font-size: 0.9em;
  }

  inline::before,
  inline::after {
    vertical-align: 0.7em;
  }
}

@media (pointer: coarse) {
  .tview2 {
    ---button-size-pointer-adjust: 4px;
  }
}

@media (hover: hover) {
  .tview2 move:not(.active):hover {
    background: $c-bg-zebra2;
    color: $c-font-clear;

    eval,
    index {
      color: $c-font;
    }

    .disclosure {
      background-color: $c-font-dimmer;
    }
  }

  .tview2 move.active:hover {
    cursor: default;

    .disclosure:hover {
      background-color: #ddd;
    }
  }

  .tview2 move:hover .disclosure:hover {
    background-color: $c-font-dim;
    cursor: pointer;
  }
}