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

.comp-bank-list {
	width: 100%;
	.bank-list-title-item:after {
		display: block;
	}
	.select-placeholder {
		color: @placeholder-color;
	}
}
.sn-bank-list-popup {
	width: 100%;
	.search-container {
		position: relative;
		z-index: 1;
		padding: 0.2rem 0;
		background: @background-white;
	}
	.atozshow {
		display: block;
		position: fixed;
		width: 0.8rem;
		height: 0.8rem;
		z-index: 10;
		left: 50%;
		top: 50%;
		background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), @background-white;
		color: @color-white;
		line-height: 0.8rem;
		text-align: center;
		font-size: 0.36rem;
	}

	.bank-list-con {
		overflow-x: hidden;
		overflow-y: auto;
		font-size: @font-size-base;
		.bank-list-item {
			display: flex;
			align-items: center;
			.sn-list-item-title {
				padding-left: 0.3rem;
			}
		}
		.sn-list-item {
			padding-right: 0.6rem;
			&::after {
				left: 1.2rem;
				right: 0;
			}
			&.active {
				.sn-icon {
					padding-right: 0.2rem;
					color: @theme-color;
				}
			}
		}
		.list-item-index {
			padding-top: 0;
			padding-bottom: 0;
			.sn-list-item-title {
				background: @body-color;
				padding-left: 0.3rem;
				line-height: 0.6rem;
			}
		}
		.noheight {
			padding: 0;
			pointer-events: none;
			.sn-list-item-title {
				color: @text-color-3;
				font-size: 0.26rem;
			}
			&::after {
				display: none;
			}
		}
	}
	.bank-icon {
		width: 0.6rem;
	}
	.sn-bank-list-nav {
		position: absolute;
		z-index: 600;
		right: 0.1rem;
		top: 0;
		display: flex;
		align-items: center;
		background: transparent;
		&-item {
			border-radius: 0.28rem;
			display: block;
			width: 0.28rem;
			height: 0.28rem;
			color: @text-color-2;
			text-align: center;
			touch-action: none;
			font-size: 0.2rem;
			display: flex;
			align-items: center;
			justify-content: center;
			&.active {
				background: @theme-color;
				color: @color-white;
			}
		}
	}

	@media screen and (min-width: @screen-sm) {
		.sn-bank-list-nav {
			right: 10px;

			&-item {
				cursor: pointer;
			}
		}
	}

	@media screen and (min-width: @screen-md) {
		.sn-bank-list-nav {
			right: 20px;
		}
	}

	@media screen and (min-width: @screen-lg) {
		.sn-bank-list-nav {
			right: calc(~'50% - @{screen-lg}/2 + 20px');
		}
	}
}