/* ===== 颜色选择器组件样式 ===== */

/* 颜色选择器容器 */
.xw_color-picker {
    position: relative;
    margin-right: 1.25rem;
}

/* 颜色选择器触发按钮 */
.xw_color-trigger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

/* 颜色圆点 */
.xw_color-dot {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

/* 颜色下拉菜单 */
.xw_color-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background-color: var(--xw_navbar-dropdown-bg);
    border: var(--xw_navbar-dropdown-border);
    min-width: 8.75rem;
    border-radius: 0.25rem;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 1001;
}

/* 下拉菜单展开状态 */
.xw_color-dropdown.xw_active {
    opacity: 1;
    visibility: visible;
}

/* 颜色选项 */
.xw_color-option {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: var(--xw_navbar-dropdown-text);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

/* 颜色选项悬停效果 */
.xw_color-option:hover {
    background-color: var(--xw_navbar-dropdown-hover-bg);
    color: var(--xw_navbar-dropdown-hover-text);
}


/* ===== 各颜色主题变量覆盖 ===== */
/* 默认蓝色主题使用 nav.min.css 原值，此处无需覆盖 */

/* 红色主题 */
[data-color-theme="#e14624"] {
    --xw_navbar-bg: #e14624;
    --xw_navbar-link-hover-bg: rgba(255, 255, 255, 0.2);
    --xw_navbar-dropdown-hover-text: #e14624;
}

/* 绿色主题 */
[data-color-theme="#08964a"] {
    --xw_navbar-bg: #08964a;
    --xw_navbar-link-hover-bg: rgba(255, 255, 255, 0.2);
    --xw_navbar-dropdown-hover-text: #08964a;
}

/* 深红主题 */
[data-color-theme="#BE381A"] {
    --xw_navbar-bg: #BE381A;
    --xw_navbar-link-hover-bg: rgba(255, 255, 255, 0.2);
    --xw_navbar-dropdown-hover-text: #BE381A;
}

/* 棕色主题 */
[data-color-theme="#A47238"] {
    --xw_navbar-bg: #A47238;
    --xw_navbar-link-hover-bg: rgba(255, 255, 255, 0.2);
    --xw_navbar-dropdown-hover-text: #A47238;
}


/* ===== 非默认颜色主题：导航栏文字和图标改为白色 ===== */

/* 导航链接文字（需完整路径覆盖 nav.min.css 的高优先级选择器） */
html[data-color-theme]:not([data-color-theme=""]) .xw_navbar .xw_nav-container .xw_nav-menu .xw_nav-item .xw_nav-link {
    color: #ffffff;
}

/* 下拉箭头 */
html[data-color-theme]:not([data-color-theme=""]) .xw_navbar .xw_nav-container .xw_nav-menu .xw_nav-item::before {
    color: #ffffff;
}

/* 非默认主题：下拉菜单一级 label hover 背景用强调色 */
html[data-color-theme]:not([data-color-theme=""]) .xw_navbar .xw_nav-container .xw_nav-menu .xw_nav-item .xw_dropdown-menu .xw_dropdown-node:hover>.xw_dropdown-label {
    background-color: var(--xw_navbar-dropdown-hover-text);
}