@use 'sass:math';

$timeline-width: 12rem !default;
$timeline-badge-size: 1.4rem !default;
$timeline-badge-outline: 0.2rem !default;
$timeline-badge-area: $timeline-badge-size + (2 * $timeline-badge-outline);
$timeline-badge-offset-mobile: 1rem !default;
$timeline-badge-offset: 3rem !default;
$timeline-color: #bdbdbd !default;

.ls-timeline {

  &__item {
    display: flex;
    position: relative;
  }

  &__item-timeline {
    margin-right: 6 * $sp;
    margin-bottom: 0;
    position: relative;
    flex-shrink: 0;

    &::before,
    &::after {
      content: '';
      position: absolute;
      right: -2px;
      width: 2px;
      background-color: $timeline-color;
    }

    &::before {
      top: 0;
      bottom: calc(100% - #{$timeline-badge-offset-mobile});

      @include breakpoint(sm) {
        bottom: calc(100% - #{$timeline-badge-offset});
      }
    }

    &::after {
      top: $timeline-badge-offset-mobile + $timeline-badge-area;
      bottom: 0;

      @include breakpoint(sm) {
        top: $timeline-badge-offset + $timeline-badge-area;
      }
    }

    &--highlighted-before {

      &::before {
        background-color: $color-primary;
      }
    }

    &--highlighted-after {

      &::after {
        background-color: $color-primary;
      }
    }

    @include breakpoint(sm) {
      width: $timeline-width;
    }
  }

  &__item-label {
    display: flex;
    align-items: center;
    right: calc(-#{math.div($timeline-badge-size, 2)} - 1px);
    position: absolute;
    text-align: right;
    transform: translateY(-50%);
    top: $timeline-badge-offset-mobile + math.div($timeline-badge-area, 2);

    @include breakpoint(sm) {
      top: $timeline-badge-offset + math.div($timeline-badge-area, 2);
    }
  }

  &__item-type {
    height: $timeline-badge-size;
    width: $timeline-badge-size;
    border-radius: 100%;
    margin: $timeline-badge-outline 0 $timeline-badge-outline 2 * $sp;
    background-color: $timeline-color;
  }

  &__item-datetime {
    margin-bottom: 2 * $sp;

    @include breakpoint(sm) {
      display: none;
    }

    &--desktop {
      margin-bottom: 0;
      display: none;

      @include breakpoint(sm) {
        display: block;
      }
    }
  }

  &__item-date {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: $sp;
  }

  &__item-time {
    font-size: 1.4rem;
    color: $color-text-2;
  }

  &__item-content {
    flex-grow: 1;
    margin-bottom: 6 * $sp;
  }

  &__more {
    display: flex;
    width: 100%;
  }

  &__more-badge {
    margin: $timeline-badge-outline 6 * $sp $timeline-badge-outline calc(#{- math.div($timeline-badge-size, 2)} + 1px);
    height: $timeline-badge-size;
    width: $timeline-badge-size;
    border-radius: 100%;
    background-color: $timeline-color;

    @include breakpoint(sm) {
      margin-left: calc(#{$timeline-width - math.div($timeline-badge-size, 2)} + 1px);
    }
  }
}