@charset "UTF-8";
@import "mixin.scss";
@mixin element($name) {
  @at-root #{&}_#{$name} {
    @content;
  }
}

@mixin modifier($name) {
  @at-root #{&}-#{$name} {
    @content;
  }
}

$c_333: #333;
$c_666: #666;
$c_orange: #ff704f;

@function toPercentage($px){
	@return $px/750 * 100%;
}
@function toRem($px){
	@return $px/75 * 1rem;
}
@function toPx($px){
	@return $px/1 * 1px;
}

.zcm_alert{
	// 背景颜色
	@include element(bg) {
	    position: fixed;
	    top: 0;
	    left: 0;
	    background-color: rgba(0, 0, 0, 0.7);
	    width: 100%;
	    height: 100%;
	    z-index: 6;
	}

	// 框
	@include element(container) {
		position: absolute;
		left: 50%;
		top: 50%;
		@include prefixer(transform,translate3d(-50%, -50%, 0) scale(0, 0));
		width: toPercentage(560);
		z-index: 12;
		transition: all 300ms;
		background-color: rgba(255, 255, 255, 1);
		border-radius: toPx(8);
		opacity: 0;
			// @at-root .show &{
		&.show {
			opacity: 1;
			@include prefixer(transform,translate3d(-50%, -50%, 0) scale(1, 1));
		}
	}
	// main
	@include element(main) {
		padding:toPx(4);
		border-bottom: 1px solid #e8e8e8; /*no*/
	}

	// title
	@include element(title) {
		font-size: toPx(30);
		line-height: 1.4;
		margin: toPx(38);
		text-align: center;
		font-weight: bold;
	}
	// 内容
	@include element(message) {
		font-size: toPx(28);
		line-height: 1.4;
		margin: toPx(38);
		text-align: center;
	}
	// 按钮工程区
	@include element (func) {
		overflow: hidden;
		line-height: 3;
		@include flex-box();
		@include justify-content(center);
		@include align-content(center);
	}
	

	// 两个按钮的通用样式
	@at-root %btn-style {
		font-size: toPx(30);
		box-sizing: border-box;
		@include flex-grow(1);
		@include flex-shrink(1);
		@include flex-basis(0%);
		text-align: center;
		cursor: pointer;
		color: $c_666;
	}

	// 按钮
	@include element (btn) {
		@extend %btn-style;
		& + & {
			border-left:1px solid #e8e8e8; /*no*/
		}
	}
}