/* === Timeline iOS === */
.ios {
  @import (multiple) '../../less/colors-ios.less';
  @import (multiple) '../../less/vars-ios.less';
  .timeline {
    margin: 35px 0;
    padding: 0 15px;
  }
  .block-strong .timeline {
    padding: 0;
    margin: 0;
  }
  .timeline-item {
    padding: 2px 0px 15px;
    &:last-child {
      padding-bottom: 2px;
    }
  }
  .timeline-item-content {
    .card, .list, .block {
      + .card, + .list, + .block {
        margin: 15px 0 0;
      }
    }
    .card, &.card, .list, &.list, .block, &.block {
      margin: 0 !important;
      width: 100%;
    }
  }
  .timeline-item-inner {
    border-radius: 7px;
    padding: 8px 15px;
    + .timeline-item-inner {
      margin-top: 15px;
    }
  }
  .block-strong .timeline-item-inner {
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
  }
  .timeline-item-divider {
    margin-left: 15px;
    margin-right: 15px;
  }
  .timeline-item-time {
    margin-top: 15px;
    color: #6d6d72;
    &:first-child, &:last-child {
      margin-top: 0;
    }
  }
  .timeline-item-title {
    font-size: 17px;
    font-weight: 600;
  }
  .timeline-item-subtitle {
    font-size: 15px;
  }
  .timelineItemLeft() {
    flex-direction: row-reverse;
    .ltr({
      margin-right: ~"calc(50% - (30px + 10px) / 2 - 50px)";
      margin-left: 0;
      .timeline-item-date {
        text-align: left;
      }
    });
    .rtl({
      margin-left: ~"calc(50% - (30px + 10px) / 2 - 50px)";
      margin-right: 0;
      .timeline-item-date {
        text-align: right;
      }
    });
  }
  .timelineItemRight() {
    .ltr({
      margin-left: ~"calc(50% - (30px + 10px) / 2 - 50px)";
      margin-right: 0;
      .timeline-item-date {
        text-align: right;
      }
    });
    .rtl({
      margin-right: ~"calc(50% - (30px + 10px) / 2 - 50px)";
      margin-left: 0;
      .timeline-item-date {
        text-align: left;
      }
    });
  }
  .timeline-sides {
    .timeline-item {
      .timelineItemRight();
      &:not(.timeline-item-right):nth-child(2n) {
        .timelineItemLeft();
      }
    }
    .timeline-item-left {
      .timelineItemLeft()
    }
    .timeline-item-right {
      .timelineItemRight();
    }
  }
  @media (min-width:768px) {
    .tablet-sides {
      .timeline-sides;
    }
  }
  .timeline-horizontal {
    padding: 0;
    margin: 0;
    .timeline-item {
      padding-top: 34px !important;
      padding-bottom: 10px;
    }
    > .timeline-item:last-child,
    .timeline-month:last-child .timeline-item:last-child {
      .hairline-remove(right);
    }
    .timeline-item-date {
      background: @barsBg;
      padding: 0px 10px;
    }
    .timeline-item-content {
      padding: 10px;
      height: ~"calc(100% - 10px)";
    }
  }
  .hairline-root('.timeline-horizontal .timeline-item-date', bottom, @barsBorderColor);
  .hairline-root('.timeline-horizontal .timeline-month .timeline-item', top, @barsBorderColor);
  .hairline-root('.timeline-horizontal .timeline-item', right, @barsBorderColor);
  .hairline-root('.timeline-horizontal .timeline-year', right, @barsBorderColor);
  .timeline-year {
    &:last-child {
      .hairline-remove(right);
    }
  }
  .timeline-year-title, .timeline-month-title {
    padding: 0 10px;
    background: @barsBg;
    span {
      .ltr({
        left: 10px;
      });
      .rtl({
        right: 10px;
      });
    }
  }
  .timeline-year-title {
    span {
      margin-top: 3px;
    }
  }

  .safe-areas({
    .safe-area-left({
      .timeline-horizontal:not(.no-ios-edges):not(.no-ios-left-edge) {
        padding-left: constant(safe-area-inset-left);
        padding-left: env(safe-area-inset-left);
        .timeline-year-title,
        .timeline-month-title {
          span {
            left: ~"calc(10px + constant(safe-area-inset-left))";;
          }
        }

        .timeline-year:first-child .timeline-year-title,
        .timeline-year:first-child .timeline-month:first-child .timeline-month-title,
        .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title {
          left: -44px;
          right: 0;
          width: auto;
        }
        > .timeline-item:first-child,
        .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,
        .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child,
        .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item {
          overflow: visible;
          .timeline-item-date {
            width: auto;
            padding-left: ~"calc(10px + constant(safe-area-inset-left))";
            padding-left: ~"calc(10px + env(safe-area-inset-left))";
            left: ~"calc(0px - constant(safe-area-inset-left))";
            left: ~"calc(0px - env(safe-area-inset-left))";
            right: 0;
          }
        }
      }
      .timeline:not(.no-ios-edges):not(.no-ios-left-edge):not(.timeline-horizontal) {
        padding-left: ~"calc(15px + constant(safe-area-inset-left))";
        padding-left: ~"calc(15px + env(safe-area-inset-left))";
      }
    });
    .safe-area-right({
      .timeline-horizontal:not(.no-ios-edges):not(.no-ios-right-edge) {
        .timeline-year:last-child .timeline-year-title,
        .timeline-year:last-child .timeline-month:last-child .timeline-month-title {
          width: auto;
          right: ~"calc(0px - constant(safe-area-inset-right))";
          right: ~"calc(0px - env(safe-area-inset-right))";
        }
        > .timeline-item:last-child,
        .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child {
          overflow: visible;
          .timeline-item-date {
            width: auto;
            right: ~"calc(0px - constant(safe-area-inset-right))";
            right: ~"calc(0px - env(safe-area-inset-right))";
            left: 0;
          }
        }
      }
      .timeline:not(.no-ios-edges):not(.no-ios-right-edge):not(.timeline-horizontal) {
        padding-right: ~"calc(15px + constant(safe-area-inset-right))";
        padding-right: ~"calc(15px + env(safe-area-inset-right))";
      }
    });
  });

  // Dark Theme
  & when (@includeDarkTheme) {
    .theme-dark {
      .timeline-year-title, .timeline-month-title {
        background: @barsBgDark;
      }
      .timeline-item-inner {
        background-color: @blockBgDark;
      }
      .timeline-item-time {
        color: #8E8E93;
      }
      .timeline-horizontal, .timeline-horizontal& {
        .timeline-item-date {
          background: @barsBgDark;
          .hairline-color(bottom, @barsBorderColorDark);
        }
        .timeline-month .timeline-item {
          .hairline-color(top, @barsBorderColorDark);
        }
        .timeline-item {
          .hairline-color(right, @barsBorderColorDark);
        }
        .timeline-year {
          .hairline-color(right, @barsBorderColorDark);
        }
      }
    }
  }
}