/* ========================================================
   ACTIONS DU HERO
   ======================================================== */

.hero-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;
}


.hero-actions .button {
    min-height: 43px;
}


/*
 * Le bouton principal représente l'action
 * logique du média :
 *
 * - Demander
 * - Regarder sur Plex
 */

.hero-actions .primary-action {
    background: var(--plex);

    color: #111;
}


.hero-actions .primary-action:hover {
    background: #f4ae10;
}


/*
 * Les états non cliquables restent visibles
 * afin que l'utilisateur comprenne immédiatement
 * pourquoi il ne peut pas faire une nouvelle demande.
 */

.hero-actions .status-action {
    cursor: default;

    transform: none;

    opacity: 1;
}


.hero-actions .status-action:hover {
    transform: none;
}


.hero-actions .status-processing {
    background:
        rgba(229, 160, 13, .18);

    border:
        1px solid
        rgba(229, 160, 13, .38);

    color: #efb63c;
}


.hero-actions .status-pending {
    background:
        rgba(55, 116, 190, .18);

    border:
        1px solid
        rgba(55, 116, 190, .38);

    color: #8ab9f5;
}


.hero-actions .status-partial {
    background:
        rgba(108, 80, 195, .18);

    border:
        1px solid
        rgba(108, 80, 195, .42);

    color: #b9a8ff;
}


.hero-actions .status-available {
    background:
        rgba(31, 160, 95, .18);

    border:
        1px solid
        rgba(31, 160, 95, .38);

    color: #76dda5;
}


/* ========================================================
   INFORMATION CONTEXTUELLE
   ======================================================== */

.hero-notice {
    max-width: 520px;

    max-height: 0;

    margin-top: 0;

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(-4px);

    color:
        rgba(
            255,
            255,
            255,
            .76
        );

    font-size: .82rem;

    line-height: 1.45;

    transition:
        opacity .25s ease,
        transform .25s ease,
        max-height .25s ease,
        margin-top .25s ease;
}


.hero-notice.visible {
    max-height: 80px;

    margin-top: 13px;

    opacity: 1;

    transform:
        translateY(0);
}


.hero-notice::before {
    content: "ⓘ";

    margin-right: 7px;

    color: var(--plex);
}


@media (max-width: 700px) {

    .hero-actions {
        align-items: stretch;
    }


    .hero-actions .button {
        padding:
            11px 15px;
    }


    .hero-notice {
        font-size: .78rem;
    }

}