<!-- Copyright 2020 the V8 project authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<head>
  <link href="./index.css" rel="stylesheet">
</head>
<style>
  #transitionView {
    overflow-x: scroll;
    white-space: nowrap;
    min-height: 50px;
    max-height: 200px;
    padding: 50px 0 0 0;
    margin-top: -25px;
    width: 100%;
  }

  #transitionView::-webkit-scrollbar {
    width: 0;
    background-color: transparent;
  }

  .map {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
    background-color: var(--map-background-color);
    border: 4px solid var(--surface-color);
    font-size: 10px;
    text-align: center;
    line-height: 18px;
    color: var(--on-surface-color);
    vertical-align: top;
    margin-top: -13px;
    /* raise z-index */
    position: relative;
    z-index: 2;
    cursor: pointer;
  }

  .map.selected {
    border-color: var(--on-surface-color);
  }

  .transitions {
    display: inline-block;
    margin-left: -15px;
  }

  .transition {
    min-height: 55px;
    margin: 0 0 -2px 2px;
  }

  /* gray out deprecated transitions */
  .deprecated>.transitionEdge,
  .deprecated>.map {
    opacity: 0.5;
  }

  .deprecated>.transition {
    border-color: rgba(0, 0, 0, 0.5);
  }

  /* Show a border for all but the first transition */
  .transition:nth-of-type(2),
  .transition:nth-last-of-type(n+2) {
    border-left: 2px solid;
    margin-left: 0px;
  }

  /* special case for 2 transitions */
  .transition:nth-last-of-type(1) {
    border-left: none;
  }

  /* topmost transitions are not related */
  #transitionView>.transition {
    border-left: none;
  }

  /* topmost transition edge needs initial offset to be aligned */
  #transitionView>.transition>.transitionEdge {
    margin-left: 13px;
  }

  .transitionEdge {
    height: 2px;
    width: 80px;
    display: inline-block;
    margin: 0 0 2px 0;
    background-color: var(--map-background-color);
    vertical-align: top;
    padding-left: 15px;
  }

  .transitionLabel {
    color: var(--on-surface-color);
    transform: rotate(-15deg);
    transform-origin: top left;
    margin-top: -10px;
    font-size: 10px;
    white-space: normal;
    word-break: break-all;
    background-color: var(--surface-color);
  }

  .showSubtransitions {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid var(--map-background-color);
    cursor: zoom-in;
    margin: 4px 0 0 4px;
  }

  .showSubtransitions.opened {
    border-top: none;
    border-bottom: 10px solid var(--map-background-color);
    cursor: zoom-out;
  }

  #tooltip {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--red);
    pointer-events: none;
    z-index: 100;
    display: none;
  }

  #title {
    padding-bottom: 10px;
  }
</style>
<div class="panel">
  <div id="title">
    <h4>Transitions</h4>
  </div>
  <section id="transitionView"></section>
  <div id="tooltip">
    <div id="tooltipContents"></div>
  </div>
</div>