// @import "sinosun-ui/lib/style/themes/default.less";
// @import "sinosun-ui/lib/style/mixins/index.less";

@prefix-cls: ~'@{sino-prefix}-relate-list';

.@{prefix-cls} {
	background: @background-white;
	&-DETAIL {
		box-shadow: none !important;
		padding: 0 !important;
		margin: 0;
		border: none;
		background: @background-white;
		.sn-list-item {
			// padding: 0;
			font-size: 0.3rem;
			&:after {
				display: none;
			}
		}
	}
	// 剔除
	&-detail {
		.@{prefix-cls}-head {
			justify-content: flex-start;
		}

		.@{prefix-cls}-info {
			flex: 1;
			display: flex;
			justify-content: space-between;
		}
	}
	.sn-list-item {
		.sn-list-item-title {
			text-align: left;
		}
		.title-align-right {
			text-align: right !important;
			& + .sn-list-item-value {
				padding-left: 0.3rem;
			}
		}
		.sn-relate-list-info {
			padding: 0;
			.sn-relate-list-tip {
				text-align: left;
				color: @text-color-5;
				&.has-value {
					color: @text-color;
				}
			}
		}
	}

	.@{prefix-cls}-icon {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		i.sn-icon {
			font-size: .44rem;
		}
		.transform-up {
			transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0) rotate(135deg) !important;
		}
	}
	.@{prefix-cls}-info {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.@{prefix-cls}-tip {
			color: @text-color;
		}
	}
	// 剔除
	&-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;

		.@{prefix-cls}-title {
			text-align: left;
			color: @text-color;
			width: 1.9rem;
			padding-right: 0.1rem;
		}

		.@{prefix-cls}-info {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.@{prefix-cls}-tip {
				color: @text-color;
			}

			.@{prefix-cls}-icon {
				width: 0.58rem;
				height: 0.4rem;
				margin-left: 0.14rem;
				background-size: 0.6rem 0.6rem;
				text-align: right;
				display: inline-block;
				vertical-align: middle;
				cursor: pointer;
				i.sn-icon {
					font-size: .44rem;
				}
			}

			.transform-up {
				transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0) rotate(135deg) !important;
			}
		}
	}
	// 列表
	&-con {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		&.expand {
			display: none;
		}

		.@{prefix-cls}-item {
			position: relative;
			padding-right: 0.16rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.@{prefix-cls}-item-name {
				margin: 0.1rem 0;
				display: block;
				color: @success-color;
				border-radius: 0.1rem;
				font-size: @font-size-base;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			em {
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}
			.sn-relate-list-item-del {
				padding-left: 0.2rem;
				color: @danger-color;
				font-size: @font-size-base;
			}
		}
	}
	// 详情列表
	&-DETAIL {
		// 列表
		.@{prefix-cls}-con {
			.@{prefix-cls}-item {
				.@{prefix-cls}-item-name {
					font-size: 0.3rem;
				}
			}
		}
	}
	// 移动端
	@media screen and (max-width: @screen-sm) {
		.relate-list-item {
			.sn-list-item-title {
				flex-basis: 0 !important;
				padding-right: 0 !important;
			}
		}
		.@{prefix-cls}-item {
			width: 100%;
			flex-basis: 100%;
		}
		// 距顶部距离
		&-con {
			padding-top: 0.1rem;
		}
	}
	// pc
	@media screen and (min-width: @screen-sm) {
		&-DETAIL {
			.sn-list-item {
				font-size: 14px;
				.sn-list-item-title {
					line-height: 2;
				}
			}
		}
		&-APPLY {
			margin-bottom: 0;
			.sn-list-item {
				.sn-list-item-value {
					height: auto;
					line-height: 2;
				}
			}
			.@{prefix-cls}-con {
				padding-left: 10px;
			}
		}
		.sn-list-item {
			.sn-list-item-value {
				height: auto;
				line-height: 2;
			}
		}
		.relate-list-item {
			.sn-list-item-value {
				// margin-left: 0.2rem;
			}
		}
		.@{prefix-cls}-icon {
			position: absolute;
			height: 30px;
			right: 20px !important;
		}
		// 剔除
		&-head {
			.@{prefix-cls}-title {
				width: 100px;
				padding-right: 14px;
				text-align: right;
			}
		}
		// 列表
		&-con {
			display: flex;
			flex-wrap: wrap;

			.@{prefix-cls}-item {
				position: relative;
				width: 50%;
				flex-basis: 50%;

				.@{prefix-cls}-item-name {
					margin: 0;
					font-size: 14px;
				}
			}
		}
		// 详情列表
		&-DETAIL {
			// 列表
			.@{prefix-cls}-con {
				.@{prefix-cls}-item {
					.@{prefix-cls}-item-name {
						font-size: 14px;
					}
				}
			}
		}
	}
	// pc中屏
	@media screen and (min-width: @screen-md) {
		// 列表
		&-con {
			.@{prefix-cls}-item {
				width: 50%;
				flex-basis: 50%;
			}
		}
	}
	// pc大屏
	@media screen and (min-width: @screen-lg) {
		// 列表
		&-con {
			.@{prefix-cls}-item {
				width: 33.333%;
				flex-basis: 33.33%;
			}
		}
	}
}

// 移动端
@media screen and (max-width: @screen-sm) {
    // #relate-list {
    .sn-relate-list-APPLY {
        .relate-list-item {
            .sn-relate-list-item {
                height: 0.87rem;
                padding-left: 0.3rem;
                padding-right: 0.34rem;
                border-bottom: 0.01rem solid @border-color-3;
            }
            .sn-list-item-title {
                margin-right: 0;
            }
        }
    }
}
// }
#relate-list {
    .relate-list-item {
        padding: 0 !important;
    }

    .sn-relate-list-con {
        padding: 0;
    }
}
.sn-relate-list-item-name {
    cursor: pointer;
    text-align: left;
}