/*!
 * Copyright (c) 2024 Eclipse Foundation, Inc.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
*/

@timeline-gap: 4rem;

.timeline {
  position: relative;
  display: flex;
  justify-content: space-around;
  gap: @timeline-gap;

  &::before {
    content: '';
    position: absolute;
    background-color: #ccc;
  }

  &-item {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      width: 1rem;
      height: 1rem;
      background-color: #ccc;
      border-radius: 50%;
    }
  }
}

.timeline-horizontal.timeline-end {
  .timeline-item {
    margin-top: @timeline-gap;

    &::before {
      top: calc(-@timeline-gap - 0.5rem); 
    }
  }
}

// Right-side variant
.timeline-vertical.timeline-end {
  .timeline-item {
    margin-left: @timeline-gap;

    &::before {
      left: calc(-@timeline-gap - 0.5rem);
    }
  }
}

.timeline-opposite.timeline-vertical {
  align-items: center;

  &::before {
    left: calc(50% - 0.5px);
  }

  .timeline-item {
    width: calc(50% - @timeline-gap);

    &::before {
      top: calc(50% - 0.5rem);
    }

    &:nth-child(even) {
      align-self: flex-start;
      margin-right: @timeline-gap;
      text-align: right;

      &::before {
        right: calc(-@timeline-gap - 0.5rem);
      }
    }
    &:nth-child(odd) {
      align-self: flex-end;
      margin-left: @timeline-gap;
      text-align: left;

      &::before {
        left: calc(-@timeline-gap - 0.5rem);
      }
    }
  }
}

.timeline-vertical {
  flex-direction: column;
  justify-content: space-between;

  &::before {
    width: 1px;
    height: 100%;
  }
  
  .timeline-item {
    // Pin the first circle to the top of the timeline.
    &:first-child::before {
      top: 0;
    }

    // Pin the last circle to the bottom of the timeline.
    &:last-child::before {
      top: unset;
      bottom: 0;
    }
  }
}

.timeline-horizontal {
  flex-direction: row;

  &::before {
    width: 100%;
    height: 1px;
  }

  .timeline-item {
    // Pin the first circle to the left of the timeline.
    &:first-child::before {
      left: 0;
    }

    // Pin the last circle to the right of the timeline.
    &:last-child::before {
      right: 0;
    }
  }
}
