ul.#{$prefix}timeline {
  list-style: none;
  box-sizing: border-box;
  overflow: auto;
  margin: 1rem auto;
  @include set-fixit-vars((
    timeline-color: fixit-var(global-border-color),
    timeline-circle-color: #FF735A,
    timeline-circle-size: 10px,
    timeline-width: 2px,
  ));

  &[data-animation] {
    .#{$prefix}timeline-item::before {
      border-color: fixit-var(timeline-color);
      animation-name: border-color-fade;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-delay: calc(#{fixit-var(timeline-index)} * 0.3s);
  
      @keyframes border-color-fade {
        0% {
          border-color: fixit-var(timeline-color);
        }
        50% {
          border-color: fixit-var(timeline-circle-color);
        }
        100% {
          border-color: fixit-var(timeline-color);
        }
      }
    }
  }

  .#{$prefix}timeline-item {
    position: relative;
    padding: 0.5rem 1.75rem;

    @each $color, $value in $theme-colors {
      &[data-type='#{$color}'] {
        @include set-fixit-var(timeline-circle-color, fixit-var(#{$color}));
      }
    }

    .#{$prefix}timeline-item__timestamp {
      font-size: 0.8125rem;
      line-height: 1;
      color: fixit-var(secondary);

      &.is-top {
        margin-bottom: 0.25rem;
        padding-top: 0.34375rem;
      }
      &.is-bottom {
        margin-top: 0.25rem;
      }
    }

    .#{$prefix}timeline-item__content {
      font-size: 0.875rem;
    }

    &[data-node='dot']::before {
      background-color: fixit-var(timeline-circle-color) !important;
    }
    &[data-size='small']::before {
      transform: scale(0.8) translateY(-50%);
    }
    &[data-size='large']::before {
      transform: scale(1.2) translateY(-50%);
    }
    
    &::before {
      content: '';
      position: absolute;
      top: 1.25rem;
      transform: translateY(-50%);
      left: 0;
      width: fixit-var(timeline-circle-size);
      height: fixit-var(timeline-circle-size);
      font-size: fixit-var(timeline-circle-size);
      line-height: fixit-var(timeline-circle-size);
      text-align: center;
      @include border-radius(full);
      border-width: fixit-var(timeline-width);
      border-style: solid;
      border-color: fixit-var(timeline-circle-color);
      background-color: fixit-var(global-background-color);
      color: transparent;
      @include z-index(base);
    }
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: calc(#{fixit-var(timeline-circle-size)} / 2 + #{fixit-var(timeline-width)} / 2);
      width: fixit-var(timeline-width);
      height: 100%;
      background-color: fixit-var(timeline-color);
    }
  }  
}
