<!-- 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">
  <style>
    .panel {
      padding-bottom: 0px;
      position: relative;
    }
    .titleBackground {
      position: absolute;
      left: 0px;
      top: 34px;
      border-radius: 0 0 0 7px;
      height: calc(100% - 34px);
      width: 30px;
      background-color: var(--border-color);
    }
    .titleButtons {
      float: right;
    }
    .titleButtons button {
      border-radius: 20px;
      width: 20px;
      height: 20px;
      font-weight: bold;
      line-height: 11px;
    }
  </style>
</head>
<div class="panel">
  <h2>
    Timeline Panel
    <div class="titleButtons">
      <button id="zoomIn" title="Increase resolution">+</button>
      <button id="zoomOut" title="Decrease resolution">–</button>
    </div>
  </h2>
  <div class="titleBackground"></div>
  <div>
    <slot></slot>
  </div>
</div>