@import 'common/var.scss';

@mixin qf-tip($color, $background, $border-color) {
  color: $color;
  font-size: 14px;
  position: relative;
  border-radius: 4px;
  background: $background;
  border: 1px solid $border-color;
  padding: 9px 11px;
  line-height: initial;

  .qf-tip-title {
    display: flex;
    align-items: center;

    .qf-tip-msg {
      flex: 1;
    }

    .qf-tip-close {
      position: absolute;
      right: 12px;
      top: 12px;
      width: 16px;
      height: 16px;
      line-height: 16px;
      font-size: 14px;
      margin-right: 0;
      cursor: pointer;
      color: $--color-font-light-2;

      &:hover {
        color: $--color-primary;
      }
    }

    &.is-bold .qf-tip-msg {
      font-weight: bold;
    }
  }

  .qf-tip-description {
    margin: 0 16px 0 28px;
  }

  .qf-icon {
    font-size: 16px;
    color: $color;
    margin-right: 12px;
  }
}

.qf-tip-warning {
  @include qf-tip($--color-warning, $--color-warning-bg, $--color-warning-border)
}

.qf-tip-success {
  @include qf-tip($--color-success, $--color-success-bg, $--color-success-border)
}

.qf-tip-danger {
  @include qf-tip($--color-error, $--color-error-bg, $--color-error-border)
}

.qf-tip-info {
  @include qf-tip($--color-info, $--color-info-bg, $--color-info-border)
}