/*
  Note: If you add a color here, please add it to "/stories/base/colors.css" as well
*/

/* ==========================================================================
  Fonts
  ========================================================================== */

/* ==========================================================================
  All typography variants

  $unit - Either em or rem
  ========================================================================== */

@keyframes fillIn {
    to { stroke-dashoffset: 0; }
}

.wrapper {
    min-width: 28rem;
    max-width: 65rem;
    min-height: 9.1rem;
    display: flex;
    flex-direction: column
}

.wrapper .label {
        font-family: "GtSectra", serif;
        font-weight: 500;
        font-size: 1.4rem;
        text-transform: uppercase;
        line-height: calc(2em / 1.4);
        letter-spacing: calc(0.09em / 1.4);
        color: #d4b58b;
    }

.wrapper input {
        font-family: "IbmPlexMono", monospace;
        font-weight: 400;
        font-size: 1.6rem;
        line-height: calc(2.4em / 1.6);
        padding: 0.8rem 0;
        border-width: 0 0 0.1rem 0;
        border-color: rgba(75, 69, 61, 0.3);
        outline: none;
        color: #4b453d;
        transition: border-color 0.2s ease
    }

.wrapper input:-ms-input-placeholder {
            color: rgba(75, 69, 61, 0.3);
        }

.wrapper input::-ms-input-placeholder {
            color: rgba(75, 69, 61, 0.3);
        }

.wrapper input::placeholder {
            color: rgba(75, 69, 61, 0.3);
        }

.wrapper input:active {
            border-color: rgba(75, 69, 61, 0.6);
        }

.wrapper input:focus {
            border-color: rgba(75, 69, 61, 0.6);
        }

.wrapper input.poor {
            border-color: #d0021b;
        }

.wrapper input.weak {
            border-color: #ffac00;
        }

.wrapper input.fair {
            border-color: #44b880;
        }

.wrapper input.strong {
            border-color: #44b880;
        }

.wrapper .inputWrapper {
        position: relative
    }

.wrapper .inputWrapper input {
            width: 100%
        }

.wrapper .inputWrapper input.noBorderBottom {
                border-color: transparent;
            }

.wrapper .inputWrapper input:focus + .strengthIndicator > div {
                background-color: rgba(75, 69, 61, 0.6);
            }

.wrapper .inputWrapper .eyeIcon {
            position: absolute;
            right: 0;
            width: 1.6rem;
            height: 100%;
            fill: rgba(75, 69, 61, 0.6)
        }

.wrapper .inputWrapper .eyeIcon:hover {
                cursor: pointer;
            }

.wrapper .inputWrapper .eyeIcon.hidden {
                display: none;
            }

.wrapper .helperContainer {
        width: 100%;
        margin-top: 1rem;
        display: flex;
        justify-content: space-between
    }

.wrapper .helperContainer .helperText {
            font-family: "IbmPlexMono", monospace;
            font-weight: 400;
            font-size: 1.2rem;
            line-height: calc(2em / 1.2);
            margin-right: 5rem;
            flex-shrink: 0;
            color: rgba(75, 69, 61, 0.6);
        }

.wrapper .helperContainer .feedbackMessage {
            margin-left: auto;
        }