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


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

.share {
    width: fit-content;
}

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


/* ==================================================
   COUNTER
================================================== */

.share-counter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.share-counter {
    min-height: 38px;
    padding: 0 13px;
}

.share-counter {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.04)
        );

    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-pill);
}

.share-counter {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04);
}

.share-count {
    font-family: 'bold-font';
    font-size: 12px;
    font-weight: 400;
    color: var(--color-white);
}

.share-counter-label {
    font-family: 'content-font';
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,.58);
}


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

.share-button {
    appearance: none;
    cursor: pointer;
}

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

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

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

.share-button {
    box-shadow:
        0 8px 22px rgba(233,64,27,.20),
        var(--shadow-inset);
}

.share-button {
    font-family: 'content-font';
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-white);
}

.share-button {
    transition:
        transform var(--transition-soft),
        filter 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,.14);
    border-radius: var(--radius-pill);
}

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


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

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


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

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

.share-button:hover {
    filter: brightness(1.08);
}

.share-button:hover {
    box-shadow:
        0 12px 28px rgba(233,64,27,.28),
        var(--shadow-inset);
}


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

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


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

.share-button.is-copied {
    filter: brightness(1.08);
}


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

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

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


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

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

    .share {
        gap: 6px;
    }

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

    .share-counter {
        padding: 0 11px;
    }

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

}