@import '../../style/themes/default.less';

.bee-spin-container {
  position: relative;
  width: 90px;
}

.bee-spin-wrap {
  position: absolute;
  width: 120px;
  .bee-spin-before-liner {
    position: absolute;
    left: -5px;
    z-index: 40;
    width: 10px;
    height: 54px;
    background-image: linear-gradient(
      to right,
      #fff 0%,
      #fff 50%,
      transparent 100%
    );
  }
  .bee-spin-after-liner {
    position: absolute;
    right: -5px;
    z-index: 40;
    width: 10px;
    height: 54px;
    background-image: linear-gradient(
      to left,
      #fff 0%,
      #fff 50%,
      transparent 100%
    );
  }
}

.bee-spin-banner {
  position: absolute;
  overflow: hidden;
  width: 120px;
  height: 54px;
  .bee-spin-planner {
    display: flex;
    width: 240px;
    animation: move 2.5s linear infinite;
    img {
      width: 120px;
    }
  }
}

.bee-spin-canvas {
  position: absolute;
  height: 95px;
}

@keyframes move {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-120px);
  }
}