@import '../../style/index';

@T: 16s;
@DT: 8s;

.szfe-reminder-bar__reminder-bar {
  padding: 8px * @size-scale 12px * @size-scale;
  min-height: 32px * @size-scale;
  width: 360px * @size-scale;
  overflow: hidden;
  display: flex;
  align-items: center;

  background: #fff2e5;
  color: #e48f6e;

  &--scrollable {
    position: relative;

    // 悬停时暂停动画
    &:hover {
      .szfe-reminder-bar__content {
        animation-play-state: paused;
      }
    }
  }
}

.szfe-reminder-bar__txt {
  text-overflow: ellipsis;
  font-size: 12px * @size-scale;
  line-height: 16px * @size-scale;
}
.szfe-reminder-bar__content {
  .szfe-reminder-bar__txt();
  position: absolute;
  left: 100%;
  top: 50%;
  padding-left: 0;
  white-space: nowrap;
  animation: szfe-reminder-bar__move @T linear infinite;

  &:last-child {
    animation: szfe-reminder-bar__move @T linear @DT infinite;
  }
}

@keyframes szfe-reminder-bar__move {
  from {
    transform: translate(0%, -50%);
  }
  to {
    transform: translate(-250%, -50%);
  }
}