@import '../../../style/index.less';
@prefixCls: eh-field-view-radio;
.@{prefixCls}-hor {
	&-item {
		display: flex;
		align-items: center;
		&-text {
			flex: auto;
			text-align: right;
		}
		&-img {
			flex: none;
			margin-left: 8 * @hd;
			width: 24 * @hd;
			height: 24 * @hd;
			border-radius: 50%;
      object-fit: cover;
      object-position: 50% 50%;
		}
		&-icon {
			flex: none;
			font-size: 23 * @hd;
			color: #B2B2B2;
		}
	}
}

.@{prefixCls}-ver {
	&-item {
		display: inline-block;
		margin-bottom: 8 * @hd;
		width: 50 * @hd;
		&-img {
			width: 50 * @hd;
			height: 50 * @hd;
			border-radius: 50%;
      object-fit: cover;
      object-position: 50% 50%;
		}
		&-text {
			margin-top: 8 * @hd;
			font-size: 12 * @hd;
			color: #7F7F7F;
			text-align: center;
			line-height: 17 * @hd;
		}
	}
}

.@{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;
	}
	&-user {
		display: flex;
		align-items: center;
		padding: 16 * @hd 0;
		&-img {
			flex: none;
			width: 44 * @hd;
			height: 44 * @hd;
			border-radius: 50%;
      object-fit: cover;
      object-position: 50% 50%;
		}
		&-text {
			flex: auto;
			margin-left: 16 * @hd;
			font-size: 16 * @hd;
			color: #494949;
			line-height: 23 * @hd;
			text-align: left;
		}
	}
}
