<template id="rubiks-cube-scrambler-template">
  <ol class="scrambler__move-list"></ol>
  <div class="scrambler__pattern-length">
    <label for="pattern-length" class="scrambler__label">Length</label>
    <input type="text" name="pattern-length">
  </div>
  <div class="scrambler__scramble">
    <button name="scramble" class="scrambler__button">Scramble!</button>
  </div>
  <style>
    .scrambler__move-list {
      display: grid;
      font-family: var(--font-family-monospace);
      gap: var(--space-xxs);
      grid-template-columns: repeat(7, 3ch);
      list-style: none;
      margin-block: 0;
      padding-inline: 0;

      .scrambler__move {
        justify-self: center;
        margin: 1px;
      }

      .scrambler__move--start {
        justify-self: start;
      }

      .scrambler__move--end {
        justify-self: end;
      }
    }

    .scrambler__scramble,
    .scrambler__pattern-length
    {
      font-size: var(--text-s);
      margin-block-start: var(--space-s);
    }

    .scrambler__button {
      font-size: var(--text-s);
    }

    .scrambler__label {
      color: var(--text-color-secondary);
      font-family: var(--font-family-monospace);
      text-transform: uppercase;

      &::after {
        content: " = ";
      }
    }

    input[name="pattern-length"] {
      font-size: var(--text-s);
      text-align: end;
      width: 4ch;
    }
  </style>
</template>
