@import '../../../styles/theme/index.less';
@import '../../../styles/antd/popover.less';

@mi-password: ~'@{mi-prefix}password';

.@{mi-password} {
    &-tips {
        .flex(flex-start, center, column);
        color: var(--mi-font, @mi-font);
    }

    &-strength  {
        &-item {
            .flex(center, flex-start);
            .properties(line-height, 24);
            width: auto;

            &:first-child {
                justify-content: flex-start;
            }

            .anticon {
                .properties(font-size, 24);

                &.failed,
                &.success {
                    .properties(font-size, 14);
                    color: var(--mi-error, @mi-error);
                    .properties(margin-right);
                }

                &.success {
                    color: var(--mi-theme, @mi-theme);
                }
            }

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

        &-group {
            .flex();
            .properties(margin-left);
            .properties(margin-right);

            .@{mi-password} {
                &-strength {
                    .properties(width, 40);
                    .properties(height, 12);
                    background: var(--mi-passport-strength, @mi-passport-strength);
                    display: inline-block;
                    .properties(margin-right);

                    &:last-child {
                        margin-right: 0;
                    }

                    &.active {
                        background: var(--mi-theme, @mi-theme);
                    }
                }
            }
        }
    }

    &-input {
        outline: none;
        border-color: var(--mi-theme, @mi-theme);
        background: var(--mi-password-input-bg, @mi-password-input-bg);
        box-shadow: none;

        &:not(.ant-input-affix-wrapper-disabled) {
            &:hover,
            &:focus {
                border-color: var(--mi-theme, @mi-theme);
                box-shadow: 0 0 2px fade(@mi-theme, 20%);
            }
        }

        input.ant-input {
            background: transparent !important;

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

.@{mi-lang-en} {
    .@{mi-password} {
        &-strength {
            &-item {
                .properties(width, 520);
                .properties(margin-bottom);
                .properties(line-height, 20);

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}