@import '../theme/index.less';

@mi-passport: ~'@{mi-prefix}passport';
@mi-layout: ~'@{mi-prefix}layout';

.@{mi-passport} {
    margin: 0 auto;
	color: @mi-font;
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	.linear-gradient-background();
    height: 100%;
    overflow: hidden;

    &-content {
        .flex();
		position: relative;
		.border-radius();
		width: 100%;
        min-height: 100vh;
		height: 100%;
        overflow: hidden;
    }

    &-mask {
		background: var(--mi-passport-mask, @mi-passport-mask);
        backdrop-filter: blur(2rem);
		width: 100%;
		height: 100%;
		.border-radius(16);
		position: absolute;
		top: 0;
		left: 0;
		z-index: var(--mi-z-index, @mi-z-index);
    }

    &-box {
        .flex(center, center, column);
		.properties(max-width, 550);
		.properties(padding, 32);
		.properties(margin, 24);
		.properties(margin-bottom, 70);
        position: relative;

        .@{mi-passport} {
            &-title {
				.properties(font-size, 26);
                font-weight: bold;
				.linear-gradient-text();
				.properties(letter-spacing, 4);
				.properties(margin-right, 4);
				z-index: var(--mi-z-index, @mi-z-index);

                sup,
                img {
                    .properties(width, 20);
                    .properties(height, 20);
                    overflow: hidden;
                }

				img {
					.properties(margin-left);
					.border-radius();
				}
            }

            &-form {
                width: 100%;
				.properties(max-width, 380);
				z-index: @mi-z-index;
				.properties(padding-top, 32);

                .ant-input-affix-wrapper {
					.border-radius(40);
					border-color: var(--mi-theme, @mi-theme);
					background: var(--mi-passport-form-input-bg, @mi-passport-form-input-bg);
					box-shadow: none;

					&:hover,
					&:focus {
						border-color: var(--mi-theme, @mi-theme);
						box-shadow: none;
					}

					> input.ant-input {
						.properties(padding-top, 5);
						.properties(padding-bottom, 5);
						background: var(--mi-passport-form-input-bg, @mi-passport-form-input-bg);
						color: var(--mi-passport-form-input-text, @mi-passport-form-input-text);

						&:hover,
						&:focus {
							box-shadow: none;
						}
					}

					.ant-input-prefix {
						.properties(margin-right);
					}
				}

				.has-error {
					.ant-input-affix-wrapper {
						border-color: var(--mi-error, @mi-error);
					}
				}

				.ant-form {
					&-item {
						&-explain-error {
							.properties(text-indent, 16);
							.properties(font-size, @mi-font-size-sm);
						}

						&.mb8 {
							.properties(margin-bottom);
						}
					}
				}
            }

			&-remember {
				.properties(margin-bottom);
				color: var(--mi-passport-forget-text, @mi-passport-forget-text);
				.properties(font-size, @mi-font-size-normal);
				.properties(padding-left, 12);

				a,
				a:hover {
					color: var(--mi-passport-forget-text, @mi-passport-forget-text);
					.properties(font-size, @mi-font-size-normal);
				}

				.@{mi-passport} {
					&-forget {
						.flex();

						> span {
							.properties(margin-right);
						}
					}
				}
			}

			&-remember,
			&-socialite {
				.ant-form-item-control-input-content {
					.flex(center, space-between);
				}

				.ant-checkbox + span,
				&-link {
					color: var(--mi-passport-forget-text, @mi-passport-forget-text);

					a,
					a:hover,
					a:link,
					a:visited {
						color: var(--mi-theme, @mi-theme);
					}
				}
			}

			&-forget {
				.anticon {
					.properties(margin-right);
				}

				&-suffix {
					.linear-gradient-background();
					.border-radius(32);
					.properties(padding-left, 16);
					.properties(padding-right, 16);
					.properties(padding-top, 4);
					.properties(padding-bottom, 4);
					cursor: pointer;

					span {
						.properties(font-size, 12);
						color: var(--mi-font, @mi-font);
					}
				}

				&-resend {
					.linear-gradient-background-theme();

					span {
						color: var(--mi-ink, @mi-ink);
					}
				}
			}

			&-submit {
				width: 100%;
				.linear-gradient-background-theme();
				color: var(--mi-ink, @mi-ink);
				.border-radius(32);
				.properties(height, 42);
				.properties(font-size, @mi-font-size-normal);
				.properties(margin-bottom, 24);
				border: none;
				.flex();

				&-register {
					.linear-gradient-background();
					color: var(--mi-font, @mi-font);

					a,
					a:hover {
						color: var(--mi-font, @mi-font);
					}
				}
			}

			&-links {
				.flex(center, space-between);
				.properties(padding-left, 4);
				.properties(padding-right, 4);

				a,
				a:hover {
					color: var(--mi-theme, @mi-theme);
				}
			}

			&-socialite {
				.flex();
				color: var(--mi-passport-socialite-text, @mi-passport-socialite-text);
				.properties(padding-left, 4);

				.anticon {
					.properties(font-size, 18);
					.properties(margin-left, 12);
					color: var(--mi-passport-socialite-text, @mi-passport-socialite-text);
					cursor: pointer;

					&:hover {
						color: var(--mi-theme, @mi-theme);
						opacity: 1;
					}
				}

				&-mobile {
					width: 100%;
					flex-direction: column;
					color: #999;
					.properties(margin-top, 32);
				}

				&-line {
					display: block;
					border-top: 1px solid var(--mi-theme, @mi-theme);
					position: absolute;
					width: 100%;
					left: 0;
					.properties(top, 68);
					z-index: 1;
				}

				&-title {
					.properties(margin-top, 16);
					.linear-gradient-background-theme();
					.border-radius(32);
					.properties(padding-left, 16);
					.properties(padding-right, 16);
					.properties(padding-top);
					.properties(padding-bottom);
					.properties(font-size, 12);
					color: var(--mi-ink, @mi-ink);
					z-index: 2;
				}

				&-cates {
					.flex(center, space-between);
					.properties(margin-top, 24);
					width: 85%;

					.anticon {
						color: var(--mi-theme, @mi-theme);
						.properties(font-size, 28);
					}
				}
			}
        }
    }

	.@{mi-prefix}layout {
		&-footer {
			background: transparent;
			width: 100%;
			position: relative;
			.properties(margin-top, -70);
		}
	}
	
	&-mobile {
		.@{mi-passport} {
			&-submit {
				.properties(margin-bottom);
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.@{mi-passport} {
		&-content {
			align-items: flex-start;
			background: var(--mi-passport-mask, rgba(255, 255, 255, 0.1));
			backdrop-filter: blur(2rem);
		}

		&-box {
			margin: 0;
			height: 100%;
			min-height: 100vh;
			justify-content: flex-start;
		}

		&-mask {
			display: none;
		}

		&-form {
			.properties(margin-bottom, 70);
		}

		&&-forget &-content {
			align-items: center;
		}

		&&-forget &-box {
			justify-content: center;
		}
	}
}