/* =========================================================
   MUSICALWORLD — CONTROLE DE VISIBILIDADE DA SENHA

   Arquivo:
   css/auth/password-toggle.css

   Responsabilidade:
   - Criar o espaço reservado para o botão de senha.
   - Posicionar o ícone de olho dentro do campo.
   - Manter o botão compatível com desktop, tablet e celular.
   - Não interferir na lógica de autenticação.
   ========================================================= */


/* =========================================================
   CONTAINER DO CAMPO DE SENHA
   ========================================================= */

.mw-password-field {

    position: relative;

    width: 100%;

}


/* =========================================================
   INPUT DE SENHA
   ========================================================= */

.mw-password-field input[type="password"],
.mw-password-field input[type="text"] {

    width: 100%;

    padding-right: 48px;

}


/* =========================================================
   BOTÃO DO OLHO
   ========================================================= */

.mw-password-toggle {

    position: absolute;

    top: 50%;
    right: 12px;

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    padding: 0;

    border: 0;

    background: transparent;

    color: #64748b;

    cursor: pointer;

    border-radius: 8px;

    transition:
        color 0.18s ease,
        background-color 0.18s ease;

    z-index: 5;

}


/* =========================================================
   HOVER
   ========================================================= */

.mw-password-toggle:hover {

    color: #6d4aff;

    background-color: rgba(109, 74, 255, 0.08);

}


/* =========================================================
   FOCO PELO TECLADO
   ========================================================= */

.mw-password-toggle:focus-visible {

    outline: 2px solid #6d4aff;

    outline-offset: 2px;

}


/* =========================================================
   ÍCONE SVG
   ========================================================= */

.mw-password-toggle svg {

    width: 20px;
    height: 20px;

    display: block;

    pointer-events: none;

}


/* =========================================================
   CAMPO QUANDO A SENHA ESTÁ VISÍVEL
   ========================================================= */

.mw-password-field.mw-password-visible
.mw-password-toggle {

    color: #6d4aff;

}


/* =========================================================
   RESPONSIVO — CELULAR
   ========================================================= */

@media (max-width: 560px) {

    .mw-password-toggle {

        right: 10px;

        width: 34px;
        height: 34px;

    }

    .mw-password-toggle svg {

        width: 19px;
        height: 19px;

    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mw-password-toggle {

        transition: none;

    }

}