@import './../mixins/reset.scss';

$amosText: amos-text;

$textPrefixCls: #{$amosText}-scroll;
$overflowTextPrefixCls: #{$amosText}-overflow;

.#{$textPrefixCls} {
  @include reset-component2;

  width: 100%;
  height: 100%;
  overflow: hidden;
  word-break: keep-all;
  white-space: nowrap;

  &-container {
    position: relative;
    animation: changebox 1s linear infinite;
    animation-play-state: running;
    animation-fill-mode: forwards;

    &:hover {
      cursor: default;
      animation-play-state: paused;
    }

    .#{$textPrefixCls}-span {
      display: inline-block;
      margin-right: 10em;
    }
  }
}

.#{$textPrefixCls}.vertical {
  display: flex;
  align-content: flex-start;
  align-items: center;
  height: 40px;
  border-bottom: 1px solid #eee;

  &-container {
    width: 100%;
    overflow: hidden;
    cursor: default;

    .#{$textPrefixCls}-list {
      position: relative;
      width: 100%;
      height: 3em;
      padding: 0;
      margin: 0;

      .#{$textPrefixCls}-item {
        display: block;
        padding: 0 0.5em;
        overflow: hidden;
        line-height: 3em;
        color: rgba(0, 0, 0, 0.85);
        text-overflow: ellipsis;
        white-space: nowrap;
        list-style-type: none;
      }
    }
  }
}

@keyframes changebox {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-500px);
  }
}

// animate
@keyframes textShadowAnim {
  0% { text-shadow: 0 0 1px #3429e1; }
  20% { text-shadow: 0 0 3px #3429e1; }
  50% { text-shadow: 0 0 5px #3429e1; }
  100% { text-shadow: 0 0 8px #3429e1; }
}

// overflow text
.#{$overflowTextPrefixCls} {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}