<!--
  Copyright 2021 The Chromium Authors. All rights reserved.
  Use of this source code is governed by a BSD-style license that can be
  found in the LICENSE file.
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Button example</title>
    <style>
      #container {
        padding: 25px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
      }
      #toolbar {
        background-color: var(--color-background);
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom: 1px solid var(--color-details-hairline);
        padding: 0px 5px;
        height: 29px;
      }
      #small-toolbar {
        background-color: var(--color-background);
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom: 1px solid var(--color-details-hairline);
        padding: 0px 5px;
        height: 23px;
      }
      .separator {
        background-color: var(--color-details-hairline);
        width: 1px;
        height: 17px;
        margin: 0px 5px;
      }
    </style>
  </head>
  <body>
    <div id="container">
    </div>
    <div id="toolbar">
    </div>
    <div id="small-toolbar">
    </div>
    <form onsubmit="event.preventDefault(); alert('submitted');" id="form">
      <input name="field" placeholder="Enter smth" />
    </form>
    <script type="module" src="./basic.js"></script>
  </body>
</html>