/**
 * Fichier  : /features/share/assets/css/style.css
 * Fonction : bouton de partage des contenus FWPL
 */


/* ==================================================
   SHARE
================================================== */

.share {
    width: fit-content;
}

.share {
    display: inline-flex !important;
    align-items: center !important;
}


/* ==================================================
   BUTTON
================================================== */

.share-button {
    appearance: none;
}

.share-button {
    cursor: pointer;
}

.share-button {
    min-height: 38px;
}

.share-button {
    padding: 5px 14px 5px 6px;
}

.share-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.share-button {
    color: var(--color-white);
    background: var(--gradient-primary-short);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-pill);
}

.share-button {
    box-shadow:
        0 8px 22px rgba(212, 173, 86, .2),
        var(--shadow-inset);
}

.share-button {
    font-family: 'bold-font';
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}

.share-button {
    transition:
        transform var(--transition-soft),
        box-shadow var(--transition-soft);
}


/* ==================================================
   ICON
================================================== */

.share-icon {
    width: 28px;
    height: 28px;
}

.share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.share-icon {
    background: rgba(0, 0, 0, .12);
    border-radius: var(--radius-pill);
}

.share-icon svg {
    width: 13px;
    height: 13px;
}

.share-icon svg {
    display: block;
}


/* ==================================================
   LABEL
================================================== */

.share-label {
    white-space: nowrap;
}


/* ==================================================
   HOVER
================================================== */

.share-button:hover {
    box-shadow:
        0 12px 28px rgba(212, 173, 86, .28),
        var(--shadow-inset);
}

.share-button:hover {
    transform: translateY(-2px);
}


/* ==================================================
   ACTIVE
================================================== */

.share-button:active {
    transform: translateY(0);
}


/* ==================================================
   COPIED
================================================== */

.share-button.is-copied {
    box-shadow:
        0 12px 28px rgba(212, 173, 86, .28),
        var(--shadow-inset);
}


/* ==================================================
   DISABLED
================================================== */

.share-button:disabled {
    opacity: .65;
}

.share-button:disabled {
    cursor: default;
}

.share-button:disabled {
    transform: none;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media screen and (max-width: 768px) {

    .share-button {
        min-height: 36px;
    }

    .share-button {
        padding-right: 12px;
    }

}