@import '../style/mixins/libs/line.scss';
@import '../style/variables/default.scss';
@import '../styles/theme.scss';

$noticebar-color-bg: #fcf6ed;
$noticebar-color-font: #de8c17;
$noticebar-icon-size: 26px;

.rm-noticebar {
  position: relative;
  padding: #{$spacingUnit}px 0px;
  font-size: 0;

  &.colorPrimary {
    color: $palettePrimaryContrastText;
    background: $palettePrimaryMain;
  }
  &.colorSecondary {
    color: $paletteSecondaryContrastText;
    background: $paletteSecondaryMain;
  }
  &.colorAction {
    color: $paletteActionActive;
    background: $paletteActionDisabledBackground;
    .rm-noticebar__more {
      color: $paletteTextHint;
    }
  }
  &.colorError {
    color: $paletteErrorContrastText;
    background: $paletteErrorMain;
  }
  &.colorDisabled {
    color: $paletteActionDisabled;
    background: $paletteActionDisabledBackground;
    .rm-noticebar__more {
      color: $paletteActionDisabled;
    }
  }
  &.colorSuccess {
    color: $paletteSuccessContrastText;
    background: $paletteSuccessMain;
  }
  &.colorWarning {
    color: $paletteWarningContrastText;
    background: $paletteWarningMain;
  }
  &.colorProgress {
    color: $paletteProgressContrastText;
    background: $paletteProgressMain;
  }
  &.colorDefault {
    color: $paletteTextPrimary;
    background: $paletteBackgroundPaper;

    .rm-noticebar__more {
      color: $paletteTextSecondary;
    }
  }
  &.colorInherit {
    color: inherit;
    background: inherit;

    .rm-noticebar__more {
      color: $paletteTextSecondary;
    }
  }

  &__content {
    flex: 1;
    word-break: break-all;
    word-wrap: break-word;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;

    &-icon {
      display: inline-block;
      // margin-right: #{$spacingUnit}px;
      vertical-align: top;
    }

    &-text {
      display: inline;
      font-size: $font-size-sm;
      flex: 1;
    }

    &-inner {
      display: inline;
    }
  }

  // &__close {
  //   width: $noticebar-icon-size;
  //   height: $noticebar-icon-size;
  //   position: absolute;
  //   left: $spacing-h-lg;
  //   top: 50%;
  //   margin-top: -($noticebar-icon-size / 2 + 4);

  //   + .rm-noticebar__content {
  //     margin-left: 50px;
  //   }
  // }

  &--marquee {
    &.rm-noticebar--single {
      .rm-noticebar__content-text {
        height: 36px;
        line-height: 36px;

        .rm-noticebar__content-inner {
          &.vertical {
            // padding-top: 36px;
          }
        }
      }
    }
    .rm-noticebar__content-text {
      height: #{36 * 2}px;
      line-height: 36px;
      overflow: hidden;
      display: block;

      .rm-noticebar__content-inner {
        &.vertical {
          // padding-top: #{36 * 2}px;
        }
      }
    }

    // .rm-noticebar__content-icon {
    //   position: absolute;

    //   + .rm-noticebar__content-text {
    //     margin-left: 45px;
    //   }
    // }

    .rm-noticebar__content-inner {
      display: inline-block;
      // animation: marquee 1s linear infinite both;
      transform: translateZ(0);
      padding-left: 100%;
      white-space: nowrap;
      // height: 36px;

      &.vertical {
        white-space: normal;
        padding-left: 0;
        // animation: marquee2 1s linear infinite both;
      }
    }
  }

  &--single {
    &.rm-noticebar--more {
      .rm-noticebar__content-text {
        // display: inline-block;
        // max-width: 525px;
        @include line(1);
      }

      // .rm-noticebar__content-icon + .rm-noticebar__content-text {
      //   max-width: 475px;
      // }
    }
  }

  // &--more {
  //   .rm-noticebar__content {
  //     max-width: 525px;
  //   }
  // }

  &--weapp {
    .rm-noticebar__content-inner {
      animation: none;
    }
  }

  &__more {
    // position: absolute;
    // right: $spacing-h-lg;
    // top: $spacing-v-sm;
    // margin-left: #{$spacingUnit * 2}px;
    color: $paletteTextSecondary2;
    font-size: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    .text {
      font-size: $font-size-sm;
      line-height: $line-height-zh;
      vertical-align: middle;
    }

    .unread {
      width: #{$spacingUnit * 3}px;
      height: #{$spacingUnit * 3}px;
      margin: #{$spacingUnit}px;
      background: $paletteErrorMain;
      border-radius: 50%;
    }

    &-icon {
      display: inline-block;
      vertical-align: middle;
      overflow: hidden;
    }
  }
}

@keyframes marquee {
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes marquee2 {
  100% {
    transform: translate3d(0, -100%, 0);
  }
}