/* OneNav主题暗色模式兼容样式 */

/* 基础容器 - 亮色模式 */
.onenav-share-container {
  background-color: var(--main-bg-color, #fff);
  color: var(--main-color, #333);
  border-top-color: var(--muted-bg-color, #eee);
  border-bottom-color: var(--muted-bg-color, #eee);
}

/* 暗色模式适配 */
html.io-black-mode .onenav-share-container {
  background-color: var(--main-bg-color, #2D2E2F);
  color: var(--main-color, #b4b8bf);
  border-top-color: var(--muted-bg-color, #24262a);
  border-bottom-color: var(--muted-bg-color, #24262a);
}

/* 分享按钮基础样式 - 亮色模式 */
.onenav-share-btn {
  background-color: var(--muted-bg-color-l, #f8f9fa);
  border-color: var(--muted-bg-color, #ddd);
  color: var(--main-color, #666);
}

/* 分享按钮基础样式 - 暗色模式 */
html.io-black-mode .onenav-share-btn {
  background-color: var(--muted-bg-color, #24262a);
  border-color: var(--muted-bg-color-l, #1b1c1e);
  color: var(--main-color, #b4b8bf);
}

/* 分享按钮悬停效果 - 亮色模式 */
.onenav-share-btn:hover {
  background-color: var(--muted-bg-color, #e9ecef);
  color: var(--main-color, #333);
}

/* 分享按钮悬停效果 - 暗色模式 */
html.io-black-mode .onenav-share-btn:hover {
  background-color: var(--muted-bg-color-l, #1b1c1e);
  color: var(--main-color, #b4b8bf);
}

/* 计数器样式 - 亮色模式 */
.onenav-share-btn .btn-count {
  background-color: var(--muted-bg-color, #dee2e6);
  color: var(--main-color, #333);
}

/* 计数器样式 - 暗色模式 */
html.io-black-mode .onenav-share-btn .btn-count {
  background-color: var(--muted-bg-color-l, #1b1c1e);
  color: var(--main-color, #b4b8bf);
}

/* 分享面板 - 亮色模式 */
.onenav-share-panel {
  background-color: var(--main-bg-color, #fff);
  border-top-color: var(--muted-bg-color, #eee);
  box-shadow: 0 10px 20px var(--main-shadow, rgba(0, 0, 0, 0.1));
}

/* 分享面板 - 暗色模式 */
html.io-black-mode .onenav-share-panel {
  background-color: var(--main-bg-color, #2D2E2F);
  border-top-color: var(--muted-bg-color, #24262a);
  box-shadow: 0 10px 20px var(--main-shadow, rgba(0, 0, 0, 0.3));
}

/* 分享平台按钮 - 亮色模式 */
.share-platform {
  background-color: var(--muted-bg-color-l, #f8f9fa);
  border-color: var(--muted-bg-color, #ddd);
  color: var(--main-color, #333);
}

/* 分享平台按钮 - 暗色模式 */
html.io-black-mode .share-platform {
  background-color: var(--muted-bg-color, #24262a);
  border-color: var(--muted-bg-color-l, #1b1c1e);
  color: var(--main-color, #b4b8bf);
}

/* 关闭按钮 - 亮色模式 */
.close-share-panel {
  background-color: var(--muted-bg-color-l, #f8f9fa);
  border-color: var(--muted-bg-color, #e0e0e0);
  color: var(--main-color, #666);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 关闭按钮 - 暗色模式 */
html.io-black-mode .close-share-panel {
  background-color: var(--muted-bg-color, #24262a);
  border-color: var(--muted-bg-color-l, #1b1c1e);
  color: var(--main-color, #b4b8bf);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 关闭按钮悬停效果 - 亮色模式 */
.close-share-panel:hover {
  background-color: var(--muted-bg-color, #f0f0f0);
  border-color: var(--muted-bg-color, #d0d0d0);
  transform: translateY(2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 关闭按钮悬停效果 - 暗色模式 */
html.io-black-mode .close-share-panel:hover {
  background-color: var(--muted-bg-color-l, #1b1c1e);
  transform: translateY(2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* 关闭按钮图标样式 */
.close-share-panel .share-arrow-icon {
  margin-right: 5px;
  font-size: 16px;
  display: inline-block;
  transition: transform 0.3s ease;
}

/* 关闭按钮增强样式 */
.close-share-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px auto 0;
  transition: all 0.3s ease !important;
}

/* 特殊状态按钮保持原有颜色，但调整阴影以适应主题 */
.onenav-share-container .onenav-like-btn.liked,
.onenav-share-container .onenav-bookmark-btn.bookmarked,
.onenav-share-container .onenav-bookmark-btn.liked {
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3) !important;
}

.io-black-mode .onenav-share-container .onenav-like-btn.liked,
.io-black-mode .onenav-share-container .onenav-bookmark-btn.bookmarked,
.io-black-mode .onenav-share-container .onenav-bookmark-btn.liked {
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.5) !important;
}

/* 分享按钮特殊状态 */
.onenav-share-container .onenav-share-toggle-btn {
  box-shadow: 0 4px 8px rgba(79, 172, 254, 0.3) !important;
}

.io-black-mode .onenav-share-container .onenav-share-toggle-btn {
  box-shadow: 0 4px 8px rgba(79, 172, 254, 0.5) !important;
}

/* 平台图标颜色保持不变，但在暗色模式下增加对比度 */
.io-black-mode .share-platform .platform-icon {
  opacity: 0.9;
}