@import (reference) 'dingtalk-theme/dingtalk-x/mob.less';

.descriptions {

	&-title {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		

		&-left {
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-weight: 600;
			font-size: 14px;
			line-height: 22px;
		}

		&-right {
			font-size: 12px;
			line-height: 20px;
			color: @common_level2_base_color;
		}
	}

	&-grid {
		display: flex;
		flex-flow: row wrap;
		margin-left: -6px;
		margin-right: -6px;

		&-col {
			padding: 0 6px;
			display: flex;

			&-left {
				color: @common_level2_base_color;
			}

			&-right {
				flex: 1;
			}
		}
	}



	&-card {
		display: flex;
		align-items: center;
		padding: 4px 8px;
		border-radius: 5px;
		margin-bottom: 8px;


		&-ssim {
			display: flex;
			align-items: center;
			padding: 4px 8px;
			border-radius: 5px;
			margin-bottom: 8px;
			position: relative;

			&-avatar {
				min-width: 64px;
				min-height: 64px;
				max-width: 64px;
				max-height: 64px;
				margin-right: 8px;
				font-size: 18px;

				display: flex;
				align-items: center;
				justify-content: center;
			}

			&-img {
				min-width: 50px;
				min-height: 50px;
				max-width: 50px;
				max-height: 50px;
			}

			&-title {
				height: 20px;
				background: #fce5e8;
				position: absolute;
				left: 0;
				top: 0;
				border-radius: 10px 0px 10px 0px;
				text-align: LEFT;
				color: #b54559;
				line-height: 20px;
				font-size: 12px;
				padding: 0 8px;
			}
		}

		&-files {
			display: flex;
			flex-flow: row wrap;
			margin-top: -8px;

			&-item {
				margin-top: 8px;
				margin-right: 16px;
			}
		}

		&-blue {
			background-color: rgba(0, 127, 255, 0.1);
		}

		&-orange {
			background: rgb(255, 243, 239, 0.1);
		}

		&-red {
			background: #fffafc;
			border: 1px solid rgba(244, 228, 231, 0.7);
			border-radius: 10px;
		}

		&-avatar {
			min-width: 34px;
			min-height: 34px;
			max-width: 34px;
			max-height: 34px;
			margin-right: 8px;
			border-radius: 50%;
			font-size: 18px;
			display: flex;
			align-items: center;
			justify-content: center;
			&-blue {
				background: linear-gradient(138deg, #007fff 0%, #0062ff 100%);
			}
			&-orange {
				background: linear-gradient(135deg, #ff713d 0%, #ff5b1f 100%);
			}
		}

		&-img {
			min-width: 18px;
			min-height: 18px;
			max-width: 18px;
			max-height: 18px;
		}
	}
}