/* ========================================================= */
/* Pattern: History Graph                                    */
/* ========================================================= */

.sg-history-graph {
  --layout-history-graph-connector-width: var(--score-marker-width);
  --surface-history-graph-connector: var(--chart-marker-line);
  width: 100%;
}

.sg-history-graph__events {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sg-history-graph__event {
  position: relative;
  width: 100%;
}

.sg-history-graph__event:not(:last-child)::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: var(--layout-history-graph-connector-width);
  height: var(--spacing-large);
  background: var(--surface-history-graph-connector);
  content: "";
  transform: translateX(-50%);
}

.sg-history-graph__card {
  width: 100%;
  max-width: var(--layout-object-card-min-width);
  margin-inline: auto;
}

.sg-history-graph__navigation {
  width: 100%;
}