.search {
  max-width: 240px;
}

.row {
  display: grid;
  grid-template-columns: max-content 1fr;
}

.timeline {
  display: grid;
  grid-template-rows: 1fr max-content 1fr;
  justify-items: center;
  width: 72px;
}

.timelineNumber {
  background-color: var(--theme-red-color);
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  display: grid;
  place-items: center;
  font: var(--font-sm-bold);
  padding: 4px;
}

.timelineLineTop {
  position: relative;
  width: 4px;
  margin-bottom: 4px;

  &.hasNeighbors {
    &::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 4px;
      border-radius: 0 0 4px 4px;
      background-color: var(--theme-red-color);
    }
  }

  &.hasMore {
    &::before {
      content: '';
      position: absolute;
      top: 8px;
      width: 4px;
      height: 4px;
      border-radius: 4px;
      background-color: var(--theme-red-color);
      box-shadow: 0 -8px 0 0 var(--theme-red-color), 0 0 0 0 var(--theme-red-color), 0 8px 0 0 var(--theme-red-color);
    }

    &::after {
      top: 24px;
    }
  }
}

.timelineLineBottom {
  position: relative;
  width: 4px;
  margin-top: 4px;

  &.hasNeighbors {
    &::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 4px;
      border-radius: 4px 4px 0 0;
      background-color: var(--theme-red-color);
    }
  }

  &.hasMore {
    &::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 24px;
      width: 4px;
      border-radius: 4px;
      background-color: var(--theme-red-color);
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 8px;
      width: 4px;
      height: 4px;
      border-radius: 4px;
      background-color: var(--theme-red-color);
      box-shadow: 0 -8px 0 0 var(--theme-red-color), 0 0 0 0 var(--theme-red-color), 0 8px 0 0 var(--theme-red-color);
    }
  }
}

.card {
  &:not(:last-of-type) {
    margin-bottom: 16px;
  }

  &.highlighted {
    border: 1px solid var(--theme-red-color);
    box-shadow: 0 16px 32px rgba(255, 67, 57, 0.04);
  }
}

.time {
  background: var(--theme-body-color);
  border-radius: 42px;
  padding: 4px 16px;
  font: var(--font-sm-semibold);
}

.list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.listGroup {
  padding: 16px;
  background: var(--theme-body-color);
  border-radius: 4px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: column;
  gap: 24px;
  flex-grow: 1;
}
