@use "../../styles/variables";

.password-strength-container {
    padding: 5px;

    .strength-text-highest {
        color: variables.$success;
    }

    .strength-text-high {
        color: variables.$pass;
    }

    .strength-text-average {
        color: variables.$warning;
    }

    .strength-text-low {
        color: variables.$danger;
    }

    .strength-level {
        margin-top: 10px;
        display: flex;
        width: 200px;
        align-items: center;
        background: variables.$gray-200;

        span {
            display: inline-block;
            width: 0px;
            height: 5px;
            transition: all 300ms;
        }
    }

    .strength-level-highest {
        span {
            width: 100%;
            border-color: variables.$success;
            background: variables.$success;
        }
    }

    .strength-level-high {
        span {
            width: 75%;
            border-color: variables.$pass;
            background: variables.$pass;
        }
    }

    .strength-level-average {
        span {
            width: 50%;
            border-color: variables.$warning;
            background: variables.$warning;
        }
    }

    .strength-level-low {
        span {
            width: 25%;
            border-color: variables.$danger;
            background: variables.$danger;
        }
    }
}
