@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;
@use "../common/var.scss" as *;

@include b(timeline) {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  @include when(reverse) {
    flex-direction: column-reverse;
  }
  @include within-bm(timeline, alternate) {
    @include be(timeline, item) {
      @include be(timeline, opposite) {
        text-align: right;
      }
      @include be(timeline, content) {
        text-align: left;
      }
      &:nth-child(2n) {
        flex-direction: row-reverse;
        @include be(timeline, opposite) {
          text-align: left;
        }
        @include be(timeline, content) {
          text-align: right;
        }
      }
    }
  }
  @include m(left) {
    @include be(timeline, opposite) {
      text-align: right;
    }
    @include be(timeline, content) {
      text-align: left;
    }
  }
  @include m(right) {
    @include be(timeline, item) {
      flex-direction: row-reverse;
    }
    @include be(timeline, opposite) {
      text-align: left;
    }
    @include be(timeline, content) {
      text-align: right;
    }
  }
  @include m(default) {
    @include be(timeline, dot-content) {
      background: getCssVar("color", "fill-3");
    }
  }
  @each $type in $type-list {
    @include m(#{$type}) {
      @include be(timeline, dot-content) {
        background: getCssVar("color", #{$type}-6);
      }
    }
  }
  @include e(item) {
    position: relative;
    min-height: 78px;
    color: getCssVar("color", "text-1");
    font-size: 14px;
    line-height: 1.5715;
    display: flex;
    &:last-child {
      min-height: 0;
    }
  }
  @include e(opposite) {
    flex: 1;
    padding: 0 12px;
  }
  @include e(separator) {
    flex: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  @include e(dot) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    align-self: baseline;
    width: 22px;
    height: 22px;
  }
  @include e(dot-content) {
    height: 8px;
    width: 8px;
    border-radius: getCssVar("radius", "medium");
  }
  @include e(line) {
    flex-grow: 1;
    width: 2px;
    background: getCssVar("color", "fill-3");
  }
  @include e(content) {
    flex: 1;
    padding: 0 12px;
  }
  @include e(time) {
    font-size: 12px;
    color: getCssVar("color", "text-2");
  }
}