$rsce_timeline_breakpoints-to-use: $grid-breakpoints-ls !default;
$rsce_timeline_breakpoint-to-single-col-down: 7 !default;

$rsce_timeline_timeline-color: $ls_color-black !default;
$rsce_timeline_timeline-width: 2 !default;

$rsce_timeline_timeline-circle-color: $ls_color-white !default;
$rsce_timeline_timeline-circle-width: 20 !default;
$rsce_timeline_timeline-circle-color-outline: $ls_color-black !default;

$rsce_timeline_distance-timeline-content: 50 !default;

.ce_rsce_timeline {
  > ul {
    &::after {
      background-color: $rsce_timeline_timeline-color;
      width: $rsce_timeline_timeline-width+'px';
      margin-left: -($rsce_timeline_timeline-width/2)+'px';
    }
  }

  .timecontainer-wrapper {
    padding: 10px $rsce_timeline_distance-timeline-content+'px';

    .time-period {
      padding: 0.5rem 0;

      &::before {
        height: 1px;
        width: $rsce_timeline_distance-timeline-content+'px';
        background-color: $ls_color-black;
      }

      &::after {
        width: $rsce_timeline_timeline-circle-width+'px';
        height: $rsce_timeline_timeline-circle-width+'px';
        background-color: $rsce_timeline_timeline-circle-color;
        border: 1px solid $rsce_timeline_timeline-circle-color-outline;
        border-radius: 50%;
      }

      span {
        padding: 0.5rem 1.5rem;
        border: 1px solid $ls_color-black;
        background-color: $ls_color-white;
      }
    }

    &.direction-left {
      padding-left: 0;

      .time-period {
        &::before {
          right: 0;
        }
        &::after {
          right: -($rsce_timeline_timeline-circle-width/2)+'px';
        }
      }
    }

    &.direction-right {
      padding-right: 0;
      .time-period {
        &::before {
          left: 0;
        }
        &::after {
          left: -($rsce_timeline_timeline-circle-width/2)+'px';
        }
      }
    }

    .content-wrapper {
      background-color: $ls_color-light-grey;
      border: 1px solid $ls_color-black;

      .text-container,
      .link-container {
        padding: 1rem 1.5rem;

        a {
          @include ls_defaultButton;
          @include ls_dynamicBackground;
        }
      }
    }
  }

  @include media-breakpoint-down($rsce_timeline_breakpoint-to-single-col-down, $rsce_timeline_breakpoints-to-use) {
    > ul {
      margin-left: ($rsce_timeline_timeline-circle-width/2)+'px';
    }

    .timecontainer-wrapper {
      &.direction-left {
        padding-left: $rsce_timeline_distance-timeline-content+'px';
        padding-right: 0;

        .time-period {
          &::before {
            right: unset;
            left: 0;
          }

          &::after {
            right: unset;
            left: -($rsce_timeline_timeline-circle-width/2)+'px';
          }
        }
      }
    }
  }
}