@use "../../libs/css/theme" as *;
@use "../../libs/css/mixin" as *;

@include b(warn) {
  position: relative;
  background-color: $hy-primary;
  padding: $hy-border-margin-padding-base;
  @include flex(row);
  align-items: center;
  border-radius: $hy-radius-sm;

  @include e(primary) {

    @include m(dark) {
      background-color: $hy-primary;
    }

    @include m(light) {
      background-color: $hy-primary-light;
      .tips {
        :deep(.hy-icon) {
          color: $hy-primary;
        }
      }
    }

  }

  @include e(error) {

    @include m(dark) {
      background-color: $hy-error;
    }

    @include m(light) {
      background-color: $hy-error-light;
      .tips {
        :deep(.hy-icon) {
          color: $hy-error;
        }
      }
    }
  }

  @include e(success) {
    @include m(dark) {
      background-color: $hy-success;
    }

    @include m(light) {
      background-color: $hy-success-light;
      .tips {
        :deep(.hy-icon) {
          color: $hy-success;
        }
      }
    }
  }

  @include e(warning) {

    @include m(dark) {
      background-color: $hy-warning;
    }

    @include m(light) {
      background-color: $hy-warning-light;
      .tips {
        :deep(.hy-icon) {
          color: $hy-warning;
        }
      }
    }
  }

  @include e(info) {

    @include m(dark) {
      background-color: $hy-info;
    }

    @include m(light) {
      background-color: $hy-info-light;
      .tips {
        :deep(.hy-icon) {
          color: $hy-info;
        }
      }
    }
  }

  @include e(icon) {
    margin-right: $hy-border-margin-padding-sm;
  }

  @include e(content) {
    @include flex(column);
    flex: 1;

    @include m(title) {
      font-size: 14px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 2px;
    }

    @include m(desc) {
      font-size: 14px;
      flex-wrap: wrap;
      color: #fff;
    }
  }

  @include e(text) {

    @include m(primary__light) {
      color: $hy-primary;
    }

    @include m(success__light) {
      color: $hy-success;
    }

    @include m(warning__light) {
      color: $hy-warning;
    }

    @include m(error__light) {
      color: $hy-error;
    }

    @include m(info__light) {
      color: $hy-info;
    }
  }

  @include e(close) {
    position: absolute;
    top: 11px;
    right: 10px;
  }
}