.cl-topbar {
	display: flex;
	align-items: center;
	height: $cl-topbar-height;
	width: 100%;
	position: relative;
	box-sizing: border-box;

	&__content {
		width: 100%;
	}

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

		text {
			width: 500rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	&__title {
		font-size: 14px;

		&:last-child {
			font-size: 16px;
		}
	}

	&__description {
		font-size: 12px;
		color: #999;
		line-height: 1;
	}

	&__prepend,
	&__append {
		display: flex;
		align-items: center;
		height: $cl-topbar-height;
		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: 22px;

		&:active {
			opacity: 0.8;
		}
	}

	&.is-fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

	&.is-border {
		border-bottom: $cl-border-width solid #f6f7fa;
	}

	&.is-ios {
		.cl-topbar__title {
			font-weight: bold;
		}
	}

	&.with-mp {
		/* #ifdef MP */
		padding-right: 180rpx;
		/* #endif */
	}
}