@import '../common/abstracts/variable';
@import '../common/abstracts/mixin';

@include b(notice-bar) {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: $-notice-bar-padding;
  font-size: $-notice-bar-fs;
  border-radius: $-notice-bar-border-radius;
  @include when(warning) {
    color: $-notice-bar-warning-color;
    background: $-notice-bar-warning-bg;
  }
  @include when(info) {
    color: $-notice-bar-info-color;
    background: $-notice-bar-info-bg;
  }
  @include when(danger) {
    color: $-notice-bar-danger-color;
    background: $-notice-bar-danger-bg;
  }
  @include edeep(prefix) {
    padding-right: 4px;
    font-size: $-notice-bar-prefix-size;
  }

  @include edeep(suffix) {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    padding: 0;
    font-size: $-notice-bar-close-size;
    color: $-notice-bar-close-color;
    text-align: center;
    background-color: $-notice-bar-close-bg;
    border-radius: 0px 8px 0px 4px;
  }
  @include e(wrap) {
    position: relative;
    flex: 1;
    height: $-notice-bar-line-height;
    overflow: hidden;
    line-height: $-notice-bar-line-height;
  }
  @include e(content) {
    position: absolute;
    white-space: nowrap;

    @include m(play) {
      animation: notice-bar-play linear both;
    }
    @include m(play-infinite) {
      animation: notice-bar-play-infinite linear infinite both;
    }
  }
  @include m(ellipse) {
    .wd-notice-bar__content {
      position: static;
      @include lineEllipsis;
    }
  }
  @include m(wrap) {
    .wd-notice-bar__wrap {
      height: auto;
    }
    .wd-notice-bar__content {
      position: static;
      white-space: normal;
    }
  }
}

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

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