/* ***************** *******************************************************************
* WordPress Theme  | LanteasOpenSoclePremiumThemeChild [Boutons UIX] - Lanteas.
* ***************** *******************************************************************
*/

/** Lien 'Editer' au sein des contenus dynamique Avia sous forme de lien...
 * L'attribut « rel » vaut la valeur  qui coreespond au caratère unicode \ue836 (non transposable car hors de la zone latin)
 * Une fois la valeur de l'attribut fixé il est automatiquement converti en «  » (Le pen style / crayon)
 * <a role="action-directe" rel="" href="/mes-donnees-personnelles/modifier/">Editer</a>
 * Ce lien est devenu dans cette version auto ajustable en fonction de la taille et de la graisse de la police du conteneur (h2, h3...)
 * Un ajustement permet le masquage dynamique du texte 'Editer'.
 * Ce texte est là afin de le voir et l'identifier sans le faire sauter lorsque on est en WP Admin Avia ou Editeur Wysiwyg...
 */

 a[data-role="action-directe"] {
    display: inline-flex;
    width: 0.90em;
    overflow: hidden;
    padding-left: 1em;
    line-height: 1;
    position: relative;
    font-size: 1em !important;
    justify-content: flex-start;

    /* Ne pas décorer contrairement au lien pour compatibilité RGAA (cf. los-dynamic-rules.css.php) */
    text-decoration: none !important;
    border-bottom: none !important;
}

a[data-role="action-directe"]::before {
    font-weight: normal;
    font-family: 'entypo-fontello';
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: var(--action-icon);
    --action-icon: attr(rel);
    margin-left: -1.25em;
    margin-right: 0.25em;
    padding-right: 0.05em;
    transform: translateY(-50%);
    top: 50%;
    position: absolute;
}

/* Here on change la taille de la typo pour être relative à la taill héritée de son élément parent */
a[data-role="action-directe"]::before{
    font-size: 0.8em;
}

a[data-role="action-directe"]:focus::before,
a[data-role="action-directe"]:hover::before,
a[data-role="action-directe"]:active::before{
    color: var( --main_color_secondary );
}