@import "../mixins/material-palette";
@import "../mixins/variables";
@import "../../../../node_modules/bootstrap/scss/functions";
@import "../../../../node_modules/bootstrap/scss/variables";
@import "../../../../node_modules/bootstrap/scss/mixins";

.timeline_card {
    position: relative;
    margin: ($spacer/3);
    padding: 0;
    list-style: none;
    font-family: 'poppins';
    &::before {
      position: absolute;
      top: 6px;
      width: 3px;
      height: 100%;
      content: '';
      background: $card-border-color;
      left: 14px;
    }
    .timeline_card-icon {
      position: absolute;
      top: 15px;
      width: 12px;
      height: 12px;
      text-align: center;
      left: 0;
      border-radius: 50%;
      &::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 1px solid white;
      }
    }

    .timeline_card-card {
      position: relative;
      margin: 40px 0;
      @include clearfix();
      &:first-child .timeline_card-icon {
        top: 0;
      }
      &:last-child .timeline_card-icon {
        top: 0;
      }
    }
    .timeline_card-card:first-child {
      margin-top: 0;
    }
    .timeline_card-content {
      position: relative;
      margin-left: 30px;
      @include clearfix();
      > .card {        
        display: inline-block;
        margin: 0;
      }
    }
    .timeline_card-content .timeline_card-date {
      display: inline-block;
      padding: 4px 0 10px;
      @include media-breakpoint-up(lg) {
        position: absolute;
        top: 4px;
        width: 100%;
        left: 112%;       
      }
      @include media-breakpoint-down(md) {
        position: relative;
        top: 0;
        width: 100%;
        left: auto;
      }
    }
    .timeline_card-content > .card::before {
      position: absolute;
      top: 7px;
      width: 0;
      height: 0;
      content: ' ';
      pointer-events: none;
      border-width: 11px;
      border-style: solid;
      right: 100%;
      border-color: transparent #d2d2d2 transparent transparent;
    }
    .timeline_card-content > .card::after {
      position: absolute;
      top: 8px;
      width: 0;
      height: 0;
      content: ' ';
      pointer-events: none;
      border-width: 9px;
      border-style: solid;
      right: 100%;
      border-color: transparent white transparent transparent;
    }
    &:not(.stacked) {
      @include media-breakpoint-up(lg) {
        &::before {
          left: 50%;
          margin-left: -2px;
        }
        .timeline_card-card:nth-child(odd) .timeline_card-content {
          float: right;
        }
        .timeline_card-card:nth-child(even) .timeline_card-content {
          float: left;
        }
        .timeline_card-card:nth-child(even) .timeline_card-content > .card {
          float: right;
        }
        .timeline_card-card:nth-child(even) .timeline_card-content > .card::before {
          position: absolute;
          right: auto;
          left: 100%;
          border-color: transparent transparent transparent lavender;
        }
        .timeline_card-card:nth-child(even) .timeline_card-content > .card::after {
          position: absolute;
          right: auto;
          left: 100%;
          border-color: transparent transparent transparent white;
        }
        .timeline_card-card:nth-child(odd) .timeline_card-content .timeline_card-date {
          right: 112%;
          left: auto;
          text-align: right;
        }
        .timeline_card-card:first-child {
          margin-top: 0;
        }
        .timeline_card-card.timeline_card-button {
          text-align: center;
        }
        .timeline_card-icon {
          left: 50%;
          margin-left: -6px;
        }
        .timeline_card-content {
          width: 47%;
          margin-left: 0;
        }
      }
    }
    &.stacked {
      @include media-breakpoint-up(lg) {
        .timeline_card-content > .card {
          margin-bottom: 0;
        }
        .timeline_card-date {
          position: relative;
          top: 0;
          width: 100%;
          left: auto;
        }
      }
    }
  }
