$name: 'ivue-notice-bar';

:root {
  --#{$name}-height: 40px;
  --#{$name}-font-size: 14px;
  --#{$name}-line-height: 24px;

  // margin
  --#{$name}-icon-margin: 0 5px;

  // wrapable
  --#{$name}-wrapable-padding: 8px 16px;
}

.#{$name} {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--#{$name}-height);
  font-size: var(--#{$name}-font-size);
  line-height: var(--#{$name}-line-height);
  background: var(--ivue-primary-color);
  color: var(--ivue-white-color);

  &-left,
  &-right {
    height: 100%;
    display: flex;
    align-items: center;
  }

  &-right {
    .#{$name}-icon {
      cursor: pointer;
    }
  }

  // icon
  .#{$name}-icon {
    color: currentColor;
    height: auto;
    min-width: auto;
    width: auto;
    font-size: 18px;
    margin: var(--#{$name}-icon-margin);
  }

  // text
  &-text {
    position: absolute;
    white-space: nowrap;
    transition-timing-function: linear;

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

    &--ellipsis {
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  // 换行
  &-wrapable {
    height: auto;
    padding: var(--#{$name}-wrapable-padding);

    .#{$name}-text {
      position: relative;
      white-space: normal;
      word-wrap: break-word;
    }

    .#{$name}-text--wrapper {
      height: auto;
    }
  }
}