// @import "sinosun-ui/lib/style/themes/default.less";
// @import "sinosun-ui/lib/style/mixins/index.less";

.sn-self-add {
	.snself-add,
	.snself-del {
		color: @theme-color;
		font-size: .44rem;
	}

	.snself-del {
		color: @danger-color;
	}

	.detail-line {
		position: relative;
		.right-slot {
			position: absolute;
            right: .8rem;
            top: .24rem;
		}
		.self-icon-con {
			position: absolute;
			top: 0;
			right: 0;
			padding: 0.2rem 0.3rem 0.2rem 0;
			z-index: 5;
			background: transparent;
			overflow: visible;
			justify-content: flex-end;
			&:after {
				display: none;
			}
		}
	}

	.self-add-wrap {
		.self-add-apply-line {
			.sn-list-item {
				align-items: flex-start;
			}
		}
	}
	.btn-wrap {
		display: flex;
		justify-content: space-around;
		background: @body-color;
		padding: 0.3rem 0;
	}
	.detail-add.sn-button.sn-button-default {
		&:after {
			border-color: @text-color-3;
		}
	}
	.btn-wrap {
		display: flex;
		justify-content: space-around;
		background: @body-color;
		padding: 0.3rem 0;
		.detail-add {
			display: flex;
			align-items: center;
			width: auto;
			height: 0.64rem;
			line-height: initial;
			font-size: 0.3rem !important;
			text-align: center;
			color: @text-color;
			background: @background-white;
			margin: 0 auto;
			cursor: pointer;
			span {
				display: flex;
				align-items: center;
				height: 100%;
			}
		}
	}
	.no-padding {
        .detail-line {
            .right-slot {
                right: .3rem;
            }
        }
	}

	@media screen and (min-width: @screen-sm) {
		.no-padding {
			.self-add-wrap {
				.detail-line {
					.right-slot {
						right: 28px !important;
						top: 20px;
					}
				}
			}
		}
		.detail-line {
			.self-icon-con {
				z-index: 10;
				position: absolute;
				right: 15px;
				top: 0;
				padding: 5px;
				height: calc(~'30px + 0.24rem');
				display: inline-flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				color: @theme-color;
			}
		}
		// 自增控件内部组件样式控制
		.self-add-wrap {
			.sn-list-item {
				.sn-border {
					padding-right: 30px !important;
					&.user-name {
						padding-right: 50px !important;
					}
					&.select-value {
						padding-right: 48px !important;
					}
					&.has-right-slot {
						padding-right: 60px !important;
					}
				}
				.right-slot {
					position: absolute !important;
					right: 48px !important;
					top: 20px;
				}
				.sn-list-item-right-icon {
					position: absolute !important;
					right: 48px !important;
				}
			}
			// 详情
			.self-add-detail {
				.sn-border {
					padding-right: 10px !important;
					&.user-name {
						padding-right: 30px !important;
					}
					&.select-value {
						padding-right: 25px !important;
					}
					&.has-right-slot {
						padding-right: 40px !important;
					}
				}
				.right-slot {
					right: 25px !important;
				}
				.sn-list-item-right-icon {
					right: 25px !important;
				}
			}
		}

		.self-add-detail {
			.self-icon-con {
				right: 0;
			}
		}
		.btn-wrap {
			background: @background-white;
			padding: 12px 0;
			.detail-add {
				height: 28px;
				line-height: 28px;
				font-size: 14px !important;
				text-align: center;
				background: @background-white;
				margin: 0 auto;
			}
		}
	}
}
