@import "../styles/base/fn.wxss";

.@{wuxClassNamePrefix}-popup {
	position: fixed;
	z-index: 1000;
	width: 80%;
	max-width: 300px;

	&-position&-position--center {
		.@{wuxClassNamePrefix}-popup {
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.@{wuxClassNamePrefix}-popup__content {
			border-radius: 3px;
		}

		.@{wuxClassNamePrefix}-popup__hd {
			padding: 1.3em 1.6em 0.5em;
		}

		.@{wuxClassNamePrefix}-popup__bd {
			padding: 0 1.6em 0.8em;
		}

        .@{wuxClassNamePrefix}-popup__ft:after {
            .setTopLine(#D5D5D6);
        }
	}

	&-position&-position--top {
		.@{wuxClassNamePrefix}-popup {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			max-width: 100%;
		}
	}

	&-position&-position--right {
		.@{wuxClassNamePrefix}-popup {
			position: fixed;
			top: 0;
			right: 0;
			width: 80%;
			max-width: 100%;
			height: 100%;
			max-height: 100%;
		}
	}

	&-position&-position--bottom {
		.@{wuxClassNamePrefix}-popup {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			max-width: 100%;
		}
	}

	&-position&-position--left {
		.@{wuxClassNamePrefix}-popup {
			position: fixed;
			left: 0;
			top: 0;
			width: 80%;
			max-width: 100%;
			height: 100%;
			max-height: 100%;
		}
	}

    &-position&-position--is-iphonex &__content {
        padding-bottom: @safeAreaInsetBottom;
    }

	&__content {
		position: relative;
		background-color: #fff;
		border: 0;
		background-clip: padding-box;
		height: 100%;
		text-align: center;
		overflow: hidden;
	}

	&__title {
		font-weight: 400;
		font-size: 18px;
	}

	&__bd {
		min-height: 40px;
		font-size: 15px;
		line-height: 1.3;
		word-wrap: break-word;
		word-break: break-all;
		color: #999999;
	}

	&__ft {
		position: relative;
		line-height: 48px;
		font-size: 18px;
		display: flex;
	}

	&__close {
		border: 0;
		padding: 3px;
		background-color: transparent;
		outline: none;
		position: absolute;
		top: 6px;
		right: 6px;
		height: 21px;
		width: 21px;
	}

	&__close-x {
		display: inline-block;
		width: 15px;
		height: 15px;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23888' fill-rule='evenodd'%3E%3Cpath d='M1.414 0l28.284 28.284-1.414 1.414L0 1.414z'/%3E%3Cpath d='M28.284 0L0 28.284l1.414 1.414L29.698 1.414z'/%3E%3C/g%3E%3C/svg%3E");
	}
}