@charset "UTF-8";

//-----------------------------------------------------
// media list
//-----------------------------------------------------

$mediaFlexSwitch:    false !default;

$mediaImgSize:       60px 60px !default;
$mediaIndent:        10px !default;

$mediaRightSwitch:   true !default;
$mediaRightWidth:    60px !default;

$mediaVIconSwitch:   false !default;

.media-item{
	width: 100%;
	padding: 10px;
	position: relative;
	display: block;
	@if $mediaFlexSwitch{
		display: flex;
	}
	@if not $mediaFlexSwitch{
		padding-left: 20px + nth($mediaImgSize, 1);
		min-height: nth($mediaImgSize, 2) + 20px;
	}
	&:not(:first-of-type)::before{
		content: "";
		@include retina-one-px-border;
		left: $mediaIndent;
	}

	@if $activeStateSwitch{
		&:active,
		&:hover{
			background: $colorF;
		}
	}

	.item-img{
		@if not $mediaFlexSwitch{
			position: absolute;
			top: 10px;
			left: 10px;
		}
		@if $mediaFlexSwitch{
			margin-right: 10px;
		}
		width: nth($mediaImgSize, 1);
		height: nth($mediaImgSize, 2);
	}
	.item-bd{
		@if $mediaFlexSwitch{
			flex: 1;
			width: 1%;
		} 
		.bd-tt{
			font-weight: normal;
			@extend %ellipsis;
			// font-size: 16px;
		}
		.bd-txt{
			font-size: 12px;
			color: $color9;
		}
	}
	
}
.media-list{
	background: #fff;
	@extend %border-tb;	
}
.media-list--after-v{
	.media-item{
		padding-right: 30px;
		@extend %item-v-right;
	}
}

@if $mediaVIconSwitch{
	.media-list--icon-v{
		.media-item{
			@if not $mediaFlexSwitch {
				padding-right: 30px;
			}
			@if $mediaFlexSwitch {
				padding-right: 0;
			}
			.icon-v-right{
				width: 30px;
				height: 30px;
				color: #ccc;
				@if not $mediaFlexSwitch {
					position: absolute;
					top: 50%;
					right: 0;
					transform: translateY(-50%);
				}
			}
		}
	}
}

@if $mediaRightSwitch{
	.media-list--right{
		.media-item{
			padding-right: $mediaRightWidth + 10px;
			.item-right{
				position: absolute;
				top: 50%;
				right: 10px;
				transform: translateY(-50%);
				@if $mediaFlexSwitch {
					margin-left: 10px;
				}
			}
		}
	}
}