/*
 * @Author: 陈万照 <mr_chen_100@163.com>
 * @Date: 2024-01-18 12:15:36
 * @LastEditors: CHEN W.Z. <mr_chen_100@163.com>
 * @LastEditTime: 2024-02-29 17:28:47
 * @Description: Sider 侧边栏样式文件
 */
:root {
    /* 全局 */
    --hx-sider-transition-duration: 0.5s; /* 侧边栏过渡时间 */
    --hx-sider-background: #ffffff; /* 侧边栏背景 */
    --hx-sider-width: 80px; /* 侧边栏宽度 */
    --hx-sider-position: fixed; /* 侧边栏定位方式 */
    --hx-sider-right: 0; /* 侧边栏定位位置 */
    --hx-sider-bottom: 0; /* 侧边栏定位位置 */
    --hx-sider-z-index: 900; /* 侧边栏层级 */
    --hx-sider-font-size: 12px; /* 字体大小 */
    --hx-sider-text-color: #333333; /* 字体颜色 */
    --hx-sider-item-height: 80px; /* 侧边栏菜单项高度 */
    --hx-sider-item-border-color: #e7e7e7; /* 侧边栏菜单项边框颜色 */
    --hx-sider-item-padding-sides: 8px; /* 侧边栏菜单项左右内边距 */
    --hx-sider-item-icon-size: 24px; /* 侧边栏菜单项图标大小 */
    --hx-sider-item-background-hover: #e7e7e7; /* 侧边栏菜单项鼠标移入时背景颜色 */
    --hx-sider-item-text-margin: 12px 0 0 0; /* 侧边栏菜单项文字间距 */

    /* Content */
    --hx-sider-content-border-radius: 10px; /* 侧边栏内容圆角 */
    --hx-sider-content-right: calc(100% + 12px); /* 侧边栏内容右侧距离 */

    /* 客服热线 */
    --hx-sider-content-hotline-height: 100%; /* 高度 */
    --hx-sider-content-hotline-width: 260px; /* 宽度 */
    --hx-sider-content-hotline-top: 0; /* 位置 */
    --hx-sider-content-hotline-padding: 0 0 0 38px; /* 内边距 */
    --hx-sider-content-hotline-label-size: inherit; /* 标签字体大小 */
    --hx-sider-content-hotline-value-size: 16px; /* 值字体大小 */
    --hx-sider-content-hotline-value-margin: 12px 0 0 0; /* 内边距 */

    /* 关注我们 */
    --hx-sider-content-follow-width: 200px; /* 宽度 */
    --hx-sider-content-follow-height: 300%; /* 高度 */
    --hx-sider-content-follow-top: -200%; /* 位置 */
    --hx-sider-content-follow-top-padding: 16px 16px; /* 内边距 */
    --hx-sider-content-follow-top-image-height: 28%; /* 图片高度 */
    --hx-sider-content-follow-bottom-padding-sides: 12px; /* 内边距 */
    --hx-sider-content-follow-qrcode-size: 100px; /* 二维码大小 */
    --hx-sider-content-follow-qrcode-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); /* 二维码阴影 */
    --hx-sider-content-follow-tips-line-height: 1.57; /* 行高 */
    --hx-sider-content-follow-tips-margin: 14px 0 0 0; /* 内边距 */
    --hx-sider-content-bar-height: 4px; /* 高度 */
    --hx-sider-content-bar-background: var(--app-theme-linear-gradient); /* 背景颜色 */
}

#sider {
    position: var(--hx-sider-position);
    width: var(--hx-sider-width);
    background: var(--hx-sider-background);
    right: var(--hx-sider-right);
    bottom: var(--hx-sider-bottom);
    z-index: var(--hx-sider-z-index);
    font-size: var(--hx-sider-font-size);
    color: var(--hx-sider-text-color);
    box-shadow: var(--app-box-shadow);
}

.sider-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    height: var(--hx-sider-item-height);
    transition: background-color var(--hx-sider-transition-duration);
    cursor: pointer;
    user-select: none;
}

.sider-item:hover {
    background: var(--hx-sider-item-background-hover);
}

.sider-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: var(--hx-sider-item-padding-sides);
    bottom: 0;
    width: calc(100% - var(--hx-sider-item-padding-sides) * 2);
    border-top: 1px solid var(--hx-sider-item-border-color);
}

.sider-item-icon {
    font-size: var(--hx-sider-item-icon-size);
}

.sider-item-text {
    margin: var(--hx-sider-item-text-margin);
}

/* Content */
.sider-item-content {
    position: absolute;
    right: calc(var(--hx-sider-content-right) * 2);
    background: var(--hx-sider-background);
    border-radius: var(--hx-sider-content-border-radius);
    top: 0;
    opacity: 0;
    transform: scale(0);
    transition: right var(--hx-sider-transition-duration), opacity var(--hx-sider-transition-duration);
    overflow: hidden;
    box-shadow: var(--app-box-shadow);
}

.sider-item:hover .sider-item-content {
    right: var(--hx-sider-content-right);
    opacity: 1;
    transform: scale(1);
}

/* 客服热线 */
.sider-item-content--hotline {
    width: var(--hx-sider-content-hotline-width);
    height: var(--hx-sider-content-hotline-height);
    padding: var(--hx-sider-content-hotline-padding);
    top: var(--hx-sider-content-hotline-top);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sider-item-content--hotline-value {
    font-size: var(--hx-sider-content-hotline-value-size);
    display: block;
    margin: var(--hx-sider-content-hotline-value-margin);
}

/* 关注我们 */
.sider-item-content--follow {
    width: var(--hx-sider-content-follow-width);
    height: var(--hx-sider-content-follow-height);
    top: var(--hx-sider-content-follow-top);
    display: flex;
    flex-direction: column;
}

.sider-item-content--follow-half {
    height: 50%;
    flex-shrink: 0;
}

.sider-item-content--follow-half--top {
    background-image: url("/statics/home/images/bg-3.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 110% 110%;
    padding: var(--hx-sider-content-follow-top-padding);
}

.sider-item-content--follow-half--top-image {
    height: var(--hx-sider-content-follow-top-image-height);
}

.sider-item-content--follow-half--bottom {
    padding: 0 var(--hx-sider-content-follow-bottom-padding-sides);
    position: relative;
}

.sider-item-content--follow-half--bottom::after {
    content: "";
    width: calc(100% - var(--hx-sider-content-follow-bottom-padding-sides) * 2);
    height: var(--hx-sider-content-bar-height);
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background: var(--hx-sider-content-bar-background);
    position: absolute;
    opacity: 0;
}

.sider-item-content--follow-half-qrcode {
    width: var(--hx-sider-content-follow-qrcode-size);
    height: var(--hx-sider-content-follow-qrcode-size);
    margin-top: calc(-1 * var(--hx-sider-content-follow-qrcode-size) / 2);
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--hx-sider-content-follow-qrcode-box-shadow);
}

.sider-item-content--follow-half-tips {
    line-height: var(--hx-sider-content-follow-tips-line-height);
    margin: var(--hx-sider-content-follow-tips-margin);
    text-align: center;
}

/* 1680 */
@media (max-width: 1680px) {
}

/* 1440 */
@media (max-width: 1440px) {
}

/* 1366 */
@media (max-width: 1366px) {
    :root {
        /* 全局 */
        --hx-sider-item-padding-sides: 7px; /* 侧边栏菜单项左右内边距 */
        --hx-sider-item-text-margin: 10px 0 0 0; /* 侧边栏菜单项文字间距 */
    }
}

/* 1280 */
@media (max-width: 1280px) {
}

/* 1024 */
@media (max-width: 1024px) {
    :root {
        /* 全局 */
        --hx-sider-item-padding-sides: 6px; /* 侧边栏菜单项左右内边距 */
    }
}

/* 992 */
@media (max-width: 992px) {
    :root {
        /* 全局 */
        --hx-sider-width: 71px; /* 侧边栏宽度 */
        --hx-sider-item-height: 69px; /* 侧边栏菜单项高度 */
        --hx-sider-item-padding-sides: 6px; /* 侧边栏菜单项左右内边距 */
        --hx-sider-item-icon-size: 22px; /* 侧边栏菜单项图标大小 */
        --hx-sider-item-text-margin: 8px 0 0 0; /* 侧边栏菜单项文字间距 */

        /* 客服热线 */
        --hx-sider-content-hotline-width: 182px; /* 宽度 */
        --hx-sider-content-hotline-padding: 0 0 0 26px; /* 内边距 */
        --hx-sider-content-hotline-value-size: 14px; /* 值字体大小 */
        --hx-sider-content-hotline-value-margin: 8px 0 0 0; /* 内边距 */

        /* 关注我们 */
        --hx-sider-content-follow-width: 198px; /* 宽度 */
        --hx-sider-content-follow-top-padding: 15px 12px; /* 内边距 */
        --hx-sider-content-follow-bottom-padding-sides: 12px; /* 内边距 */
        --hx-sider-content-follow-qrcode-size: 84px; /* 二维码大小 */
        --hx-sider-content-follow-tips-margin: 11px 0 0 0; /* 内边距 */
        --hx-sider-content-bar-height: 2px; /* 高度 */
    }
}

/* 768 */
@media (max-width: 768px) {
    :root {
        /* 全局 */
        --hx-sider-width: auto; /* 侧边栏宽度 */
        --hx-sider-right: 10px; /* 侧边栏定位位置 */
        --hx-sider-bottom: 30px; /* 侧边栏定位位置 */
        --hx-sider-item-icon-size: 16px; /* 侧边栏菜单项图标大小 */
        --hx-sider-item-width: auto; /* 侧边栏菜单项宽度 */
        --hx-sider-item-height: auto; /* 侧边栏菜单项高度 */
        --hx-sider-item-margin: 10px 0; /* 外边距 */

        /* 客服热线 */
        --hx-sider-content-hotline-height: auto; /* 高度 */
        --hx-sider-content-hotline-padding: 20px; /* 内边距 */

        /* 关注我们 */
        --hx-sider-content-follow-height: 240px; /* 高度 */
        --hx-sider-content-follow-top: auto; /* 位置 */
    }

    #sider {
        background: transparent;
        box-shadow: none;
    }

    .sider-item {
        width: var(--hx-sider-item-width);
        height: var(--hx-sider-item-height);
        margin: var(--hx-sider-item-margin);
        border-radius: 50%;
        background: var(--hx-sider-background);
        box-shadow: var(--app-box-shadow);
    }

    .sider-item::after {
        display: none;
    }

    .sider-item-icon {
        font-size: var(--hx-sider-item-icon-size);
        width: 2.4em;
        height: 2.4em;
        line-height: 2.4;
        text-align: center;
    }

    .sider-item-text {
        display: none;
    }

    /* 客服热线 */
    .sider-item-content--hotline {
        top: auto;
        bottom: 50%;
    }

    /* 关注我们 */
    .sider-item-content--follow {
        bottom: 50%;
    }
}

/* 576 */
@media (max-width: 576px) {
}