@use "core/functions" as *;
@use "core/mixins" as *;
@use "variables" as *;

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

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

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

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

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

      &.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: fi-var(timeline-circle-color) !important;
    }
    &[data-size='small']::before {
      scale: 0.8;
      translate: 0 -50%;
    }
    &[data-size='large']::before {
      scale: 1.2;
      translate: 0 -50%;
    }

    &::before {
      content: '';
      position: absolute;
      top: 1.25rem;
      translate: 0 -50%;
      left: 0;
      text-align: center;
      border-style: solid;
      color: transparent;
      width: fi-var(timeline-circle-size);
      height: fi-var(timeline-circle-size);
      font-size: fi-var(timeline-circle-size);
      line-height: fi-var(timeline-circle-size);
      border-width: fi-var(timeline-width);
      border-color: fi-var(timeline-circle-color);
      background-color: fi-var(global-background-color);
      @include border-radius(full);
      @include z-index(base);
    }
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: calc(#{fi-var(timeline-circle-size)} / 2 + #{fi-var(timeline-width)} / 2);
      width: fi-var(timeline-width);
      height: 100%;
      background-color: fi-var(timeline-color);
    }
  }  
}
