@import “timeline/variables”;

@import “timeline/mixins/timeline-element”; @import “timeline/mixins/timeline-event-variant”; @import “timeline/mixins/timeline-item-variant”; @import “timeline/mixins/timeline-label-variant”; @import “timeline/mixins/timeline-line-variant”; @import “timeline/mixins/timeline-point-color-variant”; @import “timeline/mixins/timeline-point-size-variant”; @import “timeline/mixins/timeline-responsive-variant”; @import “timeline/mixins/timeline-row-clearfix”; @import “timeline/mixins/timeline-single-column”;

.timeline {

@extend .timeline-line-solid;
@include timeline-responsive-variant($timeline-item-width-offset, 0, 0, $timeline-item-width-offset);
@include timeline-row-clearfix;
position: relative;
padding: map-get($timeline-container-paddings, vertical) map-get($timeline-container-paddings, horizontal);
list-style: none;
font-weight: 300;
&:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 100% !important;
  margin-left: map-get($timeline-line, width) / 2;
  border-right: {
    width: map-get($timeline-line, width);
    style: solid;
    color: map-get($timeline-line, color)
  }
}
&.timeline-single-column {
  @include timeline-single-column($timeline-single-column-breakpoint);
}
@each $type, $style in map-get($timeline-line, styles) {
  &.timeline-line-#{$type} {
    @include timeline-line-variant($style);
  }
}
& .timeline-item {
  @extend .timeline-item-arrow-md;
  @include timeline-element;
  margin-bottom: $timeline-item-margin-bottom;
  &:nth-of-type(2) {
    margin-top: $timeline-second-item-margin-top;
  }
  &.timeline-item-left, &.timeline-item-right {
    @include timeline-item-start-margins(0, $timeline-second-item-margin-top);
    clear: both !important;
    & + .timeline-item:not(.timeline-item-left):not(.timeline-item-right) {
      clear: both;
    }
  }
  &.timeline-item-right, &:nth-of-type(even):not(.timeline-item-left) {
    float: right;
    clear: right;
    & > .timeline-point {
      left: -$timeline-point-width;
      &.timeline-point-blank {
        left: -$timeline-point-blank-width;
      }
    }
  }
  @each $size, $style in $timeline-item-arrow {
    &.timeline-item-arrow-#{$size} {
      @include timeline-item-variant(map-get($style, offset-top), map-get($style, width));
    }
  }
  & > .timeline-event {
    @extend .timeline-event-default;
    position: relative;
    float: left;
    border-radius: $timeline-item-border-radius;
    @each $status, $color in $timeline-colors {
      &.timeline-event-#{$status} {
        @include timeline-event-variant(
                map-get($timeline-bg-colors, $status),
                map-get($timeline-desaturated-colors, $status),
                map-get($timeline-colors, $status)
        );
      }
    }
    &:before, &:after {
      content: "";
      display: inline-block;
      position: absolute;
    }
    & .timeline-heading, & .timeline-body, & .timeline-footer {
      padding: map-get($timeline-item-inner-padding, verical) map-get($timeline-item-inner-padding, horizontal);
      & p, & ul {
        margin-bottom: 0;
      }
    }
    & .timeline-heading {
      & h4 {
        font-weight: 400;
      }
    }
    & .timeline-footer {
      & a {
        cursor: pointer;
        text-decoration: none;
      }
    }
    & .panel, & .table, & .blankslate {
      margin: 0;
      border: none;
      border-radius: inherit;
      overflow: hidden;
    }
    & .table {
      & th {
        border-top: 0;
      }
    }
  }
  & > .timeline-point {
    @extend .timeline-point-default;
    @include timeline-point-size-variant($timeline-point-width, $timeline-point-height);
    position: absolute;
    z-index: 100;
    border: {
      width: $timeline-point-border-width;
      style: solid;
      radius: 100%
    }
    line-height: $timeline-point-height - ($timeline-point-border-width * 2);
    text-align: center;
    &.timeline-point-blank {
      @include timeline-point-size-variant($timeline-point-blank-width, $timeline-point-blank-height);
      @include timeline-point-color-variant(map-get($timeline-desaturated-colors, default), map-get($timeline-desaturated-colors, default));
    }
    @each $status, $color in $timeline-colors {
      &.timeline-point-#{$status} {
        @include timeline-point-color-variant(map-get($timeline-bg-colors, default), map-get($timeline-desaturated-colors, $status));
      }
    }
  }
}
& .timeline-label {
  @include timeline-element;
  @include timeline-item-start-margins(0, $timeline-second-item-margin-top);
  top: 1px;
  width: 100%;
  margin: {
    left: auto;
    right: auto;
  }
  padding: 0;
  text-align: center;
  @each $status, $color in $timeline-colors {
    & .label-#{$status} {
      @include timeline-label-variant(map-get($timeline-desaturated-colors, $status));
    }
  }
}

}

@media all and (orientation: portrait) {

.timeline {
  @include timeline-single-column;
}

}

@media (max-width: $timeline-single-column-breakpoint) {

.timeline {
  @include timeline-single-column;
}

}