// 公共微信视频号样式

// CSS 变量
:root {
	// 尺寸变量
	--channel-play-btn-size: 80rpx;
	--channel-play-btn-small-size: 60rpx;
	--channel-play-btn-icon-size: 40rpx;
	--channel-play-btn-icon-small-size: 30rpx;
	--channel-avatar-size: 60rpx;
	--channel-arrow-size: 24rpx;
	--channel-border-radius: 12rpx;
	--channel-stats-padding: 10rpx;
	--channel-info-wrap-padding: 10rpx 0;
	
	// 字体变量
	--channel-name-font-size: 28rpx;
	--channel-follow-font-size: 24rpx;
	--video-title-font-size: 28rpx;
	--video-title-small-font-size: 24rpx;
	--video-stats-font-size: 24rpx;
	--channel-stats-font-size: 20rpx;
	
	// 颜色变量
	--channel-name-color: #333;
	--channel-follow-color: #07c160;
	--video-title-color: #333;
	--video-title-small-color: #666;
	--video-stats-color: #999;
	--channel-stats-color: #fff;
	--channel-border-color: #f0f0f0;
	--channel-play-btn-bg: rgba(0, 0, 0, 0.4);
	--channel-stats-bg: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
	
	// 间距变量
	--channel-header-padding: 16rpx;
	--channel-avatar-margin-right: 12rpx;
	--channel-arrow-margin-left: 8rpx;
	--channel-name-margin-bottom: 4rpx;
	--video-title-margin-bottom: 8rpx;
}

// 响应式设计
@media (max-width: 375px) {
	:root {
		--channel-play-btn-size: 70rpx;
		--channel-play-btn-small-size: 50rpx;
		--channel-play-btn-icon-size: 35rpx;
		--channel-play-btn-icon-small-size: 25rpx;
		--channel-avatar-size: 50rpx;
		--channel-name-font-size: 24rpx;
		--video-title-font-size: 24rpx;
	}
}

@media (min-width: 750px) {
	:root {
		--channel-play-btn-size: 90rpx;
		--channel-play-btn-small-size: 70rpx;
		--channel-play-btn-icon-size: 45rpx;
		--channel-play-btn-icon-small-size: 35rpx;
		--channel-avatar-size: 70rpx;
		--channel-name-font-size: 32rpx;
		--video-title-font-size: 32rpx;
	}
}

// 播放按钮样式
.channel-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--channel-play-btn-size);
	height: var(--channel-play-btn-size);
	background-color: var(--channel-play-btn-bg);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;

	.play-icon {
		width: var(--channel-play-btn-icon-size);
		height: var(--channel-play-btn-icon-size);
	}
}

// 小尺寸播放按钮（用于列表）
.channel-play-btn.small {
	width: var(--channel-play-btn-small-size);
	height: var(--channel-play-btn-small-size);

	.play-icon {
		width: var(--channel-play-btn-icon-small-size);
		height: var(--channel-play-btn-icon-small-size);
	}
}

// 视频统计信息
.channel-stats {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--channel-stats-bg);
	padding: var(--channel-stats-padding);
	color: var(--channel-stats-color);
	font-size: var(--channel-stats-font-size);
}

// 视频信息容器
.channel-info-wrap {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--channel-info-wrap-padding);

	.channel-name {
		margin-bottom: var(--channel-name-margin-bottom);
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: var(--channel-name-font-size);
		font-weight: 500;
		color: var(--channel-name-color);
	}

	.video-title {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: var(--video-title-small-font-size);
		color: var(--video-title-small-color);
	}
}

// 视频标题
.video-title {
	font-size: var(--video-title-font-size);
	font-weight: 500;
	color: var(--video-title-color);
	margin-bottom: var(--video-title-margin-bottom);
	line-height: 1.4;
}

// 视频统计信息（非绝对定位版本）
.video-stats {
	font-size: var(--video-stats-font-size);
	color: var(--video-stats-color);
}

// 频道头部
.channel-header {
	display: flex;
	align-items: center;
	padding: var(--channel-header-padding);
	border-bottom: 1rpx solid var(--channel-border-color);

	.channel-avatar {
		width: var(--channel-avatar-size);
		height: var(--channel-avatar-size);
		border-radius: 50%;
		margin-right: var(--channel-avatar-margin-right);
	}

	.channel-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.channel-name {
			font-size: var(--channel-name-font-size);
			font-weight: 500;
			color: var(--channel-name-color);
			margin-bottom: var(--channel-name-margin-bottom);
		}

		.channel-follow {
			font-size: var(--channel-follow-font-size);
			color: var(--channel-follow-color);
		}
	}

	.channel-arrow {
		width: var(--channel-arrow-size);
		height: var(--channel-arrow-size);
		margin-left: var(--channel-arrow-margin-left);
	}
}