.digit-timeline-item {
  @apply flex items-start relative ;
  gap: theme(digitv2.spacers.spacer4);
}

.timeline-circle {
  @apply relative flex-shrink-0 w-8 h-8;
  border-radius: 50%;

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    @apply w-6 h-6;
  }
}

.connector-line {
  @apply absolute bottom-0 border-solid border-border;
  border-left-width: 0.125rem;
  margin-left: 0.938rem;
  top: theme(digitv2.spacers.spacer8);

  &.completed,
  &.inprogress,
  &.nextActiveStep{
    border-color: theme(digitv2.lightTheme.primary-1);
  }

  &.nextActiveStep{
    border-style: dotted;
  }

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    margin-left: 0.688rem;
    top: theme(digitv2.spacers.spacer6);
    border-left-width: 0.063rem;
  }
}

.timeline-content,
.timeline-info {
  @apply flex flex-col w-full;
  gap: theme(digitv2.spacers.spacer2);
}

.timeline-info{
  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    gap: theme(digitv2.spacers.spacer1);
  }
}

.timeline-divider {
  border: 0.063rem solid theme(digitv2.lightTheme.divider);
}

.timeline-label {
  @extend .typography.heading-s;
  font-family: theme(digitv2.fontFamily.sans);
  font-style: theme(digitv2.fontStyle.normal);
  font-weight: theme(digitv2.fontWeight.bold);
  line-height: theme(digitv2.lineHeight.lineheight1);

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    font-size: theme(digitv2.fontSize.heading-s.mobile);
  }

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
    /* Media query for tablets */
    font-size: theme(digitv2.fontSize.heading-s.tablet);
  }

  @media (min-aspect-ratio: 3/4) {
    /* Media query for desktop */
    font-size: theme(digitv2.fontSize.heading-s.desktop);
  }
  @apply whitespace-normal h-auto text-left;
  color: theme(digitv2.lightTheme.text-primary);
  word-break: break-word;
  padding-top: 0.414rem;

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    padding-top: 0.164rem;
  }

  &.upcoming{
    color:theme(digitv2.lightTheme.text-secondary);
  }
}

.timeline-date {
  @extend .typography.body-s;
  font-family: theme(digitv2.fontFamily.sans);
  font-style: theme(digitv2.fontStyle.normal);
  font-weight: theme(digitv2.fontWeight.regular);
  line-height: theme(digitv2.lineHeight.lineheight2);

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    font-size: theme(digitv2.fontSize.body-s.mobile);
  }

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
    /* Media query for tablets */
    font-size: theme(digitv2.fontSize.body-s.tablet);
  }

  @media (min-aspect-ratio: 3/4) {
    /* Media query for desktop */
    font-size: theme(digitv2.fontSize.body-s.desktop);
  }
  @apply text-left;
  color: theme(digitv2.lightTheme.text-secondary);
}

.timeline-toggle-details {
  @apply flex items-center cursor-pointer;
  gap: theme(digitv2.spacers.spacer1);
  width: fit-content;
}

.timeline-additional-elements-inline {
  @apply flex flex-wrap items-start;
  gap: theme(digitv2.spacers.spacer4);
  @extend .typography.body-s;
  font-family: theme(digitv2.fontFamily.sans);
  font-style: theme(digitv2.fontStyle.normal);
  font-weight: theme(digitv2.fontWeight.regular);
  line-height: theme(digitv2.lineHeight.lineheight2);

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    font-size: theme(digitv2.fontSize.body-s.mobile);
  }

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
    /* Media query for tablets */
    font-size: theme(digitv2.fontSize.body-s.tablet);
  }

  @media (min-aspect-ratio: 3/4) {
    /* Media query for desktop */
    font-size: theme(digitv2.fontSize.body-s.desktop);
  }
}

.timeline-additional-elements-column {
  @apply flex flex-col items-start;
  @extend .typography.body-s;
  font-family: theme(digitv2.fontFamily.sans);
  font-style: theme(digitv2.fontStyle.normal);
  font-weight: theme(digitv2.fontWeight.regular);
  line-height: theme(digitv2.lineHeight.lineheight2);

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    font-size: theme(digitv2.fontSize.body-s.mobile);
  }

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
    /* Media query for tablets */
    font-size: theme(digitv2.fontSize.body-s.tablet);
  }

  @media (min-aspect-ratio: 3/4) {
    /* Media query for desktop */
    font-size: theme(digitv2.fontSize.body-s.desktop);
  }
  gap: theme(digitv2.spacers.spacer4);

  .timeline-individual-element {
    @apply w-full max-w-full;

    &.hidden{
      display: none;
    }

  }
}

img {
  @apply max-w-full;
}

/* Circle Variants */
.timeline-circle,
.timeline-circle.upcoming {
  background-color: theme(digitv2.lightTheme.text-disabled);
}

.timeline-circle.inprogress {
  background-color: transparent;
  border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
}

.timeline-circle.inprogress:not(.error)::after {
  @apply absolute w-4 h-4;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: theme(digitv2.lightTheme.primary-1);

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    @apply w-3 h-3;
  }
}

.timeline-circle{
  .check-icon {
    @apply w-6 h-6 absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      width: 1.125rem;
      height: 1.125rem;
    }
  }
}

.timeline-circle.completed {
  background-color: theme(digitv2.lightTheme.primary-1);
}

.digit-timeline-molecule{
  @apply max-h-full;

  .timeline-content:not(.lastTimeline){

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      margin-bottom: theme(digitv2.spacers.spacer6);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      margin-bottom: theme(digitv2.spacers.spacer5);
    }
    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      margin-bottom: theme(digitv2.spacers.spacer4);
    }
  }
}

.view-more-past-container {
  margin-top: theme(digitv2.spacers.spacer4);
}

.view-more-future-container {
  margin-bottom: theme(digitv2.spacers.spacer4);
}

.digit-timeline-item {
  &.error{

    .timeline-circle{
      background-color: theme(digitv2.lightTheme.alert-error);
    }

    .timeline-content{
      background-color: theme(digitv2.lightTheme.alert-errorbg);
      border-radius: theme(digitv2.spacers.spacer1);
      padding: theme(digitv2.spacers.spacer2) theme(digitv2.spacers.spacer3);


      .timeline-info{
        .timeline-label{
          color: theme(digitv2.lightTheme.alert-error);
          padding-top: 0rem;
        }
        .timeline-date{
          color: theme(digitv2.lightTheme.alert-error);
        }

        .timeline-divider {
          border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
        }
      }
    }
  }
}