<!--
<header>
  <h1>HTML/edit</h1>
</header>
-->
<slot/>

<style global type="text/scss">
  /**
   * Grid
   */

  #main {
    display: grid;
    grid-auto-columns: auto 1fr auto;
    grid-auto-flow: row;
    grid-gap: 0.25rem 1rem;

    background: #EDEDED;
    word-break: keep-all;
    padding-left: 2em;
  }

  .route {
    grid-column: 1 / span 3;
  }

  header {
    grid-column: 1 / span 3;
    border-radius: 25px;

    &.expandable {
      grid-column: 1 / span 2;
    }
  }

  .search-result {
    grid-column: 2 / span 1;
  }

  .button-add,
  .button-remove {
    grid-column: 3 / span 1;
    align-self: end;
    padding: 0 0 0.25rem;
    width: 5em;
  }

  .button-remove {
    grid-row: auto / span 2;
  }

  label {
    grid-column: 1 / span 1;
    align-self: center;
    grid-template-rows: 10px 50px;
  }

  .label-button {
    font-size: 1em;
    display: grid;
    text-align: center;
  }

  select,
  .checkbox-group {
    grid-column: 2 / span 1;
    background-color: #E8E8E8;

  }

  .checkbox-group {
    grid-template-rows: 10px 50px;
  }

  .input-text {
    grid-column: 2 / span 1;
    position: relative;

    &.title {
      grid-column: 1 / span 2;

      margin-top: 1rem;

      input[type=text] {
        border: none;
        padding: 0.25rem 0;
        font-size: 1.5em;
      }
    }

    .input {
      text-decoration: underline;
      margin-left: 2em;
      z-index: 1;
      width: 100%;
      background-color: transparent;
    }

    .placeholder {
      position: absolute;
      z-index: -1;
      width: 100%;
      opacity: 0.4;
    }
  }

  /**
   * Buttons
   */

  button {
    display: inline;
    box-sizing: content-box;

    margin: 0;
    border: none;
    padding: 10px;

    background: #1FC5A0;
    border-radius: 25px;

    width: auto;
    height: auto;

    font: inherit;
    text-align: center;

    cursor: pointer;

    align-items: normal;
    perspective-origin: 0 0;
    transform-origin: 0 0;

    -moz-appearance: none;
    // -webkit-logical-height: 1em;
    // -webkit-logical-width: auto;

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

  button:active {
    color: inherit;
  }

  @supports (-moz-appearance: none) { /* Mozilla-only */
    button::-moz-focus-inner {
      border: none;
      padding: 0;
    }

    button:focus {
      outline-style: dotted;
      outline-width: 1px;
    }
  }

  label.checkbox {
    margin-right: 1rem;
  }

  p {
    color:transparent;
  }
</style>