@use '../../_styles/variables' as *;
@use "pkg:@ohu-mobile/styles" as *;
@use '../../_styles/mixins' as *;

$noticeBarPrefixClass: #{$prefix}notice-bar;

// @keyframes notice-bar-scroll-animation {
//   0% {
//     transform: translateX(0);
//   }
//   100% {
//     transform: translateX(-100%);
//   }
// }

.#{$noticeBarPrefixClass} {
  box-sizing: border-box;
  position: relative;
  padding: $noticeBarPadding 30px;
  font-size: $noticeBarFontSize;
  &.is-default {
    background: $noticeBarDefaultBackground;
    color: $noticeBarDefaultColor;
  }
  &.is-warning {
    background: $noticeBarWarningBackground;
    color: $noticeBarWarningColor;
  }
  &.has-icon {
    padding-left: $noticeBarPadding + $noticeBarIconSize + 22px;
  }
  &.has-action {
    padding-right: $noticeBarPadding + $noticeBarIconSize + 22px;
  }
  &__icon {
    font-size: 1.4em;
    @include center(y);
    left: $noticeBarPadding;
    width: $noticeBarIconSize;
    height: $noticeBarIconSize;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &__text {
    line-height: 1.43em;
    &.is-wrap div {
      @include text-wrap;
    }
    &.is-inline {
      overflow: hidden;
      div {
        white-space: nowrap;
      }
    }
    div {
      display: inline-block;
    }
  }
  &__action {
    font-size: 1.4em;
    @include center(y);
    right: $noticeBarPadding;
    width: $noticeBarIconSize;
    height: $noticeBarIconSize;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}