//
//  timeline.scss
//

/* ================ The Timeline ================ */

.timeline {
  position: relative;
  width: 660px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 1em 0;
  list-style-type: none;

  &:before {
    position: absolute;
    left: 50%;
    top: 0;
    content: ' ';
    margin-left: -3px;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, rgb(242, 117, 56, 0) 0%, rgb(242, 117, 56) 50%, rgb(242, 117, 56, 0) 100%);
    z-index: 5;
  }

  li {
    padding: 1em 0;

    &:after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

    .direction-l {
      position: relative;
      width: 300px;
      float: left;
      text-align: right;

      .flag {
        &::before {
          position: absolute;
          top: 50%;
          right: -37px;
          content: ' ';
          display: block;
          width: 15px;
          height: 15px;
          margin-top: -8px;
          background: $white;
          border-radius: 10px;
          border: 4px solid var(--#{$prefix}primary);
          z-index: 10;
        }

        &::after {
          content: "";
          position: absolute;
          left: 100%;
          top: 50%;
          height: 0;
          width: 0;
          margin-top: -8px;
          border: solid transparent;
          border-left-color: rgb(242, 117, 56);
          border-width: 8px;
          pointer-events: none;
        }
      }

      .xl {
        &::before {
          position: absolute;
          top: 50%;
          right: -42px;
          content: ' ';
          display: block;
          width: 25px;
          height: 25px;
          margin-top: -13px;
          background: $white;
          border-radius: 20px;
          border: 5px solid $primary;
          z-index: 10;
        }
      }
    }

    .direction-r {
      position: relative;
      width: 300px;
      float: right;

      .flag {
        &::before {
          position: absolute;
          top: 50%;
          left: -37px;
          content: ' ';
          display: block;
          width: 15px;
          height: 15px;
          margin-top: -8px;
          background: $white;
          border-radius: 10px;
          border: 4px solid $primary;
          z-index: 10;
        }

        &::after {
          content: "";
          position: absolute;
          right: 100%;
          top: 50%;
          height: 0;
          width: 0;
          margin-top: -8px;
          border: solid transparent;
          border-right-color: rgb(242, 117, 56);
          border-width: 8px;
          pointer-events: none;
        }
      }
    }
  }

  .desc {
    margin: 1em 2em 0 2em;
  }
}


/* ================ Timeline Media Queries ================ */
@media (max-width: 1024px) {
  .timeline {
    width: 100%;

    &::before {
      left: 0;
    }

    li {
      .direction-l {
        float: none;
        width: auto;
        margin-left: 24px;

        .flag {
          &::before {
            left: -31px;
          }

          &::after {
            display: none;
          }
        }

        .xl {
          &::before {
            left: -36px;
          }
        }
      }

      .direction-r {
        float: none;
        width: auto;
        margin-left: 24px;

        .flag {
          &::before {
            left: -31px;
          }

          &::after {
            display: none;
          }
        }
      }
    }
  }
}



.timeline2 {
  margin-left: 18px;

  ul {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: -12px;
      height: 100%;
      border: 1px dashed rgba(var(--#{$prefix}primary-rgb), 0.3);
    }

    .box {
      margin-bottom: 20px;
      padding: 0px 10px;
      position: relative;
      border-radius: 5px;
      box-sizing: border-box;

      &:last-child{
        margin-bottom: 0px;
      }
      @media (max-width: 768px) {
        width: auto;
      }
      >span {
          position: absolute;
          left: -17px;
          top: 5px;
          width: 12px;
          height: 12px;
          border: 2px solid var(--#{$prefix}body-bg);
          background: var(--#{$prefix}primary);
          outline: 1px solid rgba(var(--#{$prefix}primary-rgb), 0.5);
          border-radius: 100%;
        }
      }

      //end span
      .title {
        font-weight: 700;
      }

      .sub-title {
        font-size: 13px;
        color: #aaa;
      }

      .info {
        margin: 12px 0;
      }

      .time {
        span {
          font-size: 10px;
          color: #aaa;

          &:first-child {
            top: -10px;
            left: -70px;
          }

          &:last-child {
            top: 100%;
            left: -70px;
          }
        }
      }
    }
  }

