/* ========================================
   按钮样式
   包括按钮的背景色、字体大小、字体类型、字体颜色、圆角
   ======================================== */

/* 按钮通用样式 */
.cus_pagination-button {
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中对齐内容 */
    align-items: center; /* 垂直居中对齐内容 */
    margin: 3px; /* 按钮的外边距 */
    text-decoration: none; /* 去掉文本装饰 */
    color: #666666; /* 按钮默认文字颜色 */
    background-color: #EBEBEB; /* 按钮默认背景色 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    border: #EDEDED 1px solid; /* 按钮边框样式 */
    font-size: 14px; /* 按钮字体大小 */
    font-family: Arial, sans-serif; /* 按钮字体类型 */
    white-space: nowrap; /* 防止文字换行 */
    border-radius: 5px; /* 按钮的圆角半径 */
    height: 24px; /* 统一高度 */
}

/* 当前页按钮样式 */
.cus_pagination-button.cus_current {
    color: white; /* 当前页按钮文字颜色 */
    background-color: var(--cus-main-color); /* 当前页按钮背景色 */
}

/* 首页、尾页、上一页、下一页的背景色 */
.cus_pagination-button.cus_primary {
    color: #666666; /* 按钮文字颜色 */
    background-color: #EBEBEB; /* 按钮背景色 */
}

/* 禁用按钮样式 */
.cus_pagination-button.cus_disabled {
    color: #666666; /* 禁用按钮文字颜色 */
    pointer-events: none; /* 禁用点击事件 */
    cursor: not-allowed; /* 鼠标悬停时显示禁用光标 */
}

/* 按钮悬浮状态 */
.cus_pagination-button:hover {
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
}

/* ========================================
   信息文本样式
   包括“共有几页”和“共有几条”的样式
   ======================================== */

/* 信息文本样式，确保高度与按钮一致 */
.cus_pagination-info {
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中对齐内容 */
    align-items: center; /* 垂直居中对齐内容 */
    margin: 3px; /* 按钮的外边距 */
    color: #666666; /* 按钮默认文字颜色 */
    background-color: #EBEBEB; /* 按钮默认背景色 */
    border: #EDEDED 1px solid; /* 按钮边框样式 */
    font-size: 14px; /* 按钮字体大小 */
    font-family: Arial, sans-serif; /* 按钮字体类型 */
    white-space: nowrap; /* 防止文字换行 */
    border-radius: 5px; /* 按钮的圆角半径 */
    height: 22px; /* 统一高度 */
}

/* ========================================
   元素排版和间距
   包括容器和列表的排版
   ======================================== */

/* 分页容器 */
.cus_pagination-container {
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中对齐内容 */
    align-items: center; /* 垂直居中对齐内容 */
}

/* 分页列表 */
.cus_pagination-list {
    display: flex; /* 使用弹性布局 */
    list-style: none; /* 去掉列表项默认样式 */
    padding: 0; /* 去掉内边距 */
    margin: 0; /* 去掉外边距 */
}