/**
 * Alert 弹窗组件样式
 * ---------------------------------------------
 * 仿Element UI风格的Alert弹窗组件
 * 支持类型：success、warning、error、info
 * 功能：显示警告信息、可关闭、带图标、带动画
 * 
 * @author WDWeb Team
 * @version 1.0
 */

/* ========================================
   Alert 容器样式
   ======================================== */

/**
 * .alert-box 弹窗容器
 * position: fixed - 固定定位
 * top: 20px - 距离顶部20px
 * left: 50% - 左侧50%
 * transform: translateX(-50%) - 水平居中
 * z-index: 9999 - 最高层级
 * display: flex - 弹性布局
 * flex-direction: column - 垂直排列
 * gap: 12px - 弹窗间距
 */
.alert-box {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ========================================
   Alert 弹窗主体样式
   ======================================== */

/**
 * .alert 弹窗主体
 * width: 400px - 固定宽度
 * padding: 12px 16px - 内边距
 * border-radius: 4px - 圆角（Element UI默认4px）
 * border: 1px solid #ebeef5 - 浅灰色边框
 * background-color: #fff - 白色背景
 * display: flex - 弹性布局
 * align-items: flex-start - 顶部对齐
 * opacity: 0 - 默认透明（动画初始状态）
 * animation - 进入动画
 * transition - 过渡效果
 */
.alert {
  width: 400px;
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  animation: alertSlideIn 0.3s ease-out;
  transition: all 0.3s ease;
}

/**
 * .alert.show 显示状态
 * opacity: 1 - 完全显示
 */
.alert.show {
  opacity: 1;
}

/**
 * .alert.hide 隐藏状态（离开动画）
 * opacity: 0 - 透明
 * transform - 向上偏移
 */
.alert.hide {
  opacity: 0;
  transform: translateY(-20px);
}

/* ========================================
   Alert 进入动画
   ======================================== */

/**
 * @keyframes alertSlideIn 进入动画
 * 从上方滑入，同时渐变显示
 */
@keyframes alertSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   Alert 离开动画
   ======================================== */

/**
 * @keyframes alertSlideOut 离开动画
 * 向上滑出，同时渐变隐藏
 */
@keyframes alertSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* ========================================
   Alert 图标样式
   ======================================== */

/**
 * .alert-icon 图标容器
  * display: flex - 弹性布局
 * align-items: center - 垂直居中
 * margin-right: 12px - 右侧间距
 * font-size: 16px - 图标字号
 */
.alert-icon {
  display: flex;
  align-items: center;
  margin-right: 12px;
  font-size: 16px;
}

/* ========================================
   Alert 内容样式
   ======================================== */

/**
 * .alert-content 内容容器
 * flex: 1 - 占据剩余空间
 */
.alert-content {
  flex: 1;
}

/**
 * .alert-title 标题
 * font-size: 14px - 标题字号
 * font-weight: bold - 粗体
 * margin-bottom: 4px - 底部间距
 * line-height: 1.5 - 行高
 */
.alert-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
  line-height: 1.5;
}

/**
 * .alert-description 描述文字
 * font-size: 13px - 描述字号
 * line-height: 1.5 - 行高
 * color: #606266 - 灰色文字
 */
.alert-description {
  font-size: 13px;
  line-height: 1.5;
  color: #606266;
}

/* ========================================
   Alert 关闭按钮样式
   ======================================== */

/**
 * .alert-close 关闭按钮
 * cursor: pointer - 手型光标
 * color: #909399 - 灰色
 * font-size: 14px - 字号
  * margin-left: 12px - 左侧间距
 * padding: 0 - 无内边距
 * background: none - 无背景
 * border: none - 无边框
 * transition - 过渡效果
 */
.alert-close {
  cursor: pointer;
  color: #909399;
  font-size: 14px;
  margin-left: 12px;
  padding: 0;
  background: none;
  border: none;
  transition: color 0.3s ease;
}

/**
 * .alert-close:hover 关闭按钮悬停
 * color: #409eff - 蓝色
 */
.alert-close:hover {
  color: #409eff;
}

/* ========================================
   Alert 成功类型样式
   ======================================== */

/**
 * .alert.success 成功类型
 * background-color: #f0f9eb - 浅绿色背景
 * border-color: #e1f3d8 - 浅绿色边框
 */
.alert.success {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
}

/**
 * .alert.success .alert-icon, .alert-title 成功图标和标题颜色
 * color: #67c23a - 绿色
 */
.alert.success .alert-icon,
.alert.success .alert-title {
  color: #67c23a;
}

/* ========================================
   Alert 警告类型样式
 * ======================================== */

/**
 * .alert.warning 警告类型
 * background-color: #fdf6ec - 浅橙色背景
 * border-color: #faecd8 - 浅橙色边框
 */
.alert.warning {
  background-color: #fdf6ec;
  border-color: #faecd8;
}

/**
 * .alert.warning .alert-icon, .alert-title 警告图标和标题颜色
 * color: #e6a23c - 橙色
 */
.alert.warning .alert-icon,
.alert.warning .alert-title {
  color: #e6a23c;
}

/* ========================================
   Alert 错误类型样式
 * ======================================== */

/**
 * .alert.error 错误类型
 * background-color: #fef0f0 - 浅红色背景
 * border-color: #fde2e2 - 浅红色边框
 */
.alert.error {
  background-color: #fef0f0;
  border-color: #fde2e2;
}

/**
 * .alert.error .alert-icon, .alert-title 错误图标和标题颜色
 * color: #f56c6c - 红色
 */
.alert.error .alert-icon,
.alert.error .alert-title {
  color: #f56c6c;
}

/* ========================================
   Alert 信息类型样式
 * ======================================== */

/**
 * .alert.info 信息类型（默认）
 * background-color: #f4f4f5 - 浅灰色背景
 * border-color: #e9e9eb - 浅灰色边框
 */
.alert.info {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
}

/**
 * .alert.info .alert-icon, .alert-title 信息图标和标题颜色
 * color: #909399 - 灰色
 */
.alert.info .alert-icon,
.alert.info .alert-title {
  color: #909399;
}