/* 
 * Arquivo de Customização do Dropdown do Usuário
 * 
 * Este arquivo permite personalizar completamente as dimensões e espaçamentos
 * do dropdown do usuário através de variáveis CSS.
 * 
 * Para usar, modifique os valores das variáveis abaixo conforme necessário.
 */

:root {
    /* ========================================
     * DIMENSÕES DO DROPDOWN
     * ======================================== */

    /* Largura */
    --dropdown-width: auto;
    /* Largura principal (auto, px, rem, %, etc.) */
    --dropdown-min-width: 3rem;
    /* Largura mínima */
    --dropdown-max-width: none;
    /* Largura máxima (none para sem limite) */

    /* Altura */
    --dropdown-height: auto;
    /* Altura principal (auto, px, rem, %, etc.) */
    --dropdown-min-height: 2.8rem;
    /* Altura mínima */
    --dropdown-max-height: none;
    /* Altura máxima (none para sem limite) */

    /* ========================================
     * ESPAÇAMENTOS INTERNOS (PADDING)
     * ======================================== */

    --dropdown-padding-top: 0.125rem;
    /* Espaçamento interno superior */
    --dropdown-padding-bottom: 0.125rem;
    /* Espaçamento interno inferior */
    --dropdown-padding-left: 0.5rem;
    /* Espaçamento interno esquerdo */
    --dropdown-padding-right: 0.5rem;
    /* Espaçamento interno direito */

    /* ========================================
     * ESPAÇAMENTOS EXTERNOS (MARGIN)
     * ======================================== */

    --dropdown-margin-top: 0;
    /* Espaçamento externo superior */
    --dropdown-margin-bottom: 0;
    /* Espaçamento externo inferior */
    --dropdown-margin-left: 0;
    /* Espaçamento externo esquerdo */
    --dropdown-margin-right: 0;
    /* Espaçamento externo direito */

    /* ========================================
     * ESPAÇAMENTO ENTRE ELEMENTOS
     * ======================================== */

    --dropdown-gap: 0.25rem;
    /* Espaço entre avatar e seta */
}

/* ========================================
 * EXEMPLOS DE CUSTOMIZAÇÃO
 * ======================================== */

/* 
 * Exemplo 1: Dropdown mais largo
 * Descomente as linhas abaixo para aplicar:
 
:root {
    --dropdown-width: 4rem;
    --dropdown-min-width: 4rem;
    --dropdown-padding-left: 0.75rem;
    --dropdown-padding-right: 0.75rem;
}
*/

/* 
 * Exemplo 2: Dropdown mais alto
 * Descomente as linhas abaixo para aplicar:
 
:root {
    --dropdown-height: 3rem;
    --dropdown-min-height: 3rem;
    --dropdown-padding-top: 0.5rem;
    --dropdown-padding-bottom: 0.5rem;
}
*/

/* 
 * Exemplo 3: Espaçamentos maiores
 * Descomente as linhas abaixo para aplicar:
 
:root {
    --dropdown-padding-top: 0.5rem;
    --dropdown-padding-bottom: 0.5rem;
    --dropdown-padding-left: 1rem;
    --dropdown-padding-right: 1rem;
    --dropdown-gap: 0.5rem;
}
*/

/* 
 * Exemplo 4: Margens externas
 * Descomente as linhas abaixo para aplicar:
 
:root {
    --dropdown-margin-top: 0.25rem;
    --dropdown-margin-bottom: 0.25rem;
    --dropdown-margin-left: 0.5rem;
    --dropdown-margin-right: 0.5rem;
}
*/

/* ========================================
 * APLICAÇÃO DAS VARIÁVEIS
 * ======================================== */

#userDropdownBtn {
    /* As variáveis são aplicadas automaticamente via CSS inline no HTML */
    /* Este seletor pode ser usado para sobrescrever estilos se necessário */
}

/* ========================================
 * RESPONSIVIDADE
 * ======================================== */

/* Tablets */
@media (max-width: 768px) {
    :root {
        /* Ajustes para tablets - descomente se necessário */
        /* --dropdown-padding-left: 0.375rem; */
        /* --dropdown-padding-right: 0.375rem; */
    }
}

/* Mobile */
@media (max-width: 480px) {
    :root {
        /* Ajustes para mobile - descomente se necessário */
        /* --dropdown-min-width: 2.5rem; */
        /* --dropdown-padding-left: 0.25rem; */
        /* --dropdown-padding-right: 0.25rem; */
        /* --dropdown-gap: 0.125rem; */
    }
}