//
// RTL: Pages / Timeline
//
// --------------------------------------------------


// ************************************************************************* //
//**   Small screens (mobile first)                                        **//

$tl-left-mobile: 30px; // Do not forget to change value for RTL-mode
$tl-left: 100px; // Do not forget to change value for RTL-mode
$tl-header-width: 140px; // Do not forget to change value for RTL-mode

// Timeline
//

.timeline {

  &:before,
  &:after {
    left: auto;
    right: $tl-left-mobile;
  }

  &:before {
    margin-left: 0;
    margin-right: -2px;
  }

  &:after {
    margin-left: 0;
    margin-right: -6px;
  }
}


// Header
//

.tl-header {
  left: auto;
  right: 0;
  margin-left: 0;
}

// Entry
//

.tl-entry {
  margin-left: 0;
  margin-right: $tl-left-mobile;
  padding-left: 0;
  padding-right: 36px;

  &:before {
    left: auto;
    right: -3px;
  }
}


// Body
//

.tl-body {
  &:before {
    border-width: 8px 0 8px 9px;
    left: auto;
    right: -9px;
  }

  &:after {
    border-width: 7px 0 7px 8px;
    border-color: transparent transparent transparent #fff;
    left: auto;
    right: -8px;
  }
}


// Date/Time
//

.tl-time {
  text-align: left;
}


// Icon
//

.tl-icon {
  left: auto;
  right: -20px;
}


// ************************************************************************* //
//**   Desktops                                                            **//

@media (min-width: $screen-tablet) {
  
  // Default timeline
  //

  .timeline:before,
  .timeline:after {
    left: auto;
    right: $tl-left;
  }
  .tl-header {
    left: auto;
    right: $tl-left;
    margin-left: 0;
    margin-right: -1 * ceil($tl-header-width / 2);
  }
  .tl-entry {
    margin-left: 0;
    margin-right: $tl-left;
  }
  .tl-time {
    left: 100%;
    right: auto;
    margin-left: 32px;
    margin-right: 0;
  }


  // Centered timeline
  //

  .timeline.centered {
    &:before,
    &:after {
      left: auto;
      right: 50%;
    }
    .tl-header {
      left: auto;
      right: 50%;
    }
    .tl-entry {
      margin-left: 0;
      margin-right: 50%;
    }
    .tl-entry.left {
      margin-left: 50%;
      margin-right: 0;
      padding-left: 36px;
      padding-right: 0;
    }

    .tl-entry.left:before {
      left: -3px;
      right: auto;
    }
    .tl-entry.left .tl-body:before {
      border-width: 8px 9px 8px 0;
      left: -9px;
      right: auto;
    }
    .tl-entry.left .tl-body:after {
      border-width: 7px 8px 7px 0;
      border-color: transparent #fff transparent transparent;
      left: -8px;
      right: auto;
    }
    .tl-entry.left .tl-time {
      left: auto;
      right: 100%;
      margin-left: 0;
      margin-right: 32px;
    }
    .tl-entry.left .tl-icon {
      left: -20px;
      right: auto;
    }
  }
}