/* ranges */

.animate-ranges,
.ranges {
  position: sticky;
  top: 5.3rem;
  background-color: var(--bg-event);
}

.animate-ranges {
  transition: max-width var(--transition-long);
}

.ranges {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  justify-content: center;
  transition: heigth var(--transition-long), opacity var(--transition-long);
}

.ranges.first {
  width: fit-content;
  margin: 0 auto;
}

.ranges.closed {
  flex-wrap: nowrap;
  width: min(max-content, 100%);
  max-width: calc(100vw - 24px);
  justify-content: unset;
}

/* range */

.range {
  font-size: 0.9em;
  padding-bottom: var(--vertical-spacing);
  text-decoration: underline;
  text-decoration-color: transparent;
  white-space: nowrap;
  /* transition: text-decoration-color var(--transition-long); */
}

.range:not(.self) {
  cursor: pointer;
}

.ranges:not(.closed) .range:not(.self) {
  color: var(--link-color);
}

.ranges.opened .range:not(.self):hover {
  text-decoration-color: var(--link-color);
}

.event:not(.closed) .range.self {
  font-weight: bold;
}

.range.to-hide.closed,
.range.to-hide.opening-start {
  display: none;
}

.ranges.closed .range:last-of-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}