.cl-topbar {
	display: flex;
	align-items: center;
	height: 44px;
	width: 100%;
	position: relative;
	padding-top: env(safe-area-inset-top);

	&__content {
		width: 100%;
	}

	&__text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	&__title {
		font-size: 32rpx;
	}

	&__description {
		font-size: 22rpx;
		color: #999;
	}

	&__prepend,
	&__append {
		display: flex;
		align-items: center;
		height: 44px;
		position: absolute;

		/* #ifdef MP */
		& > view {
			display: flex;
		}
		/* #endif */
	}

	&__prepend {
		left: 0;
	}

	&__append {
		right: 0;
	}

	&__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 80rpx;
		font-size: 40rpx;

		&:active {
			opacity: 0.8;
		}

		.cl-icon-arrow-left {
			font-size: 44rpx;
		}
	}

	&.is-border {
		border-bottom: 1rpx solid #f7f7f7;
	}

	&.is-android {
		padding-top: 44rpx;

		&__prepend,
		&__append {
			top: 44rpx;
		}
	}

	&.is-fixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3000;
	}

	&.is-sticky {
		position: sticky;
		top: 0;
	}
}