.cl-li {
	height: 100%;
	overflow: hidden;
	position: relative;

	&__search {
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
		background-color: #fff;
		box-sizing: border-box;
		padding: 15rpx 20rpx;
		box-sizing: border-box;

		.cl-input {
			background-color: #f8f8f8;
		}
	}

	&__scroller {
		height: calc(100% - 100rpx);
	}

	&__header {
		background-color: #f7f7f7;
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		position: sticky;
		top: 0;
		z-index: 9;

		&.is-active {
			text {
				color: #000;
			}
		}
	}

	&__container {
		background-color: #fff;
	}

	&__item {
		display: flex;
		align-items: center;
		min-height: 80rpx;
		font-size: 26rpx;
		box-sizing: border-box;
		padding: 20rpx;

		&:last-child {
			border-bottom: 0;
		}

		&:active {
			background-color: #eee;
		}
	}

	&__alert {
		position: absolute;
		top: 0;
		right: 80rpx;
		bottom: 0;
		margin: auto;
		background: rgba(0, 0, 0, 0.5);
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		color: #fff;
		line-height: 100rpx;
		text-align: center;
		font-size: 48rpx;
		z-index: 100;
	}

	&__bar {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		right: 20rpx;
		top: 0;
		height: 100%;
		font-size: 24rpx;
		z-index: 101;

		&-block {
			padding: 5rpx 10rpx;

			text {
				display: inline-block;
				height: 30rpx;
				width: 30rpx;
				line-height: 30rpx;
				text-align: center;
				border-radius: 30rpx;
			}

			&.is-active {
				text {
					background-color: #000;
					color: #fff;
				}
			}
		}
	}
}