/* 
  The timeline component shows a list of steps in a process.
*/

.timeline {
  gap: var(--small-margin);
  margin-left: 0;
}

.timeline-step {
  padding: var(--margin);
  background: linear-gradient(90deg, var(--light-purple), var(--purple));
  border-radius: var(--border-radius);
  position: relative;
  color: white;
  list-style: none;
  height: 100%;
  width: 100%;
}

.timeline-step:nth-child(1) {
  z-index: 10;
}

.timeline-step:nth-child(2) {
  z-index: 9;
}

.timeline-step:nth-child(3) {
  z-index: 8;
}

.timeline-step:nth-child(4) {
  z-index: 7;
}

.timeline-step:nth-child(5) {
  z-index: 6;
}

.timeline-step:nth-child(6) {
  z-index: 5;
}

.timeline-step:nth-child(7) {
  z-index: 4;
}

.timeline-step:nth-child(8) {
  z-index: 3;
}

.timeline-step:nth-child(9) {
  z-index: 2;
}

.timeline-step:nth-child(10) {
  z-index: 1;
}

.timeline-step .number {
  font-size: 3rem;
  color: var(--orange);
}

.timeline-step .number::after {
  content: '.';
}

/* Desktop + Tablet */
@media (min-width: 651px) {
  .timeline-step:not(:last-child)::after {
    /* Arrow on right side */
    content: '';
    position: absolute;
    top: 50%;
    right: calc(-3rem + 1px);
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 3rem solid transparent;
    border-bottom: 3rem solid transparent;
    border-left: 3rem solid var(--purple);
  }
}

/* Phone */
@media (max-width: 650px) {
  /* Arrow on the bottom */
  .timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: calc(-3rem + 1px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 3rem solid transparent;
    border-right: 3rem solid transparent;
    border-top: 3rem solid var(--light-purple);
  }
}