@import 'variable';
@import '../../styles/mixins';
@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';

$types: success, warning, error, help, notice;

$class-prefix: 'cn-ui-m-notice';

.#{$hashClassName}.#{$class-prefix} {
  @each $type in $types {
    &-#{$type} {
      color: var(--notice-#{$type}-color);
      background-color: var(--notice-#{$type}-bg-color);
      .#{$class-prefix}-left {
        color: var(--notice-#{$type}-icon-color);
      }
    }
  }

  padding: 0 $m-s-12;
  font-size: $m-s-14;
  height: var(--notice-height);
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  .#{$class-prefix} {
    &-left {
      display: flex;
      flex-shrink: 0;
      margin-right: $m-s-6;
      align-items: center;
      line-height: var(--notice-height);
    }

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

      &-inner {
        width: auto;
        transition-timing-function: linear;
        position: absolute;
        white-space: nowrap;
      }
    }

    &-action {
      margin-left: $m-s-12;
      .cn-ui-m-icon-remote {
        font-size: $m-s-12;
      }
    }

    &-right {
      flex-shrink: 0;
      margin-left: $m-s-12;
      &-with-icon {
        margin-left: $m-s-8;
      }
    }

    &-close {
      line-height: 1;
    }
  }

  &-hidden {
    .#{$class-prefix}-content-inner {
      width: 100%;
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}