@import '../../../style/index.less';
@prefixCls: eh-field-view-image;
.@{prefixCls}-hor {
	&-value {
		display: flex;
		justify-content: flex-end;
		> span {
			margin-left: 2 * @hd;
		}
	}
	&-item {
		flex: 1;
		position: relative;
		vertical-align: top;
		max-width: 56 * @hd;
		border-radius: 2 * @hd;
		&:after {
			display: block;
			content: ' ';
			padding-bottom: 100%;
		}
		.@{prefixCls}-hor-image {
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			width: 100%;
			height: 100%;
			display: inline-block;
		}
		&-mask {
			position: absolute;
			top: 50%;
			left: 0;
			z-index: 1;
			transform: translateY(-50%);
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.30);
			color: #ffffff;
			font-size: 14 * @hd;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	&-image {
		background-size: cover;
		background-position: 50% 50%;
	}
}

.@{prefixCls}-ver {
	&-flexbox {
		margin: 0 -2 * @hd;
		display: flex;
	}
	&-item {
		flex: auto;
		margin: 0 2 * @hd 4 * @hd;
		position: relative;
		vertical-align: top;
		background-size: cover;
		background-position: 50% 50%;
		&:after {
			display: block;
			content: ' ';
			padding-bottom: 100%;
		}
	}
}

.@{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: 16 * @hd;
		text-align: left;
	}
	&-flexbox {
		margin: 0 -2 * @hd;
		display: flex;
	}
	&-item {
		flex: auto;
		margin: 0 2 * @hd 4 * @hd;
		position: relative;
		vertical-align: top;
		background-size: cover;
		background-position: 50% 50%;
		&:after {
			display: block;
			content: ' ';
			padding-bottom: 100%;
		}
	}
}
