.#{$notice-bar-prefix-cls} {
  display: flex;
  color: $gray-10;
  padding: .18rem .6rem .18rem .2rem;
  font-size: .32rem;
  position: relative;
  background-color: #e7f3ff;
  border: .02rem solid rgba($brand-primary, .2);
  border-radius: .08rem;

  &--withicon {
    position: relative;
    padding-right: .76rem;
  }

  &__left-icon {
    padding-right: .15rem;
    box-sizing: border-box;
    font-size: .42rem;
    color: $brand-primary;
  }

  &__right-icon {
    top: 50%;
    right: .2rem;
    position: absolute;
    line-height: 1;
    transform: translateY(-50%);
  }

  &__wrap {
    display: flex;
    align-items: center;
    flex: 1;
    overflow: hidden;
    position: relative;
  }

  &__content {
    position: absolute;
    white-space: nowrap;
  }

  &__play {
    animation: van-notice-bar-play linear both;
  }

  &__play--infinite {
    animation: van-notice-bar-play-infinite linear infinite both;
  }
}

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