.brush-exercise-directory-swipertab {
	background: #f5f5f5;

	.van-tabs__nav {
		background: #f5f5f5;
	}

	.van-tabs--line .van-tabs__wrap {
		height: vw(28);
	}

	.van-tab:nth-of-type(1) {
		margin-left: vw(16);
	}

	.van-tab:nth-last-of-type(1) {
		margin-right: vw(16);
	}

	.van-tab {
		height: vw(28);
		margin-right: vw(32);
		padding: 0 vw(16);
		color: #666;
		background: #e2e2e2;
		border-radius: vw(14);
	}

	.van-tabs__wrap {
		overflow: visible;
	}

	.van-tabs__line {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 0 !important;
		height: 0;
		background: transparent;
		border-color: transparent transparent #fff;
		border-style: solid;
		border-width: 0 8px 8px;
		box-shadow: 0 0;
	}

	.van-tab--active {
		color: #fff;
		background: $primary-color;
		border-radius: vw(14);
	}

	.brush-exercise-warp {
		position: relative;
	}

	.brush-exercise-scroll {
		padding: 16px 0;
		padding-left: vw(16);
		overflow-x: scroll;
		white-space: nowrap;

		&::-webkit-scrollbar {
			display: none;
			background-color: transparent;
		}

		button {
			display: inline-block;
			height: 28px;
			margin-right: vw(32);
			padding: 0 vw(16);
			color: #666;
			font-size: vw(14);
			background: #e2e2e2;
			border: none;
			border-radius: vw(14);
			outline: none;
		}

		.activeTag {
			position: relative;
			color: #fff;
			text-align: center;
			background: $primary-color;
			border-radius: vw(12);

			&::after {
				position: absolute;
				bottom: vw(-16);
				left: 50%;
				z-index: 1;
				width: 0 !important;
				height: 0;
				margin-left: -8px;
				background: transparent;
				border-color: transparent transparent #fff;
				border-style: solid;
				border-width: 0 8px 8px;
				-webkit-box-shadow: 0 0;
				box-shadow: 0 0;
				content: '';
			}
		}
	}
}
