@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-noticebar-text-color: #de8c17 !default;
$ink-noticebar-bg-color: #fcf6ed !default;
$ink-noticebar-font-size: $ink-font-size-md !default;
$ink-noticebar-icon-size: 32px !default;
$ink-noticebar-line-height: $ink-line-height-md !default;

.ink-noticebar {
  display: flex;
  align-items: center;
  position: relative;
  height: 80px;
  padding: 0 $ink-spacing-sm;
  color: $ink-noticebar-text-color;
  font-size: 0;
  background: $ink-noticebar-bg-color;

  &--wrap {
    padding-top: $ink-spacing-xs;
    padding-bottom: $ink-spacing-xs;
    height: auto;
  }

  &__content {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
    height: 100%;
    overflow: hidden;

    &-inner {
      @include line(1);
      max-width: 100%;
      line-height: $ink-noticebar-line-height;
      word-break: break-all;
      word-wrap: break-word;
      font-size: $ink-noticebar-font-size;

      &--wrap {
        white-space: normal;
      }

      &--marquee {
        overflow: visible;
        max-width: none;
        text-overflow: clip;
      }
    }
  }

  &__left-icon,
  &__right-icon {
    font-size: $ink-noticebar-icon-size;
    line-height: $ink-noticebar-font-size * 1.5;
  }

  &__left-icon {
    padding-right: $ink-spacing-xs;
  }

  &__right {
    padding-left: $ink-spacing-xs;
  }
}