@import "./../variable.scss";
.hx-marquee {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  // border: 1px solid red;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  .item-marquee {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    @include nowrap;
    width: 100%;
    transition: transform 1s;
    &.hide {
      visibility: hidden;
    }
  }
  &.column {
    .item-marquee {
      transform: translateY(0);
      &.next { 
        transform: translateY(100%);
      }
      &.last {
        transform: translateY(-100%);
      }
    }
  }
  &.row {
    .item-marquee {
      &.current { 
        transform: translateX(0);
      }
      &.next { 
        transform: translateX(-120%);
      }
      &.last {
        transform: translateX(120%);
      }
    }
  }
}