@import (reference) './variable.less';

@noticeBarPrefix: ant-notice-bar;

.@{noticeBarPrefix} {
  position: relative;
  display: flex;
  height: 75 * @rpx;
  align-items: center;
  overflow: hidden;
  padding: @v-spacing-standard @h-spacing-large;
  font-size: @notice-font-size;
  color: @notice-color;
  background-color: @notice-background-color;
  box-sizing: border-box;
  &.@{noticeBarPrefix}-no-height {
    height: unset;
    align-items: flex-start;
  }

  &-error {
    color: @notice-error-color;
    background-color: @notice-error-background-color;

    &-scroll-left,
    &-scroll-right {
      background: @notice-error-background-color;
    }
  }

  &-primary {
    color: @notice-primary-color;
    background-color: @notice-primary-background-color;

    &-scroll-left,
    &-scroll-right {
      background: @notice-primary-background-color;
    }
  }

  &-info {
    color: @notice-info-text-color;
    background: @notice-info-background-color;

    &-scroll-left,
    &-scroll-right {
      background: @notice-info-background-color;
    }
  }

  &-icon {
    margin-right: @h-spacing-standard;
    font-size: 36 * @rpx;

    &-image-image {
      width: 36 * @rpx;
      height: 36 * @rpx;
    }
  }

  &-content {
    position: relative;
    z-index: 2;
    flex: 1 100%;
    overflow: hidden;
    vertical-align: middle;
    line-height: @default-line-height;
  }

  &-marquee {
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  &-ellipsis {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }

  &-operation {
    display: flex;
    align-items: center;

    &-icon {
      margin-left: 24 * @rpx;
    }
  }
}

.ant-icon-size-x-small {
  font-size: 18px;
}