@import "./variables";

.#{$component-prefix}timeline-item {
  display: flex;
  min-height: $timeline-min-height;
  font-size: $timeline-font-size;

  &--right,
  &--left,
  &--alternate,
  &--alternate-reverse {
    &:last-child {
      .#{$component-prefix}timeline-connector {
        &:last-child {
          display: none;
        }
      }
    }
  }

  &--alternate {
    &:nth-of-type(odd) {
      flex-direction: row-reverse;

      .#{$component-prefix}timeline-content {
        &:first-child {
          justify-content: flex-start;
        }

        &:last-child {
          justify-content: flex-end;
        }
      }
    }
  }

  &--alternate-reverse {
    &:nth-of-type(even) {
      flex-direction: row-reverse;

      .#{$component-prefix}timeline-content {
        &:first-child {
          justify-content: flex-start;
        }

        &:last-child {
          justify-content: flex-end;
        }
      }
    }
  }
}