@import "../style/var";
.vm-notice-bar {
  display: flex;
  height: 36px;
  align-items: center;
  font-size: 14px;
  line-height: 36px;
  color: @orange-dark;
  background-color: @orange-light;
  overflow: hidden;

  &-left-icon {
    font-size: 18px;
    margin-left: 15px;
    display: flex;
    align-items: center;
    & + div {
      margin-left: 5px;
    }
  }

  &-right-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    padding-right: 8px;
  }

  &-wrap {
    flex: 1;
    width: 100%;
    height: 36px;
    margin: auto 15px;
    overflow: hidden;
    position: relative;
  }
  &-content {
    position: absolute;
    white-space: nowrap;

    &.vm-ellipsis {
      max-width: 100%;
    }
  }
  &-play {
    animation: vm-notice-bar-play linear infinite both;
  }
  //&-stopplay {
  //  transform: translate3d(-100%, 0, 0);
  //  animation-play-state: paused;
  //}
  //&-replay {
  //  animation-play-state: running;
  //}

}

@keyframes vm-notice-bar-play {
  to { transform: translate3d(-100%, 0, 0); }
}