/*
 * Fichier : abs-application-mobile.css
 * Emplacement : assets/css/
 *
 * Responsabilité :
 * Mise en forme du bloc qui mène à l'application mobile sur les magasins,
 * dans la zone d'en-tête du thème.
 *
 * Échelles :
 *   Les espacements, les tailles de texte, les graisses, les rayons et les
 *   durées viennent de jetons déclarés sur le conteneur du bloc, qui lisent
 *   les échelles du thème avec une valeur de repli.
 *
 * Mention d'ouverture :
 *   La mention qui annonce l'ouverture d'une nouvelle fenêtre, et celle qui
 *   signale une entrée en attente, suivent le même traitement.
 *
 * Entrée en attente :
 *   Elle n'est pas un lien et ne conduit nulle part. Sa mise en forme la
 *   distingue par l'opacité et par le curseur, jamais par la seule couleur.
 *
 * Accessibilité : WCAG 2.1 niveau AA strict.
 *   - Les cibles tactiles mesurent au moins quarante-quatre pixels de côté.
 *   - Le repère de focus vient du thème et n'est jamais retiré.
 *
 * @package AB_Story_Reader
 */

.abs-application-mobile {
    --abs-espace-mince: var(--discovery-space-1, 0.25rem);
    --abs-espace-court: var(--discovery-space-2, 0.5rem);
    --abs-espace: var(--discovery-space-4, 1rem);

    --abs-texte-menu: var(--discovery-text-sm, 0.875rem);
    --abs-graisse-forte: var(--discovery-weight-semibold, 600);
    --abs-ligne-serree: var(--discovery-line-tight, 1.2);

    --abs-rayon: var(--discovery-radius-md, 0.5rem);
    --abs-duree: var(--discovery-duration-fast, 120ms);

    --abs-icone: 1.5rem;
    --abs-attente-opacite: 0.55;

    --abs-texte: var(--discovery-color-text, #1a1a1a);
    --abs-bordure: var(--discovery-color-border, #d4d4d4);
    --abs-accent: var(--discovery-color-accent, #1c4f8b);

    display: flex;
    align-items: center;
}

/*
 * La mention reservee a la lecture vocale quitte l'affichage sans quitter le
 * document.
 */
.abs-application-mobile .abs-application-mobile-mention {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.abs-application-mobile .abs-application-mobile-liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abs-espace-court);
    margin: 0;
    padding: 0;
    list-style: none;
}

.abs-application-mobile .abs-application-mobile-lien {
    display: inline-flex;
    align-items: center;
    gap: var(--abs-espace-court);
    min-block-size: 44px;
    min-inline-size: 44px;
    padding-inline: var(--abs-espace-court);
    color: var(--abs-texte);
    font-size: var(--abs-texte-menu);
    font-weight: var(--abs-graisse-forte);
    line-height: var(--abs-ligne-serree);
    text-decoration: none;
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    transition: border-color var(--abs-duree) ease;
}

.abs-application-mobile a.abs-application-mobile-lien:hover,
.abs-application-mobile a.abs-application-mobile-lien:focus-visible {
    border-color: var(--abs-accent);
}

/*
 * L'entrée en attente n'est pas un lien : l'opacité et le curseur le disent,
 * en complément de la mention que porte son balisage.
 */
.abs-application-mobile .abs-application-mobile-attente {
    opacity: var(--abs-attente-opacite);
    cursor: default;
}

.abs-application-mobile .abs-application-mobile-lien svg {
    inline-size: var(--abs-icone);
    block-size: var(--abs-icone);
    flex: 0 0 auto;
    fill: currentColor;
}

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

    .abs-application-mobile .abs-application-mobile-lien {
        transition: none;
    }
}

@media print {

    .abs-application-mobile {
        display: none;
    }
}