@import '../../../style/index.less';
@prefixCls: eh-field-view-file;
.@{prefixCls}-hor {
	&-info {
		display: flex;
		align-items: center;
		overflow: hidden;
		&-text {
			flex: auto;
			text-align: right;
		}
		&-icon {
			flex: none;
			font-size: 23 * @hd;
			color: #B2B2B2;
		}
	}
}

.@{prefixCls}-ver {
	&-file {
		margin-bottom: 4 * @hd;
		padding: 12 * @hd;
		display: flex;
		align-items: center;
		background: #F8F8F8;
		&:last-child {
			margin-bottom: 0;
		}
		&-icon {
			flex: none;
			width: 42 * @hd;
			height: 42 * @hd;
			margin-right: 8 * @hd;
			img {
				width: 100%;
				height: 100%;
				vertical-align: top;
			}
		}
		&-content {
			flex: auto;
			overflow: hidden;
		}
		&-name {
			margin-bottom: 2 * @hd;
			font-size: 16 * @hd;
			color: #494949;
			line-height: 23 * @hd;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		&-detail {
			display: flex;
			font-size: 12 * @hd;
			color: #B2B2B2;
			line-height: 17 * @hd;
		}
		&-time {
			flex: auto;
		}
		&-delete {
			flex: none;
			margin-left: 12 * @hd;
			width: 20 * @hd;
			height: 20 * @hd;
			img {
				width: 100%;
				height: 100%;
				vertical-align: top;
				border-radius: 50%;
			}
		}
	}
}

.@{prefixCls}-modal {
	color: #494949;
	min-height: 50vh;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
	&-header {
		flex: none;
		position: relative;
		padding: 10 * @hd 16 * @hd;
		line-height: 35 * @hd;
		border-bottom: 0.5 * @hd solid #e0e0e0;
		.am-icon {
			position: absolute;
			left: 16 * @hd;
			top: 10 * @hd;
			width: 35 * @hd;
			height: 35 * @hd;
		}
		&-text {
			text-align: center;
			font-size: 16 * @hd;
			font-weight: 600;
		}
	}
	&-content {
		flex: auto;
		overflow-y: auto;
		padding-left: 16 * @hd;
	}
	&-item {
		padding: 16 * @hd 0;
		border-bottom: 0.5 * @hd solid #e0e0e0;
		display: flex;
		align-items: center;
		&:last-child {
			border-bottom: none;
		}
		&-icon {
			flex: none;
			width: 42 * @hd;
			height: 42 * @hd;
			margin-right: 8 * @hd;
			img {
				width: 100%;
				height: 100%;
				vertical-align: top;
			}
		}
		&-content {
			flex: auto;
			text-align: left;
			padding-right: 10 * @hd;
			overflow: hidden;
		}
		&-name {
			margin-bottom: 4 * @hd;
			font-size: 16 * @hd;
			color: #404040;
			line-height: 23 * @hd;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		&-detail {
			display: flex;
			font-size: 12 * @hd;
			color: #B2B2B2;
			line-height: 17 * @hd;
		}
		&-time {
			flex: auto;
		}
	}
}
