//JavaScript插件样式
//弹出层
%popup-1 {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#{$V}popup {
	@extend %popup-1;

	position: fixed;
	z-index: $zindex-popup;

	&-mask {
		@extend %popup-1;

		position: absolute;
		z-index: 1;
	}
	&-wrapper {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 2;
	    transform: translate(-50%, -50%);
	}
	&-inner {
		display: block;
		text-align: center;
		position: relative;
	}
	&-close {
		opacity: .5;
		&:hover {
			opacity: 1;
		}
	}
	&-button-wrap {
		height: rem(46);
		border-radius: 0 0 rem(13) rem(13);
		position: relative;
		text-align: center;
		display: flex;

		&:after {
		    width: 100%;
		    height: rem(1);
		    position: absolute;
		    top: - rem(1);
		    left: 0;
		    z-index: 1;
		    display: block;
		    content: ' ';
		    background-color: rgba($--black, .15);
		}
	}
	&-button {
		width: 50%;
		max-width: 100%;
		height: rem(46);
		line-height: rem(46);
		padding: 0 rem(5);
		color: $--blue-light;
		font-size: 1rem;
		display: inline-block;
		position: relative;
		cursor: pointer;
		text-align: center;
		flex-basis: 0;
		flex-grow: 1;
		@include ellipsis;

		&:hover {
			background-color: rgba($--gray-light, .1);
		}
		&:active {
			background-color: rgba($--gray, .1);
		}
		&:after {
		    width: rem(1);
		    height: 100%;
		    position: absolute;
		    top: 0;
		    right: 0;
		    z-index: 1;
		    display: block;
		    content: '';
		    background-color: rgba($--black, .15);
		}
		&:first-child {
			border-radius: 0 0 0 rem(13);

			&:last-child {
				width: 100%;
				border-radius: 0 0 rem(13) rem(13);
			}
		}
		&:last-child {
			border-radius: 0 0 rem(13);

			&:after {
				display: none;
			}
		}
	}
	//对话框
	&-wrapper-dialog{
		width: 80%;
		max-width: rem(320);
	}
	&-dialog {
		display: block;
		overflow: hidden;
		position: relative;
		border-radius: rem(13);
		box-shadow: 0 0 rem(25) rgba($--black, .2);
	}
	&-inner-dialog {
		color: $--black;
		padding-top: rem(15);
		border-radius: rem(13);
		background-color: rgba($--white, .96);
	}
	&-icon-dialog {
		width: 100%;
		height: rem(50);
		display: block;
	}
	&-icon-dialog:before {
		line-height: 1;
		display: block;
		text-align: center;
		font-size: rem(42);
	}
	&-title-dialog {
		font-size: rem(18);
		font-weight: $font-weight-bold;
		@include word-wrap;
	}
	&-text-dialog {
		line-height: $line-height-sm;
		display: block;
		font-size: rem($font-size-sm);
		position: relative;
		@include word-wrap;
	}
	&-input-dialog {
		padding: rem(10) rem(15) 0;
		position: relative;
	}
	&-icon-dialog + &-title-dialog,
	&-icon-dialog + &-text-dialog,
	&-title-dialog + &-text-dialog {
		margin-top: rem(5);
	}
	&-button-wrap-dialog {
		margin-top: rem(15);
	}
	//页面层
	&-wrapper-page{
		width: 90%;
	}
	&-page {
		display: block;
		overflow: hidden;
		position: relative;
		border-radius: rem(13);
		box-shadow: 0 0 rem(25) rgba($--black, .2);
	}
	&-inner-page {
		color: $--black;
		border-radius: rem(13);
		background-color: rgba($--white, .96);
	}
	&-title-page {
		height: rem(46);
		line-height: rem(46);
		overflow: hidden;
		position: relative;
		font-size: rem(17);
		font-weight: $font-weight-medium;
		text-align: left;
		padding: 0 rem(15);
		border-bottom: rem($border-width-xs) $border-style-solid rgba($--black, .1);
	}
	&-close-page {
		width: rem(20);
		height: rem(20);
		position: absolute;
		top: calc(50% - #{rem(10)});
		right: rem(15);
		cursor: pointer;

		&:before {
			line-height: 1;
			display: block;
			text-align: center;
			font-size: rem($font-size-sm);
		}
	}
	&-text-page {
		height: 75%;
		max-height: rem(350);
		padding: rem(10);
		font-size: rem($font-size-sm);
		overflow-x: hidden;
		overflow-y: auto;
		position: relative;
		text-align: left;
		display: block;
		-webkit-overflow-scrolling: touch;
		@include word-wrap;
	}
	//加载层
	&-loading {
		max-width: rem(200);
		position: relative;
		display: block;
		overflow: hidden;
		padding: rem(10);
		color: rgba($--white, .85);
		background-color: rgba($--black, .65);
		border-radius: rem(5);
	}
	&-text-loading {
		width: 100%;
		display: block;
		overflow: hidden;
		text-align: center;
		font-size: rem($font-size-xs);
	}
	&-icon-loading + &-text-loading {
		padding-top: rem(4);
	}
	&-icon-loading {
		width: rem(34);
		height: rem(34);
		margin: 0 auto;
		display: block;
		overflow: hidden;
		text-align: center;
		position: relative;
		transform-origin: 50%;
		animation: VusLoadSpin 1s step-end infinite;

		&:after {
			display: block;
			width: 100%;
			height: 100%;
			content: '';
			background: {
				image: $img-load;
				repeat: no-repeat;
				position: 50%;
				size: 100%;
			}
		}
	}
	//信息提示
	&-message {
		width: auto;
		height: auto;
		top: auto;
		left: auto;
		z-index: $zindex-fixed;
	}
	&-wrapper-message {
		max-width: 80%;
		display: table;
		position: fixed;
		top: rem(20);
		transform: translate(-50%, 0);
	}
	@at-root {
		@include media-min($xs) {
			&-wrapper-message {
				max-width: map-get($container-max-width, $xs);
			}
		}
	}
	&-inner-message {
		display: block;
		line-height: $line-height-md;
		padding: rem(15);
		position: relative;
		border: rem($border-width-xs) $border-style-solid $--tp;
		border-radius: rem(5);

		@each $key, $value in $msg-color {
			@include message-color($key, $value)
		}
		&.v--dark {
			#{$V}popup-text-message {
				padding: 0 rem(10) !important;
			}
			#{$V}popup-close-message {
				color: $--white !important;
			}
		}
	}
	&-icon-message {
		width: rem(26);
		height: rem(26);
		display: block;
		margin-top: - rem(13);
		position: absolute;
		top: 50%;
		left: rem(10);

		&:before {
			line-height: 1;
			display: block;
			text-align: center;
			font-size: rem(23);
		}
	}
	&-text-message {
		font-size: 1rem;
		display: block;
		overflow: hidden;
		padding: 0 rem(20) 0 rem(30);
		@include word-wrap;
	}
	&-close-message {
		width: rem(20);
		height: rem(20);
		position: absolute;
		top: rem(3);
		right: rem(2);
		cursor: pointer;
		color: rgba($--black, .5);

		&:before {
			line-height: 1;
			display: block;
			text-align: center;
			font-size: rem($font-size-xs);
		}
	}
}