@import '../../../style/index.less';
@prefixCls: eh-field-view-checkbox;
.@{prefixCls}-hor {
	&-info {
		display: flex;
		align-items: center;
		overflow: hidden;
		&-text {
			flex: auto;
			text-align: right;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	&-icon {
		flex: none;
		font-size: 23 * @hd;
		color: #B2B2B2;
	}
	&-user {
		display: flex;
		align-items: center;
		overflow: hidden;
		&-text {
			flex: auto;
			text-align: right;
		}
		&-imgs {
			flex: none;
			margin-left: 8 * @hd;
			height: 24 * @hd;
			position: relative;
		}
		&-img {
			position: absolute;
			width: 24 * @hd;
			height: 24 * @hd;
			border: 1 * @hd #ffffff solid;
			border-radius: 50%;
      object-fit: cover;
      object-position: 50% 50%;
		}
	}
}

.@{prefixCls}-ver {
	&-flexbox {
		margin: 0 -4 * @hd 42 * @hd;
		display: flex;
		&:last-child {
			margin-bottom: 28 * @hd;
		}
		&-item {
			flex: auto;
			margin: 0 4 * @hd;
			position: relative;
			vertical-align: top;
			&:after {
				display: block;
				content: ' ';
				padding-bottom: 100%;
			}
		}
	}
	&-item {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 100%;
		height: 100%;
		&-img {
			width: 100%;
			height: 100%;
			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;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

.@{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;
		text-align: left;
		font-size: 16 * @hd;
		line-height: 23 * @hd;
    &-text-tip {
      font-size: 12 * @hd;
      color: #7F7F7F;
    }
		&:last-child {
			border-bottom: none;
		}
	}
	&-user {
		display: flex;
		align-items: center;
		padding: 16 * @hd 0;
		border-bottom: 0.5 * @hd solid #e0e0e0;
		&:last-child {
			border-bottom: none;
		}
		&-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;
		}
	}
}
