/* =========================================================
   PICTOGRAMS.CSS
   Família de pictogramas da identidade visual
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

.pictogram {
    width: 45px;
    height: 45px;

    display: inline-block;
    flex-shrink: 0;

    fill: currentColor;

    overflow: visible;

    color: #AD378B;
}


/* =========================================================
   TAMANHOS
   ========================================================= */

.pictogram--small {
    width: 32px;
    height: 32px;
}

.pictogram--medium {
    width: 45px;
    height: 45px;
}

.pictogram--large {
    width: 64px;
    height: 64px;
}

.pictogram--xl {
    width: 90px;
    height: 90px;
}


/* =========================================================
   BALLET
   ========================================================= */

.pictogram--ballet {
    color: #AD378B;
}


/* =========================================================
   BASQUETE
   ========================================================= */

.pictogram--basquete {
    color: #AD378B;
}


/* =========================================================
   PALETA DA FAMÍLIA
   ========================================================= */

:root {

    --pictogram-roxo: #AD378B;

    --pictogram-roxo-claro: #CF97C3;

    --pictogram-light: #D0EAF9;

    --pictogram-purple: #B95FA0;

   --pictogram-green: #3CB64B;

   --pictogram-branco: #ffffff;

   --pictogram-pastel: #FFF2CC;

   --pictogram-amarelo:  #F9A01B; 

    --pictogram-amarelo-claro:  #FFD600;
 
    --pictogram-verde-claro: #A3DBB2;

    
    --pictogram-azul: #0081C6; 

    --pictogram-pastel-claro: #FFEECB;

    --pictogram-azul-claro: #83CEEB;

    --pictogram-verde-claro-medio: #47AE54;
    
   --pictogram-amarelo-medio: #F8AE15;
   
   --pictogram-azul-x: #008FC9;

}


/* =========================================================
   MODIFICADORES DE COR
   ========================================================= */

/*
 * Cor principal
 */

.pictogram--roxo {
    color: var(--pictogram-roxo);
}


/*
 * Cor secundária
 */

.pictogram--roxo-claro {
    color: var(--pictogram-roxo-claro);
}


/*
 * Cor clara
 */

.pictogram--light {
    color: var(--pictogram-light);
}


/*
 * Roxo intermediário
 */

.pictogram--purple {
    color: var(--pictogram-purple);
}


/* =========================================================
   TRANSIÇÃO
   ========================================================= */

.pictogram {
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   INTERAÇÃO
   ========================================================= */

.pictogram--interactive {
    cursor: pointer;
}

.pictogram--interactive:hover {
    transform: translateY(-3px);
}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

.pictogram[aria-hidden="true"] {
    user-select: none;
}


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

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

    .pictogram {
        transition: none;
    }

}