$orange: #f60;
.#{$notice-bar-prefix-cls} {
  display: flex;
  color: $orange;
  padding: .18rem .48rem .18rem .32rem;
  font-size: .24rem;
  position: relative;
  background-color: #fff7cc;

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

  &__left-icon {
    margin-right: .16rem;
    align-items: center;
    display: flex;
    width: .4rem;
    height: .4rem;
    box-sizing: border-box;
    font-size: .26rem;
    justify-content: center;
  }

  &__right-icon {
    align-items: center;
    display: flex;
    width: .4rem;
    height: .4rem;
    box-sizing: border-box;
    justify-content: center;
    margin-left: .16rem;
    margin-right: -0.16rem;
    &.tips{
      width: auto;
      color: #1B1F25;
      font-size: 0.28rem;
      padding-top: 0.05rem;
      opacity:0.45
    }
  }

  &__wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    padding-top: 0.05rem;
    font-size: 0.28rem
  }

  &__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) }
}
