@mi-prefix: mi-;
@mi-font-size: 1rem;
@mi-font-size-sm: 12px;
@mi-font-size-normal: 14px;
@mi-font-size-base: 16px;
@mi-spacing: 8px;
@mi-icon: ~'@{mi-prefix}icon';
@mi-captcha: ~'@{mi-prefix}captcha';
@mi-font-family: "Pingfang SC", "Microsoft YaHei", "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;

/** Flex */
.flex(@align: center, @justify: center) {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: @align;
    align-items: @align;
    justify-content: @justify;
}

/** Border Radius */
.border-radius(@raduis: 4) {
    -moz-border-radius: (@raduis / @mi-font-size-base) * @mi-font-size;
    -webkit-border-radius: (@raduis / @mi-font-size-base) * @mi-font-size;
    -o-border-radius: (@raduis / @mi-font-size-base) * @mi-font-size;
    -khtml-border-radius: (@raduis / @mi-font-size-base) * @mi-font-size;
    border-radius: (@raduis / @mi-font-size-base) * @mi-font-size;
}

.border-radius-circle() {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -khtml-border-radius: 50%;
    border-radius: 50%;
}

/** Properties */
.properties(@key, @value: @mi-spacing) {
    @{key}: (@value / @mi-font-size-base) * @mi-font-size;
}

/** Text Ellipsis */
.text-ellipsis(){
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/** Letter Spacing  */
.letter-spacing(@value: 2) {
    .properties(letter-spacing, @value);
}

img {
    width: 100%;
    height: 100%;
}

.@{mi-captcha} {
    width: 100%;
    .properties(height, 42);
    font-family: @mi-font-family;
    .letter-spacing();

    &-content {
		width: 100%;
		height: 100%;
		position: relative;
    }

    &-radar {
        .flex(center, flex-start);
		height: 100%;
        width: 100%;
        background: #fff;
        border: 1px solid #f6ca9d;
        box-shadow: 0 0 4px #f6ca9d;
        cursor: pointer;
        .properties(min-width, 160);

        &-ready,
		&-scan,
		&-being,
		&-success {
            .flex();
            flex-wrap: nowrap;
            position: relative;
			transition: all .5s ease;
			.properties(width, 30);
			.properties(height, 30);
			.properties(margin, 6);
        }

        &-ring,
		&-dot {
			position: absolute;
			.border-radius-circle();
			transform: scale(.4);
			width: 100%;
			height: 100%;
			box-shadow: inset 0 0 0 1px #f6ca9d;
			background-image: linear-gradient(0, rgba(0, 0, 0, 0) 50%, #fff 50%), linear-gradient(0, #fff 50%, rgba(0, 0, 0, 0) 50%);
        }

        &-dot {
            background: #f6ca9d;
        }

        &-ring {
			animation: mi-anim-wait 1s infinite;
			transform: scale(1);
        }

        &-scan {
            .double-ring {
                width: 100%;
                height: 100%;
                position: relative;
                transform: translateZ(0) scale(1);
                backface-visibility: hidden;
                transform-origin: 0 0;

                div {
                    box-sizing: border-box;
                }

                > div {
                    position: absolute;
                    width: 24px;
                    height: 24px;
                    top: 3px;
                    left: 3px;
                    border-radius: 50%;
                    border: 3px solid #000;
                    border-color: #f6ca9d transparent #f6ca9d transparent;
                    animation: mi-anim-rotate .8s linear infinite;
                }

                > div:nth-child(2) {
                    width: 14px;
                    height: 14px;
                    top: 8px;
                    left: 8px;
                    border-color: transparent #f6ca9d transparent #f6ca9d;
                    animation: mi-anim-rotate .5s linear infinite reverse;
                }
            }
        }

        &-being {
            display: block;
            .properties(font-size, 22);
            .properties(line-height, 20);
            font-weight: 700;
            color: fade(#000, 50%);
            text-align: center;
        }

        &-success {
			.flex();
			cursor: default;

			.@{mi-icon} {
				color: #f6ca9d;
				.properties(font-size, 18);
			}

			&-icon {
				animation-name: mi-captcha-success;
				animation-timing-function: ease;
				animation-iteration-count: 1;
				animation-delay: .5s;
				animation-duration: .5s;
			}
		}

        &-tip {
            .flex(center, flex-start);
			.properties(height, 42);
			.properties(padding-left, 2);
			.properties(font-size, @mi-font-size-normal);
			color: #1d1e23;
			.text-ellipsis();
			text-align: left;
			box-sizing: border-box;

			&-error {
				color: #ed4014;
			}
		}
        
        &-logo {
            position: absolute;
            .properties(right);
            .properties(top, 9);
			.properties(width, 20);
			.properties(height, 20);

			img {
                width: 100%;
                height: 100%;
				.border-radius-circle();
			}
		}
    }

    &-success {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
        width: 0;
        box-shadow: 0 0 4px fade(#f6ca9d, 20%);
		cursor: default;
		transition: width .5s ease;

		&-show{
			background: fade(#f6ca9d, 20%);
			width: 100%;
		}
	}

    &-message {
        position: absolute;
        top: 20px;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        &-content {
            background: #fff;
            border-radius: 8px;
            border: 1px solid fade(#000, 10%);
            box-shadow: 0 0 10px fade(#000, 20%);
            color: #ed4014;
            font-size: 12px;
            padding: 8px 16px;
            letter-spacing: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            max-width: 320px;
            flex-wrap: wrap;
            line-height: 22px;

            .@{mi-icon} {
                font-size: 14px;
                margin-right: 8px;
            }
        }
    }
}

@keyframes mi-anim-wait {
    60% {
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }
}

@keyframes mi-anim-rotate {
    0% { transform: rotate(0) }
    100% { transform: rotate(360deg) }
}

@keyframes mi-captcha-modal-open {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(0, 0, 1);
		-moz-transform: scale3d(0, 0, 1);
		-o-transform: scale3d(0, 0, 1);
		-ms-transform: scale3d(0, 0, 1);
		transform: scale3d(0, 0, 1);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		-moz-transform: scale3d(1, 1, 1);
		-o-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes mi-captcha-success {
	25% {
		-o-transform: (25deg);
		-moz-transform: rotate(25deg);
		-ms-transform: rotate(25deg);
		-webkit-transform: rotate(25deg);
		transform: rotate(25deg)
	}
	100% {
		-o-transform: rotate(-360deg);
		-moz-transform: rotate(-360deg);
		-ms-transform: rotate(-360deg);
		-webkit-transform: rotate(-360deg);
		transform: rotate(-360deg)
	}
}

@import './modal.less';