.alert {
  /* padding: 1em; */
  margin: 1em 0;
  border-radius: 4px;
  position: relative;
  display: block;

  /* 确保 alert 样式不会被 blockquote 样式覆盖 */
  &.content blockquote, .content & {
    border-left: 4px solid #0078d4;
    padding: 1em 1.5em 1em 1em;
    margin: 1em 0;
    border-radius: 4px;
  }

  /* 添加标题前的图标和文本 */
  &::before {
    font-weight: bold;
    margin-bottom: 0.5em;
    display: block;
    font-family: "Font Awesome 5 Free", sans-serif;
  }
}

/* 黑夜模式下的基本样式 */
body.night .alert,
body.night .content .alert,
body.night .alert.content blockquote,
body.night .content .alert blockquote {
  background-color: #373d48 !important;
  border-color: #434a56 !important;
}

.alert-note {
  border-color: #0078d4 !important;
  /* background: #f3f6fb !important; */
  &::before {
    content: "\f05a  NOTE";  /* 信息图标 (i)*/
    color: #0078d4;
  }
}

.alert-warning {
  border-color: #e0a800 !important;
  /* background: #fffbe6 !important; */
  &::before {
    content: "\f071  WARNING";
    color: #e0a800;
  }
}

.alert-tip {
  border-color: #28a745 !important;
  /* background: #e6ffed !important; */
  &::before {
    content: "\f0eb  TIP";
    color: #28a745;
  }
}

.alert-important {
  border-color: #d63384 !important;
  /* background: #f3f6fb !important; */
  &::before {
    content: "\f06a  IMPORTANT";
    color: #d63384;
  }
}

.alert-caution {
  border-color: #fd7e14 !important;
  /* background: #fff5e6 !important; */
  &::before {
    content: "\f06d  CAUTION";
    color: #fd7e14;
  }
}

.alert-info {
  border-color: #17a2b8 !important;
  /* background: #e6f7ff !important; */
  &::before {
    content: "\f129  INFO";
    color: #17a2b8
  }
}

.alert-success {
  border-color: #28a745 !important;
  /* background: #e6ffed !important; */
  &::before {
    content: "\f00c  SUCCESS";
    color: #28a745;
  }
}

.alert-error {
  border-color: #dc3545 !important;
  /* background: #ffe6e6 !important; */
  &::before {
    content: "\f00d  ERROR";
    color: #dc3545;
  }
}