/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

.timeline {
  display: grid;
  grid-template-rows: 24px auto auto;
  font-size: smaller;
  color: var(--text-color-deemphasized);
  padding-inline-start: 0;
  text-align: center;
}

.timeline.empty {
  display: none;
}

.timeline > svg {
  grid-row: 1 / 1;
  fill: var(--background-color-box);
}

.timeline > .line {
  height: 2px;
  justify-self: stretch;
  align-self: center;
  /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */
  background-color: var(--border-color);
  grid-row: 1;
}

.timeline > .line:nth-child(1) {
  grid-column: 1;
  width: 50%;
  justify-self: flex-end;
}

.timeline > .line:nth-child(2) {
  grid-column: 2/-2;
}

.timeline > .line:nth-child(3) {
  grid-column: -2;
  width: 50%;
  justify-self: flex-start;
}

.timeline > .point {
  width: 24px;
  height: 24px;
  stroke: var(--border-color);
  stroke-width: 30px;
  justify-self: center;
}

.timeline > .date {
  grid-row: 2;
  padding: 4px 8px;
}

.timeline > .action {
  grid-row: 3;
}
