/**
 * 纯CSS图标库
 * 使用CSS伪元素、边框、变换等绘制图标
 * 不使用Unicode符号或图片
 */

/* ==================== 基础图标样式 ==================== */
.cxy-icon {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: 16px;
    line-height: 1;
}

.cxy-icon::before,
.cxy-icon::after {
    content: '';
    position: absolute;
}

/* ==================== 导航图标 ==================== */

/* 首页图标 - 房子 */
.cxy-icon-home::before {
    width: 0;
    height: 0;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-bottom: 0.4em solid currentColor;
    top: 0;
    left: 0;
}

.cxy-icon-home::after {
    width: 0.6em;
    height: 0.4em;
    border: 0.1em solid currentColor;
    border-top: none;
    bottom: 0.1em;
    left: 0.15em;
}

/* 菜单图标 - 汉堡包 */
.cxy-icon-menu::before {
    width: 1em;
    height: 0.12em;
    background-color: currentColor;
    top: 0.2em;
    left: 0;
}

.cxy-icon-menu::after {
    width: 1em;
    height: 0.12em;
    background-color: currentColor;
    bottom: 0.2em;
    left: 0;
    box-shadow: 0 -0.28em 0 0 currentColor;
}

/* 关闭图标 - X */
.cxy-icon-close::before {
    width: 1em;
    height: 0.1em;
    background-color: currentColor;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(45deg);
}

.cxy-icon-close::after {
    width: 1em;
    height: 0.1em;
    background-color: currentColor;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(-45deg);
}

/* 搜索图标 - 放大镜 */
.cxy-icon-search::before {
    width: 0.6em;
    height: 0.6em;
    border: 0.1em solid currentColor;
    border-radius: 50%;
    top: 0;
    left: 0;
}

.cxy-icon-search::after {
    width: 0.1em;
    height: 0.3em;
    background-color: currentColor;
    bottom: -0.15em;
    right: -0.05em;
    transform: rotate(-45deg);
    transform-origin: top center;
}

/* 箭头向右 */
.cxy-icon-arrow-right::before {
    width: 0.5em;
    height: 0.1em;
    background-color: currentColor;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.cxy-icon-arrow-right::after {
    width: 0;
    height: 0;
    border-top: 0.25em solid transparent;
    border-bottom: 0.25em solid transparent;
    border-left: 0.3em solid currentColor;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

/* 箭头向左 */
.cxy-icon-arrow-left::before {
    width: 0.5em;
    height: 0.1em;
    background-color: currentColor;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.cxy-icon-arrow-left::after {
    width: 0;
    height: 0;
    border-top: 0.25em solid transparent;
    border-bottom: 0.25em solid transparent;
    border-right: 0.3em solid currentColor;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* 箭头向上 */
.cxy-icon-arrow-up::before {
    width: 0.1em;
    height: 0.5em;
    background-color: currentColor;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.cxy-icon-arrow-up::after {
    width: 0;
    height: 0;
    border-left: 0.25em solid transparent;
    border-right: 0.25em solid transparent;
    border-bottom: 0.3em solid currentColor;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

/* 箭头向下 */
.cxy-icon-arrow-down::before {
    width: 0.1em;
    height: 0.5em;
    background-color: currentColor;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.cxy-icon-arrow-down::after {
    width: 0;
    height: 0;
    border-left: 0.25em solid transparent;
    border-right: 0.25em solid transparent;
    border-top: 0.3em solid currentColor;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

/* ==================== 联系方式图标 ==================== */

/* 电话图标 */
.cxy-icon-phone::before {
    width: 0.3em;
    height: 0.6em;
    border: 0.1em solid currentColor;
    border-radius: 0.1em 0.1em 0 0;
    top: 0;
    left: 0.3em;
}

.cxy-icon-phone::after {
    width: 0.3em;
    height: 0.6em;
    border: 0.1em solid currentColor;
    border-radius: 0 0 0.1em 0.1em;
    bottom: 0;
    left: 0.3em;
}

/* 邮件图标 */
.cxy-icon-mail::before {
    width: 1em;
    height: 0.7em;
    border: 0.1em solid currentColor;
    border-radius: 0.1em;
    top: 0.15em;
    left: 0;
}

.cxy-icon-mail::after {
    width: 0;
    height: 0;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-top: 0.35em solid currentColor;
    top: 0.25em;
    left: 0;
}

/* 定位图标 */
.cxy-icon-location::before {
    width: 0.6em;
    height: 0.9em;
    border: 0.1em solid currentColor;
    border-radius: 50% 50% 50% 0;
    top: 0;
    left: 0.2em;
    transform: rotate(-45deg);
}

.cxy-icon-location::after {
    width: 0.2em;
    height: 0.2em;
    background-color: currentColor;
    border-radius: 50%;
    top: 0.5em;
    left: 0.4em;
}

/* 时钟图标 */
.cxy-icon-clock::before {
    width: 0.9em;
    height: 0.9em;
    border: 0.1em solid currentColor;
    border-radius: 50%;
    top: 0.05em;
    left: 0.05em;
}

.cxy-icon-clock::after {
    width: 0.1em;
    height: 0.35em;
    background-color: currentColor;
    top: 0.3em;
    left: 0.45em;
    transform-origin: bottom center;
    transform: rotate(45deg);
}

/* ==================== 社交媒体图标 ==================== */

/* 微信图标 */
.cxy-icon-wechat::before {
    width: 1em;
    height: 0.75em;
    border: 0.08em solid currentColor;
    border-radius: 0.15em;
    top: 0.15em;
    left: 0;
}

.cxy-icon-wechat::after {
    width: 0.35em;
    height: 0.3em;
    border: 0.08em solid currentColor;
    border-radius: 0.1em;
    bottom: 0;
    right: 0;
}

/* 微博图标 */
.cxy-icon-weibo::before {
    width: 0.7em;
    height: 0.7em;
    border: 0.08em solid currentColor;
    border-radius: 50%;
    top: 0.15em;
    left: 0.15em;
}

.cxy-icon-weibo::after {
    width: 0.2em;
    height: 0.2em;
    background-color: currentColor;
    border-radius: 50%;
    top: 0.5em;
    right: 0.2em;
}

/* 链接图标 */
.cxy-icon-link::before {
    width: 0.4em;
    height: 0.4em;
    border: 0.08em solid currentColor;
    border-radius: 0.05em;
    top: 0.3em;
    left: 0;
}

.cxy-icon-link::after {
    width: 0.4em;
    height: 0.4em;
    border: 0.08em solid currentColor;
    border-radius: 0.05em;
    top: 0.3em;
    right: 0;
}

/* ==================== 功能图标 ==================== */

/* 用户图标 */
.cxy-icon-user::before {
    width: 0.4em;
    height: 0.4em;
    border: 0.1em solid currentColor;
    border-radius: 50%;
    top: 0;
    left: 0.3em;
}

.cxy-icon-user::after {
    width: 0.7em;
    height: 0.5em;
    border: 0.1em solid currentColor;
    border-radius: 0.35em 0.35em 0 0;
    border-top: none;
    bottom: 0;
    left: 0.15em;
}

/* 日历图标 */
.cxy-icon-calendar::before {
    width: 0.9em;
    height: 0.7em;
    border: 0.08em solid currentColor;
    border-radius: 0.1em;
    top: 0.2em;
    left: 0;
}

.cxy-icon-calendar::after {
    width: 0.2em;
    height: 0.15em;
    border: 0.08em solid currentColor;
    border-bottom: none;
    top: 0.05em;
    left: 0.15em;
    box-shadow: 0.45em 0 0 0 currentColor;
}

/* 文件图标 */
.cxy-icon-file::before {
    width: 0.6em;
    height: 0.8em;
    border: 0.08em solid currentColor;
    border-radius: 0.05em;
    top: 0.1em;
    left: 0.2em;
}

.cxy-icon-file::after {
    width: 0;
    height: 0;
    border-left: 0.2em solid transparent;
    border-right: 0.2em solid transparent;
    border-bottom: 0.25em solid currentColor;
    top: 0.1em;
    right: 0.15em;
}

/* 文件夹图标 */
.cxy-icon-folder::before {
    width: 0.9em;
    height: 0.6em;
    border: 0.08em solid currentColor;
    border-radius: 0 0.1em 0.1em 0.1em;
    top: 0.25em;
    left: 0.05em;
}

.cxy-icon-folder::after {
    width: 0.3em;
    height: 0.15em;
    border: 0.08em solid currentColor;
    border-bottom: none;
    border-radius: 0.1em 0.1em 0 0;
    top: 0.1em;
    left: 0.05em;
}

/* 眼睛图标 */
.cxy-icon-eye::before {
    width: 0.9em;
    height: 0.5em;
    border: 0.08em solid currentColor;
    border-radius: 0.5em;
    top: 0.25em;
    left: 0.05em;
}

.cxy-icon-eye::after {
    width: 0.25em;
    height: 0.25em;
    background-color: currentColor;
    border-radius: 50%;
    top: 0.38em;
    left: 0.38em;
}

/* 标签图标 */
.cxy-icon-tag::before {
    width: 0.7em;
    height: 0.5em;
    border: 0.08em solid currentColor;
    border-radius: 0 0.15em 0.15em 0;
    top: 0.25em;
    left: 0.15em;
}

.cxy-icon-tag::after {
    width: 0;
    height: 0;
    border-right: 0.15em solid transparent;
    border-left: 0.15em solid transparent;
    border-top: 0.15em solid currentColor;
    top: 0.15em;
    left: 0;
    transform: rotate(-45deg);
}

/* ==================== 操作图标 ==================== */

/* 编辑图标 */
.cxy-icon-edit::before {
    width: 0.1em;
    height: 0.7em;
    background-color: currentColor;
    top: 0.15em;
    left: 0.45em;
    transform: rotate(45deg);
}

.cxy-icon-edit::after {
    width: 0.3em;
    height: 0.1em;
    background-color: currentColor;
    top: 0.45em;
    left: 0.35em;
    transform: rotate(45deg);
}

/* 删除图标 */
.cxy-icon-delete::before {
    width: 0.7em;
    height: 0.5em;
    border: 0.08em solid currentColor;
    border-radius: 0.05em;
    top: 0.35em;
    left: 0.15em;
}

.cxy-icon-delete::after {
    width: 0.9em;
    height: 0.15em;
    background-color: currentColor;
    top: 0.1em;
    left: 0.05em;
    border-radius: 0.05em 0.05em 0 0;
}

/* 添加图标 */
.cxy-icon-add::before {
    width: 1em;
    height: 0.12em;
    background-color: currentColor;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.cxy-icon-add::after {
    width: 0.12em;
    height: 1em;
    background-color: currentColor;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

/* 减号图标 */
.cxy-icon-minus::before {
    width: 1em;
    height: 0.12em;
    background-color: currentColor;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.cxy-icon-minus::after {
    display: none;
}

/* 对勾图标 */
.cxy-icon-check::before {
    width: 0.35em;
    height: 0.1em;
    background-color: currentColor;
    top: 0.5em;
    left: 0.15em;
    transform: rotate(45deg);
}

.cxy-icon-check::after {
    width: 0.6em;
    height: 0.1em;
    background-color: currentColor;
    top: 0.35em;
    left: 0.1em;
    transform: rotate(-45deg);
}

/* 星星图标 */
.cxy-icon-star::before {
    width: 0;
    height: 0;
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-bottom: 0.5em solid currentColor;
    top: 0.3em;
    left: 0.2em;
}

.cxy-icon-star::after {
    width: 0;
    height: 0;
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-top: 0.5em solid currentColor;
    top: 0.15em;
    left: 0.2em;
}

/* 心形图标 */
.cxy-icon-heart::before {
    width: 0.5em;
    height: 0.8em;
    background-color: currentColor;
    border-radius: 0.25em 0.25em 0 0;
    top: 0.1em;
    left: 0.2em;
    transform: rotate(-45deg);
}

.cxy-icon-heart::after {
    width: 0.5em;
    height: 0.8em;
    background-color: currentColor;
    border-radius: 0.25em 0.25em 0 0;
    top: 0.1em;
    left: 0.25em;
    transform: rotate(45deg);
}

/* ==================== 业务图标 ==================== */

/* 图表/分析图标 */
.cxy-icon-chart::before {
    width: 0.15em;
    height: 0.5em;
    background-color: currentColor;
    bottom: 0.2em;
    left: 0.15em;
}

.cxy-icon-chart::after {
    width: 0.15em;
    height: 0.35em;
    background-color: currentColor;
    bottom: 0.2em;
    left: 0.4em;
    box-shadow: 0.25em -0.15em 0 0 currentColor, 0.5em -0.3em 0 0 currentColor;
}

/* 设置图标 */
.cxy-icon-settings::before {
    width: 0.7em;
    height: 0.7em;
    border: 0.1em solid currentColor;
    border-radius: 50%;
    top: 0.15em;
    left: 0.15em;
}

.cxy-icon-settings::after {
    width: 0.4em;
    height: 0.1em;
    background-color: currentColor;
    top: 0.45em;
    left: 0.3em;
    box-shadow:
        0 -0.3em 0 0 currentColor,
        0.3em 0 0 0 currentColor,
        -0.3em 0 0 0 currentColor;
}

/* 盾牌/安全图标 */
.cxy-icon-shield::before {
    width: 0.7em;
    height: 0.85em;
    border: 0.08em solid currentColor;
    border-radius: 0 0 0.35em 0.35em;
    top: 0.05em;
    left: 0.15em;
}

.cxy-icon-shield::after {
    width: 0.15em;
    height: 0.5em;
    background-color: currentColor;
    top: 0.25em;
    left: 0.43em;
}

/* 地球/全球图标 */
.cxy-icon-globe::before {
    width: 0.7em;
    height: 0.7em;
    border: 0.08em solid currentColor;
    border-radius: 50%;
    top: 0.15em;
    left: 0.15em;
}

.cxy-icon-globe::after {
    width: 0.08em;
    height: 0.7em;
    background-color: currentColor;
    top: 0.15em;
    left: 0.46em;
    transform: rotate(45deg);
    box-shadow: 0.3em 0 0 0 currentColor;
}

/* 广告图标 */
.cxy-icon-ad::before {
    width: 0.7em;
    height: 0.5em;
    border: 0.08em solid currentColor;
    border-radius: 0.1em;
    top: 0.3em;
    left: 0.15em;
}

.cxy-icon-ad::after {
    width: 0.15em;
    height: 0.3em;
    background-color: currentColor;
    top: 0.45em;
    left: 0.3em;
    box-shadow: 0.35em 0 0 0 currentColor;
}

/* 火箭图标 */
.cxy-icon-rocket::before {
    width: 0.3em;
    height: 0.7em;
    border: 0.08em solid currentColor;
    border-radius: 0.15em 0.15em 0 0;
    top: 0.1em;
    left: 0.35em;
}

.cxy-icon-rocket::after {
    width: 0;
    height: 0;
    border-left: 0.2em solid transparent;
    border-right: 0.2em solid transparent;
    border-top: 0.25em solid currentColor;
    bottom: 0.1em;
    left: 0.3em;
}

/* 灯泡/创意图标 */
.cxy-icon-bulb::before {
    width: 0.6em;
    height: 0.6em;
    border: 0.08em solid currentColor;
    border-radius: 50%;
    top: 0.1em;
    left: 0.2em;
}

.cxy-icon-bulb::after {
    width: 0.3em;
    height: 0.25em;
    border: 0.08em solid currentColor;
    border-radius: 0 0 0.15em 0.15em;
    top: 0.65em;
    left: 0.35em;
}

/* 奖杯图标 */
.cxy-icon-trophy::before {
    width: 0.7em;
    height: 0.5em;
    border: 0.08em solid currentColor;
    border-radius: 0 0.0em 0.35em 0.35em;
    top: 0.1em;
    left: 0.15em;
}

.cxy-icon-trophy::after {
    width: 0.1em;
    height: 0.3em;
    background-color: currentColor;
    top: 0.55em;
    left: 0.45em;
    box-shadow:
        0 0.35em 0 0 currentColor,
        -0.15em 0.35em 0 0 currentColor,
        0.15em 0.35em 0 0 currentColor;
}

/* ==================== 方向指示图标 ==================== */

/* 双箭头向右 */
.cxy-icon-chevron-right::before {
    width: 0;
    height: 0;
    border-top: 0.2em solid transparent;
    border-bottom: 0.2em solid transparent;
    border-left: 0.3em solid currentColor;
    top: 50%;
    left: 0.35em;
    transform: translateY(-50%);
}

/* 双箭头向左 */
.cxy-icon-chevron-left::before {
    width: 0;
    height: 0;
    border-top: 0.2em solid transparent;
    border-bottom: 0.2em solid transparent;
    border-right: 0.3em solid currentColor;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* 上一页 */
.cxy-icon-prev::before {
    width: 0.35em;
    height: 0.1em;
    background-color: currentColor;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.cxy-icon-prev::after {
    width: 0;
    height: 0;
    border-top: 0.2em solid transparent;
    border-bottom: 0.2em solid transparent;
    border-right: 0.3em solid currentColor;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* 下一页 */
.cxy-icon-next::before {
    width: 0.35em;
    height: 0.1em;
    background-color: currentColor;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.cxy-icon-next::after {
    width: 0;
    height: 0;
    border-top: 0.2em solid transparent;
    border-bottom: 0.2em solid transparent;
    border-left: 0.3em solid currentColor;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

/* ==================== 更多图标 ==================== */

/* 点状菜单 */
.cxy-icon-dots::before {
    width: 0.2em;
    height: 0.2em;
    background-color: currentColor;
    border-radius: 50%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    box-shadow: 0.4em 0 0 0 currentColor, 0.8em 0 0 0 currentColor;
}

.cxy-icon-dots::after {
    display: none;
}

/* 分享图标 */
.cxy-icon-share::before {
    width: 0.4em;
    height: 0.4em;
    border: 0.08em solid currentColor;
    border-radius: 50%;
    top: 0.2em;
    left: 0.5em;
}

.cxy-icon-share::after {
    width: 0.4em;
    height: 0.4em;
    border: 0.08em solid currentColor;
    border-radius: 50%;
    top: 0.5em;
    left: 0.3em;
    box-shadow: 0.4em -0.4em 0 0 currentColor;
}

/* 打印图标 */
.cxy-icon-print::before {
    width: 0.7em;
    height: 0.5em;
    border: 0.08em solid currentColor;
    border-radius: 0.1em;
    top: 0.3em;
    left: 0.15em;
}

.cxy-icon-print::after {
    width: 0.9em;
    height: 0.08em;
    background-color: currentColor;
    top: 0.15em;
    left: 0.05em;
}

/* 下载图标 */
.cxy-icon-download::before {
    width: 0.08em;
    height: 0.5em;
    background-color: currentColor;
    top: 0;
    left: 0.46em;
}

.cxy-icon-download::after {
    width: 0;
    height: 0;
    border-left: 0.25em solid transparent;
    border-right: 0.25em solid transparent;
    border-top: 0.25em solid currentColor;
    top: 0.4em;
    left: 0.25em;
}

/* 上传图标 */
.cxy-icon-upload::before {
    width: 0.08em;
    height: 0.5em;
    background-color: currentColor;
    bottom: 0.2em;
    left: 0.46em;
}

.cxy-icon-upload::after {
    width: 0;
    height: 0;
    border-left: 0.25em solid transparent;
    border-right: 0.25em solid transparent;
    border-bottom: 0.25em solid currentColor;
    top: 0;
    left: 0.25em;
}

/* 刷新图标 */
.cxy-icon-refresh::before {
    width: 0.7em;
    height: 0.7em;
    border: 0.08em solid currentColor;
    border-radius: 50%;
    top: 0.15em;
    left: 0.15em;
    border-top-color: transparent;
}

.cxy-icon-refresh::after {
    width: 0.2em;
    height: 0.1em;
    background-color: currentColor;
    top: 0.1em;
    left: 0.6em;
    transform: rotate(-45deg);
}

/* 警告图标 */
.cxy-icon-warning::before {
    width: 0;
    height: 0;
    border-left: 0.4em solid transparent;
    border-right: 0.4em solid transparent;
    border-bottom: 0.8em solid currentColor;
    top: 0.1em;
    left: 0.1em;
}

.cxy-icon-warning::after {
    width: 0.1em;
    height: 0.35em;
    background-color: #fff;
    top: 0.35em;
    left: 0.45em;
}

/* 信息图标 */
.cxy-icon-info::before {
    width: 0.9em;
    height: 0.9em;
    border: 0.08em solid currentColor;
    border-radius: 50%;
    top: 0.05em;
    left: 0.05em;
}

.cxy-icon-info::after {
    width: 0.08em;
    height: 0.4em;
    background-color: currentColor;
    top: 0.2em;
    left: 0.46em;
}

/* 成功图标 */
.cxy-icon-success::before {
    width: 0.9em;
    height: 0.9em;
    background-color: #4ade80;
    border-radius: 50%;
    top: 0.05em;
    left: 0.05em;
}

.cxy-icon-success::after {
    width: 0.25em;
    height: 0.12em;
    border: 0.08em solid #fff;
    border-top: none;
    border-left: none;
    top: 0.4em;
    left: 0.35em;
    transform: rotate(45deg);
}

/* 错误图标 */
.cxy-icon-error::before {
    width: 0.9em;
    height: 0.9em;
    background-color: #ef4444;
    border-radius: 50%;
    top: 0.05em;
    left: 0.05em;
}

.cxy-icon-error::after {
    width: 0.4em;
    height: 0.08em;
    background-color: #fff;
    top: 0.46em;
    left: 0.3em;
    transform: rotate(45deg);
    box-shadow: 0 0 0 0.08em #ef4444;
}