/* Copyright (C) 2016 NooBaa */

password-field {
    display: inline-block;

    input[type="password"],
    input[type="text"] {
        padding: 0;
        border: none;
        width: auto;
    }

    .input {
        position: relative;
    }

    .strength-indicator {
        .fill();
        top: auto;
        height: 4px;
        pointer-events: none;
        background-color: black;
        transition: width 300ms ease-out;

        .rect {
            .fill();
            opacity: 1;
            background-color: rgb(var(--color27));
            mix-blend-mode: screen;
            transition: opacity 300ms linear;

            + .rect {
                background-color: rgb(var(--color31));
            }
        }
    }

    &.invalid .input {
        &, &.focus {
            border-color: rgb(var(--color31));
        }
    }
}
