/* ============================================================
   右侧悬浮侧边栏
   结构见 common/sidebar-right.njk, 由 layouts/base.njk 全站统一 include.
   桌面端: 贴右边缘垂直居中, 依次 WhatsApp / E-mail / Contact us / 返回顶部.
   窄屏:   只保留返回顶部.
   ============================================================ */

.baiao-fixedbar {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);

	/* 低于 .top 头部的 999, 滚动时不会被固定头部盖住 */
	z-index: 900;

	width: 56px;

	background: #fff;
	border: 1px solid #e5e5e5;
	border-right: 0;
	border-radius: 8px 0 0 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}


/* 单个入口: 图标居中 */
.baiao-fixedbar-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 52px;

	color: #17365d;
	text-decoration: none;
	cursor: pointer;

	transition: background-color .2s ease, color .2s ease;
}

/* 相邻入口之间一条细分隔线 */
.baiao-fixedbar-item + .baiao-fixedbar-item {
	border-top: 1px solid #f0f0f0;
}

.baiao-fixedbar-item:hover {
	background: #17365d;
	color: #fff;
}

.baiao-fixedbar-item svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: currentColor;
}


/* ============================================================
   悬停提示气泡: 出现在侧边栏左侧
   ============================================================ */

.baiao-fixedbar-tip {
	position: absolute;
	right: 100%;
	top: 50%;
	margin-right: 10px;
	transform: translateY(-50%);

	padding: 5px 10px;

	background: #17365d;
	color: #fff;

	font-size: 13px;
	line-height: 18px;
	white-space: nowrap;

	border-radius: 4px;

	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}

.baiao-fixedbar-item:hover .baiao-fixedbar-tip {
	opacity: 1;
	visibility: visible;
}


/* ============================================================
   返回顶部
   默认不显示, 页面向下滚动超过一屏后由脚本加上 is-scrolled 才出现.
   这样收起状态不会露出一个点不动的死按钮.
   ============================================================ */

.baiao-fixedbar-item.is-totop {
	display: none;
}

.baiao-fixedbar.is-scrolled .baiao-fixedbar-item.is-totop {
	display: flex;
}


/* ============================================================
   矮视口避让
   资料页 (406 生成的页面) 右上角有一个 position:fixed 的下载按钮 .ds-download,
   固定在 top: 120px 附近. 视口够高时本侧边栏垂直居中, 与它不在同一高度;
   视口变矮后居中位置会上移并可能压住它, 所以矮视口改为贴底排列.
   只调本组件的定位, 不动资料页下载按钮的任何规则.
   ============================================================ */

@media (max-height: 560px) {
	.baiao-fixedbar {
		top: auto;
		bottom: 16px;
		transform: none;
	}
}


/* ============================================================
   窄屏 (手机)
   只保留返回顶部, 联系方式图标整条隐藏.
   ============================================================ */

@media (max-width: 767px) {
	.baiao-fixedbar {
		width: 44px;
	}

	/* 联系方式三项在窄屏一律不显示 */
	.baiao-fixedbar-item:not(.is-totop) {
		display: none;
	}

	.baiao-fixedbar-item.is-totop,
	.baiao-fixedbar.is-scrolled .baiao-fixedbar-item.is-totop {
		display: flex;
		height: 44px;
	}

	/* 触屏没有悬停, 气泡无意义 */
	.baiao-fixedbar-tip {
		display: none;
	}
}