.cl-filter-bar__wrap {
	.cl-filter-bar__mask {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		opacity: 0;
		pointer-events: none;
		transition: all 0.3s ease-in-out;
		z-index: $cl-zIndex;
	}

	&.is-expand {
		.cl-filter-bar__mask {
			opacity: 1;
			pointer-events: auto;
		}
	}
}

.cl-filter-bar {
	display: flex;
	align-items: center;
	font-size: 26rpx;
	background-color: #fff;
	box-sizing: border-box;
	position: relative;
	border-radius: 24rpx 24rpx 0 0;
}

cl-filter-item {
	flex: 1;
}

.cl-filter-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	height: 80rpx;
	width: 100%;
	color: #727272;
	padding: 0 20rpx;
	box-sizing: border-box;

	&__label {
		margin-right: 4rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&__order {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 32rpx;

		&-asc,
		&-desc {
			margin: 2rpx 0;
			width: 0;
			height: 0;
			border: 5px solid transparent;
			border-radius: 6rpx;
		}

		&-asc {
			border-bottom-color: #ccc;
		}

		&-desc {
			border-top-color: #ccc;
		}

		&.is-asc {
			.cl-filter-item__order-asc {
				border-bottom-color: $cl-color-primary;
			}
		}

		&.is-desc {
			.cl-filter-item__order-desc {
				border-top-color: $cl-color-primary;
			}
		}
	}

	&__dropdown {
		&-icon {
			display: block;
			transition: transform 0.3s;
			font-size: 32rpx;
		}

		&-box {
			position: absolute;
			top: 80rpx;
			left: 0;
			max-height: 0;
			width: 100%;
			background-color: #fff;
			transition: max-height 0.3s;
			overflow: hidden;
			border-radius: 0 0 24rpx 24rpx;

			&__label {
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			&__empty {
				text-align: center;
				margin: 50rpx;
				color: #999;
			}

			&__btn {
				padding: 0 30rpx;
				margin: 30rpx 0;
			}

			&__list {
				max-height: 500rpx;
			}

			&.theme-default {
				.cl-filter-item__dropdown-box {
					&__item {
						display: flex;
						align-items: center;
						height: 80rpx;
						padding: 0 40rpx;

						.cl-icon-check {
							display: none;
						}

						&.is-checked {
							color: $cl-color-primary;

							.cl-icon-check {
								display: block;
							}
						}

						&.is-disabled {
							color: $cl-color-disabled;
						}
					}
				}
			}

			&.theme-grid {
				.cl-filter-item__dropdown-box {
					&__list {
						display: flex;
						flex-wrap: wrap;
						box-sizing: border-box;
						padding: 0 20rpx;
						margin-bottom: 20rpx;
					}

					&__item {
						display: inline-flex;
						align-items: center;
						text-align: center;
						height: 70rpx;
						background-color: #f6f7fa;
						border-radius: 10rpx;
						margin: 10rpx;
						padding: 0 10rpx;
						box-sizing: border-box;

						.cl-icon-check {
							display: none;
						}

						&.is-checked {
							color: $cl-color-primary;
							background-color: rgba($cl-color-primary, 0.1);
							font-weight: bold;
						}

						&.is-disabled {
							color: $cl-color-disabled;
						}
					}
				}
			}
		}
	}

	&.is-expand {
		.cl-filter-item__dropdown-icon {
			transform: rotate(180deg);
		}

		.cl-filter-item {
			&__dropdown-icon,
			&__label {
				color: $cl-color-primary;
			}

			&__dropdown-box {
				max-height: 596rpx;
				transition: max-height 0.3s;
			}
		}
	}

	&.is-only {
		position: relative;
		z-index: 9;
	}

	&.is-switch {
		color: $cl-color-primary;
	}

	&.is-disabled {
		color: $cl-color-disabled;
	}
}

.cl-filter-bar__wrap {
	&.is-expand {
		.cl-filter-bar {
			border-radius: 24rpx 24rpx 0 0;
		}
	}
}