#timeline {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(3, auto);
  height: max-content;
  margin-left: auto;
}
#timeline > label {
  grid-column: 1 / span 1;
}
#timeline > input {
  transition: width 0.5s ease-in-out;
  margin: 0;
  background-color: darkred;
  height: 4ch;
}
#timeline .toggle {
  --time: 0;
  width: 4ch;
}
#timeline input[name='edit'] {
  width: 2ch;
  cursor: url('../../assets/icons/cursor/click.svg') 8 8, pointer;
}
#timeline > .toggle:checked:before {
  visibility: visible;
  top: calc((100% - 3px) * var(--time) / 360);
  width: 4ch;
  height: 3px;
  background: red;
  border-radius: 3px;
}
#timeline > input[name='edit']:checked {
  background: red;
  cursor: url('../../assets/icons/cursor/default.svg'), default;
}
#timeline input:nth-of-type(2) {
  border-top-left-radius: 1ch;
}
#timeline input:nth-of-type(3) {
  border-top-right-radius: 1ch;
}
#timeline input:nth-of-type(28) {
  border-bottom-left-radius: 1ch;
}
#timeline input:last-of-type {
  border-bottom-right-radius: 1ch;
}