.y-tabs {
	position: relative;
	display: block;

	// 标签栏垂直方位下的根容器样式
	&.is-vertical {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: flex-end;
		flex: 1;

		// 垂直时标签栏scroll-view的子项垂直排列
		.y-tabs__scroll {
			flex-direction: column;
		}
	}

	// 区域滚动下的滚动导航
	&.is-areaScroll.is-scrollNav {
		display: flex;
		height: 100vh;
		flex-direction: column;

		// 标签栏不收缩
		.y-tabs__wrap {
			flex-shrink: 0;
		}

		.y-tabs__track,
		.y-tabs__content-scrollview {
			height: 100%;
		}
	}

	// 区域滚动下的侧边栏导航
	&.is-areaScroll.is-sidebarNav {
		display: flex;
		height: 100vh;
		flex-direction: row;

		.y-tabs__scroll {
			height: 100%;
		}

		// 标签栏不收缩
		.y-tabs__wrap {
			flex-shrink: 0;
		}

		.y-tabs__track,
		.y-tabs__content-scrollview {
			height: 100%;
		}
	}
}

// 依赖元素
.y-tabs__depend {
	position: absolute;
	top: 0;
	left: 0;
	height: 1px; //必须保证有高度，否则observer无效
	width: 100%;
}

// 透明标签栏所需的依赖元素
.y-tabs__depend--transparent {
	position: absolute;
	top: 0;
	left: 0;
	height: 1px; //必须保证有高度，否则observer无效
	width: 1px;
}

// 模拟标签栏吸顶时设置offset时距屏幕顶部的元素
.y-tabs__depend--offset {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	height: 1px;
}

// 标签栏占位元素
.y-tabs__placeholder {
	position: relative;
}

// 标签垂直展示且吸顶时，标签栏占位元素不伸缩
.y-tabs.is-fixed.is-vertical .y-tabs__placeholder {
	flex-shrink: 0;
}

// 文字省略
.y-tabs__ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// 导航区域包裹层
.y-tabs__wrap {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	visibility: visible;
	background: #fff;
	touch-action: none;

	// 标签栏垂直展示时包裹层样式
	&.is-vertical {
		width: 100px;
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
	}

	// 粘性定位布局下的导航区域包裹层
	&.is-fixed {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 99;
	}

	// 标签垂直展示且吸顶时，给定bottom，否则scroll-view不会滚动
	&.is-fixed.is-vertical {
		bottom: 0;
	}

	// 透明的导航区域包裹层
	&.is-transparent {
		background: rgba(255, 255, 255, 0);
	}

	// 标签栏水平时按钮风格的包裹层
	&.is-button:not(.is-vertical),
	&.is-line-button:not(.is-vertical) {
		padding: 0 8px;
	}
}

// scroll-view组件样式
.y-tabs__scroll {
	position: relative;
	width: 100%;
	white-space: nowrap; // 使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式
	flex-direction: row;
}

// 条件编译不放在样式中，vue3无效

// H5、APP端去滚动条
// 小程序端会报：Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.
/* #ifdef H5 || APP */
.y-tabs__scroll ::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
	-webkit-appearance: none;
	background: transparent;
	color: transparent;
}
/* #endif */

// IOS 13 以下的系统，当滚动区域设置了-webkit-overflow-scrolling: touch;时（必须设置，否者几乎无法滚动），::-webkit-scrollbar 相关属性会失效，iOS 13 已经修复了此Bug。
// 小程序端: 去除 scroll-view 组件的滚动条
/* #ifndef H5 || APP  */
::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
	-webkit-appearance: none;
	background: transparent;
	color: transparent;
}
/* #endif */

// 导航区域
.y-tabs__nav {
	position: relative;
	box-sizing: border-box;
	user-select: none;
	flex: 1;
	display: flex;
	
	&.is-shrink{
		display: inline-flex;
	}
	
	// 卡片风格
	&.is-card {
		margin: 6px 16px;
		border-radius: 4px;
		box-sizing: border-box;
		border: 1px solid #0022ab;
	}

	// 标签栏垂直时导航区域样式
	&.is-vertical {
		flex-direction: column;
		height: auto;

		.y-tab {
			flex: unset;
		}
	}

	// 标签左侧、右侧的补充区域
	&-left,
	&-right {
		position: relative;
		display: inline-flex;
		white-space: nowrap;
	}
}

// 导航标签
.y-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 40px;
	font-size: 28rpx;
	color: #646566;
	text-align: center;
	padding: 0 4px;
	flex: 1;
	cursor: pointer;
	// webkit的css扩展：1、-webkit-tap-highlight-color:这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。有事件监听的元素被点击的时候会被高亮显示，比如我的android上表现为一个蓝框加上半透明的背景
	-webkit-tap-highlight-color: transparent;
	// transition-duration: 0.2s;
	// transition-property: background;
	flex-shrink: 0;
	z-index: 2;

	// 选中状态
	&.is-active {
		color: #323233;
		font-weight: 500;
	}

	// 禁用状态
	&.is-disabled {
		color: #c8c9cc !important;
		cursor: not-allowed;
	}

	// 收缩布局
	&.is-shrink {
		flex: none;
		padding: 0 8px;
	}

	//卡片风格
	&.is-card {
		height: 28px;
		line-height: 28px;
	}
}

// 标题区域
.y-tab__title {
	overflow: hidden;
	display: flex;
	align-items: center;
	height: inherit;
}

// 标题区域垂直排列
.y-tab__title--top,
.y-tab__title--bottom {
	flex-direction: column;
}

// 标题文字
.y-tab__text {
	position: relative;
	display: block;
	line-height: 1.2;
	order: 2;
	white-space: nowrap; //字节会设置white-space:normal
}

// 标签垂直展示时，未达到文字超出隐藏的条件时
.y-tabs__nav.is-vertical .y-tab__text:not(.y-tabs__ellipsis) {
	white-space: normal;
}

// 使用order排序
.y-tab__text--left,
.y-tab__text--top {
	order: 0;
}

// 标题图标/图片包裹层
.y-tab__icons {
	display: flex;
	align-items: center;
	order: 1;
	z-index: 1;
}

//标题图片
.y-tab__image {
	width: 20px;
	height: 20px;
}

// 右上角信息区域
.y-tab__info {
	display: inline-flex;
	position: relative;

	&--dot,
	&--badge {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
		background-color: #e53935;
		transform-origin: 100%;
	}

	// 小红点
	&--dot {
		width: 6px;
		height: 6px;
		border-radius: 100%;
		transform: translate(0%, -180%);
	}

	// 徽标
	&--badge {
		line-height: 13px;
		min-width: 18px;
		border-radius: 18px;
		padding: 0 2px;
		transform: translate(0%, -120%);
		font-size: 18rpx;
		font-weight: 500;
		text-align: center;
		color: #fff;
	}
}

// 底部条滑块
.y-tabs__bar {
	position: absolute;
	display: inline-flex;
	left: 0;
	z-index: 1;

	width: 20px;
	height: 3px;
	border-radius: 3px;
	background-color: #0022ab;

	// line风格的滑块
	&.is-line {
		z-index: 2; //z-index与y-tab一样,避免被遮挡

		// 标签水平展示时
		&:not(.is-vertical) {
			bottom: 3px;
			width: 20px;
			height: 3px;
			border-radius: 3px;
		}

		// 标签垂直展示时
		&.is-vertical {
			top: 0;
			left: 3px;
			width: 3px;
			height: 20px;
			border-radius: 3px;
		}
	}

	// button、line-button风格的滑块
	&.is-button,
	&.is-line-button {
		// top: 0;
		justify-content: center;
		align-items: center;
		border-radius: 26px;

		// 标签水平展示时
		&:not(.is-vertical) {
			height: calc(100% - 8px);
			bottom: 4px;
		}

		// 标签垂直展示时
		&.is-vertical {
			width: calc(100% - 8px);
			height: calc(100% - 8px);
		}
	}

	// 线性按钮风格的滑块
	&.is-line-button {
		background-color: transparent;
		border: 2rpx solid transparent;
	}
}

// 标签内容
.y-tabs__content {
	display: block;
	position: relative;
	overflow: hidden; //会导致uni-data-select无法撑开显示下拉选项,最好给pane中的内容设置一个高度(如果包裹select的父元素都没有设置relative，则不会裁剪absolute属性的元素)
	// 标签栏垂直展示，内容减去标签栏默认宽度
	&.is-vertical {
		width: 100%;
	}
}
// 标签内容的滑动轨道容器
.y-tabs__track {
	position: relative;
	display: flex;
	width: 100%;
	will-change: left;

	// 滚动导航模式下内容卡片垂直排列
	&.is-scrollspy {
		flex-direction: column;
	}
}

// 标签内容卡片
.y-tab__pane {
	flex-shrink: 0;
	box-sizing: border-box;
	width: 100%;
	height: 0;
	position: relative;
	flex-direction: row;
	display: block;
	visibility: visible;

	// 选中时
	&.is-active {
		height: auto;
	}
	// 滚动导航
	&.is-scrollspy {
		height: auto;
	}
}
.y-tab__pane--wrap {
	position: relative;
}
// 区域滚动下的标签内容scroll-view
.y-tabs__content-scrollview {
	flex-direction: column;
}
