.cl-banner {
	position: relative;

	uni-swiper,
	swiper,
	swiper-item {
		height: 100%;
	}

	.cl-banner-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;

		& > view,
		scoped-slots-default {
			height: 100%;
			width: 100%;
		}

		&__image {
			height: 100%;
			width: 100%;
			border-radius: $cl-banner-radius;
		}

		&__video {
			height: 100%;
			width: 100%;
		}
	}

	&--card {
		.cl-banner-item {
			width: 100%;
			transition: all 0.2s ease-in 0s;

			&.is-active {
				transform: none !important;
				transition: all 0.2s ease-in 0s;
			}
		}
	}

	&--chain {
		.cl-banner-item {
			width: calc(100% - 20rpx);
			margin: 0 10rpx;
		}
	}

	&--dot-round {
		.wx-swiper-dot,
		.a-swiper-dot,
		.uni-swiper-dot {
			background-color: #ddd;
			opacity: 0.6;
			width: 12rpx;
			height: 12rpx;
			border-radius: 12rpx;
			margin: 0 6rpx;
			border-width: 0;
		}

		.wx-swiper-dot-active,
		.a-swiper-dot-active,
		.uni-swiper-dot-active {
			background-color: #fff;
			opacity: 1;
			width: 26rpx;
		}
	}

	&--dot-circle {
		.wx-swiper-dot,
		.a-swiper-dot,
		.uni-swiper-dot {
			background-color: #ddd;
			opacity: 0.5;
			width: 10rpx;
			height: 10rpx;
			border-radius: 14rpx;
			margin: 0 2rpx;
			border-color: transparent;
			border-width: 2px;
			border-style: solid;
		}

		.wx-swiper-dot-active,
		.a-swiper-dot-active,
		.uni-swiper-dot-active {
			opacity: 1;
			border-color: $cl-color-primary;
		}
	}

	&--dot-square {
		.wx-swiper-dot,
		.a-swiper-dot,
		.uni-swiper-dot {
			background-color: #ddd;
			height: 12rpx;
			width: 14rpx;
			margin: 0 2rpx;
			border-radius: 0;
		}

		.wx-swiper-dot-active,
		.a-swiper-dot-active,
		.uni-swiper-dot-active {
			background-color: $cl-color-primary;
			width: 30rpx;
		}
	}

	&__btn {
		button {
			position: absolute;
			top: calc(50% - 30rpx);
			height: 60rpx;
			width: 60rpx;
			border-radius: 60rpx;
			border: 0;
			line-height: 60rpx;
			padding: 0;
			margin: 0;
			background-color: rgba(0, 0, 0, 0.4);
			color: #ddd;
			font-size: 32rpx;

			&::after {
				border: 0;
			}
		}

		&-prev {
			left: 20rpx;
		}

		&-next {
			right: 20rpx;
		}
	}
}