@import '../1-Helpers/variables';

.password-strength {
    width: 100%;
    text-align: center;

    .password-strength-indicator-container {
        width: 100%;

        .password-strength-indicator {
            width: calc((100% / 5) - 1%);
            height: 10px;
            margin: 0 2px;
            border-radius: 100px;
            display: inline-block;

            &.good {
                background: $warn;
            }

            &.strong {
                background: $success
            }
    
            &.weak {
                background: $error;
            }
        }
    }
    span {
        text-align: center;

        &.good {
            color: $warn;
        }

        &.strong {
            color: $success
        }

        &.weak {
            color: $error;
        }
    }
}