@import '../../common/style/common.less';
.hanzo-notice-bar {
    display: flex;
    height: 40px;
    padding: 0 15px;
    font-size: 14px;
    line-height: 24px;
    position: relative;
    align-items: center;
    color: @orange-dark;
    background-color: @orange-light;
  
    &__left-icon,
    &__right-icon {
      font-size: 16px;
      min-width: 22px;
    }
  
    &__right-icon {
      text-align: right;
    }
  
    &__wrap {
      flex: 1;
      height: 24px;
      overflow: hidden;
      position: relative;
    }
  
    &__content {
      position: absolute;
      white-space: nowrap;
  
      &.hanzo-ellipsis {
        max-width: 100%;
      }
    }
  
    &__play {
      animation: hanzo-notice-bar-play linear both;
  
      &--infinite {
        animation: hanzo-notice-bar-play-infinite linear infinite both;
      }
    }
  
    &--wrapable {
      height: auto;
      padding: 8px 15px;
  
      .hanzo-notice-bar {
        &__wrap {
          height: auto;
        }
  
        &__content {
          position: relative;
          white-space: normal;
        }
      }
    }
  }
  
  /**
   * Declare two same keyframes
   * In case that some mobile browsers can continue animation when className changed
   */
  @keyframes hanzo-notice-bar-play {
    to { transform: translate3d(-100%, 0, 0); }
  }
  
  @keyframes hanzo-notice-bar-play-infinite {
    to { transform: translate3d(-100%, 0, 0); }
  }