/*=============== INPUT PASSWORD ===============*/
*{
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    margin: 0;
    height: 100vh;
    display: grid;
    place-items: center;
    background-color: var(--body-color);
}

.input{
    position: relative;
    background-color: var(--container-color);
    padding: 1.35rem 1.25rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    column-gap: .75rem;

    &__lock,
    &__icon{
        font-size: 1.25rem;
        z-index: 1;
    }

    &__lock,
    &__password{
        color: var(--white-color);
    }
    &__icon{
        color: var(--first-color);
        cursor: pointer;
    }

    &__password{
        background: transparent;
        border: none;
        outline: none;
        font-size: 14px;
        z-index: 1;

        &::placeholder{
            color: var(--white-color);
        }
    }

    &__overlay{
        width: 32px;
        height: 32px;
        background-color: var(--white-color);
        position: absolute;
        right: .9rem;
        border-radius: 50%;
        z-index: 0;
        transition: .4s ease-in-out;
    }
}

/* Transition effect */
.overlay-content{
    width: 100%;
    height: 100%;
    border-radius: .5rem;
    right: 0;
}

.overlay-content ~ .input__lock{
    color: var(--container-color);
}

.overlay-content ~ .input__password,
.overlay-content ~ .input__password::placeholder{
    color: var(--text-color);
}