/* =========================================================
   Tranquilvæj Share Buttons
========================================================= */

/* =========================================================
   01. Base
========================================================= */

.tranquil-share{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

.tranquil-share .c-shareBtns__list{
    width:100% !important;
    max-width:none !important;
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:stretch !important;
    border:none !important;
}


/* =========================================================
   02. Display Order
========================================================= */

.tranquil-share .-comment{
    --order-custom:10;
}

.tranquil-share .-twitter-x{
    --order-custom:110;
}

.tranquil-share .-threads{
    --order-custom:120;
}

.tranquil-share .-bluesky{
    --order-custom:130;
}

.tranquil-share .-line{
    --order-custom:140;
}

.tranquil-share .-facebook{
    --order-custom:150;
}

.tranquil-share .-pinterest{
    --order-custom:160;
}

.tranquil-share .-hatebu{
    --order-custom:170;
}

.tranquil-share .-note{
    --order-custom:175;
}

.tranquil-share .-reddit{
    --order-custom:180;
}

.tranquil-share .-linkedin{
    --order-custom:190;
}

.tranquil-share .-whatsapp{
    --order-custom:200;
}

.tranquil-share .-native-share{
    --order-custom:300;
}

.tranquil-share .-story-card{
    --order-custom:310;
}

.tranquil-share .-email{
    --order-custom:320;
}

.tranquil-share .-embed{
    --order-custom:330;
}

.tranquil-share .-copy{
    --order-custom:340;
}

.tranquil-share .-rss{
    --order-custom:350;
}

.tranquil-share.is-order-custom .c-shareBtns__item{
    order:var(--order-custom,999);
}


/* =========================================================
   03. Layout
========================================================= */

.tranquil-share .c-shareBtns__list{
    flex-wrap:nowrap !important;
    column-gap:1px !important;
    row-gap:0 !important;
}

.tranquil-share .c-shareBtns__item{
    flex:1 1 0 !important;
    width:0 !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
}

.tranquil-share .c-shareBtns__btn{
    position:relative;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:36px !important;
    min-width:0 !important;
    min-height:36px !important;
    padding:8px !important;
    margin:0 !important;
    box-sizing:border-box;
}

@media (max-width:767px){

    .tranquil-share .c-shareBtns__list{
        flex-wrap:wrap !important;
        column-gap:1px !important;
        row-gap:4px !important;
    }

    .tranquil-share.is-layout-5 .c-shareBtns__item{
        flex:0 0 calc((100% - 4px) / 5) !important;
        width:calc((100% - 4px) / 5) !important;
    }

    .tranquil-share.is-layout-6 .c-shareBtns__item{
        flex:0 0 calc((100% - 5px) / 6) !important;
        width:calc((100% - 5px) / 6) !important;
    }

}


/* =========================================================
   04. Button Reset
========================================================= */

.tranquil-share button.c-shareBtns__btn{
    -webkit-appearance:none !important;
    appearance:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    color:inherit !important;
    font:inherit !important;
    line-height:inherit !important;
    cursor:pointer;
}


/* =========================================================
   05. Icons
========================================================= */

.tranquil-share .tranquil-action-icon,
.tranquil-share .tranquil-brand-icon,
.tranquil-share .tranquil-copy-icon{
    display:block;
    width:1em;
    height:1em;
    margin:0;
    padding:0;
    flex:none;
}


/* =========================================================
   06. Individual Icon Adjustment
========================================================= */

.tranquil-share .-comment .tranquil-comment-icon{
    width:1.05em;
    height:1.05em;
}

.tranquil-share .-threads .tranquil-brand-icon,
.tranquil-share .-reddit .tranquil-brand-icon,
.tranquil-share .-whatsapp .tranquil-brand-icon{
    width:1.05em;
    height:1.05em;
}

.tranquil-share .-line .c-shareBtns__icon{
    transform:scale(1.2);
}

.tranquil-share .-whatsapp .tranquil-brand-icon{
    transform:scale(1.2);
}

.tranquil-share .-linkedin .tranquil-brand-icon{
    transform:scale(1.16);
}

.tranquil-share .-threads .tranquil-brand-icon{
    transform:scale(1.2);
}

.tranquil-share .-native-share .tranquil-action-icon,
.tranquil-share .-story-card .tranquil-action-icon,
.tranquil-share .-email .tranquil-action-icon,
.tranquil-share .-embed .tranquil-action-icon,
.tranquil-share .-rss .tranquil-action-icon,
.tranquil-share .-copy .tranquil-copy-icon{
    transform:scale(1.15);
}

.tranquil-share .-twitter-x .c-shareBtns__icon{
    transform:scale(.90);
}

.tranquil-share .-bluesky .tranquil-brand-icon{
    transform:scale(.90);
}


/* =========================================================
   07. Colors
========================================================= */

.tranquil-share .-bluesky .c-shareBtns__btn{
    color:#1185FE !important;
}

.tranquil-share .-threads .c-shareBtns__btn{
    background:transparent !important;
    color:#383D38 !important;
}

.tranquil-share .-threads .tranquil-brand-icon path:first-of-type{
    fill:transparent !important;
}

.tranquil-share .-threads .tranquil-brand-icon path:not(:first-of-type){
    fill:#383D38 !important;
}

.tranquil-share .-reddit .c-shareBtns__btn{
    color:#FF5700 !important;
}

.tranquil-share .-linkedin .c-shareBtns__btn{
    color:#0A66C2 !important;
}

.tranquil-share .-whatsapp .c-shareBtns__btn{
    background:transparent !important;
    color:#2CB742 !important;
}

.tranquil-share .-whatsapp .whatsapp-icon-mark{
    fill:currentColor !important;
}

.tranquil-share .-note .c-shareBtns__btn{
    color:#000000 !important;
}

.tranquil-share .-note .tranquil-brand-icon--note{
    width:1.05em;
    height:1.05em;
}


/* =========================================================
   08. Hover
========================================================= */

@media (hover:hover){

    .tranquil-share .-bluesky .c-shareBtns__btn:hover{
        background:#1185FE !important;
        color:#fff !important;
    }

    .tranquil-share .-bluesky .c-shareBtns__btn:hover svg path{
        fill:#fff !important;
    }

    .tranquil-share .-threads .c-shareBtns__btn:hover{
        background:#383D38 !important;
        color:#fff !important;
    }

    .tranquil-share .-threads .c-shareBtns__btn:hover
    .tranquil-brand-icon path:first-of-type{
        fill:transparent !important;
    }

    .tranquil-share .-threads .c-shareBtns__btn:hover
    .tranquil-brand-icon path:not(:first-of-type){
        fill:#fff !important;
    }

    .tranquil-share .-reddit .c-shareBtns__btn:hover{
        background:#FF5700 !important;
        color:#fff !important;
    }

    .tranquil-share .-reddit .c-shareBtns__btn:hover
    .reddit-icon-mark{
        fill:#fff !important;
    }

    .tranquil-share .-linkedin .c-shareBtns__btn:hover{
        background:#0A66C2 !important;
        color:#fff !important;
    }

    .tranquil-share .-linkedin .c-shareBtns__btn:hover svg path{
        fill:#fff !important;
    }

    .tranquil-share .-whatsapp .c-shareBtns__btn:hover{
        background:#2CB742 !important;
        color:#fff !important;
    }

    .tranquil-share .-whatsapp .c-shareBtns__btn:hover
    .whatsapp-icon-mark{
        fill:#fff !important;
    }

    .tranquil-share .-note .c-shareBtns__btn:hover{
        background:#000000 !important;
        color:#ffffff !important;
    }

    .tranquil-share .-comment .c-shareBtns__btn:hover{
        background:#333333 !important;
        color:#fff !important;
    }

    .tranquil-share .-native-share .c-shareBtns__btn:hover,
    .tranquil-share .-story-card .c-shareBtns__btn:hover,
    .tranquil-share .-email .c-shareBtns__btn:hover,
    .tranquil-share .-rss .c-shareBtns__btn:hover,
    .tranquil-share .-embed .c-shareBtns__btn:hover,
    .tranquil-share .-copy .c-shareBtns__btn:hover{
        background:#404040 !important;
        color:#fff !important;
    }

    .tranquil-share .-story-card .c-shareBtns__btn:hover svg *{
        stroke:#fff !important;
    }

    .tranquil-share .-story-card .c-shareBtns__btn:hover svg rect,
    .tranquil-share .-story-card .c-shareBtns__btn:hover svg circle,
    .tranquil-share .-story-card .c-shareBtns__btn:hover svg path{
        fill:none !important;
    }

    .tranquil-share .-native-share .c-shareBtns__btn:hover svg path,
    .tranquil-share .-email .c-shareBtns__btn:hover svg path,
    .tranquil-share .-rss .c-shareBtns__btn:hover svg path,
    .tranquil-share .-embed .c-shareBtns__btn:hover svg path{
        stroke:#fff !important;
    }

    .tranquil-share .-rss .c-shareBtns__btn:hover svg circle{
        fill:#fff !important;
    }

    .tranquil-share .-copy .c-shareBtns__btn:hover
    .tranquil-copy-icon__default path{
        fill:#fff !important;
    }

    .tranquil-share .-copy .c-shareBtns__btn:hover
    .tranquil-copy-icon__copied rect,
    .tranquil-share .-copy .c-shareBtns__btn:hover
    .tranquil-copy-icon__copied path{
        stroke:#fff !important;
    }

}


/* =========================================================
   09. Copy Icon State
========================================================= */

.tranquil-copy-icon__default,
.tranquil-copy-icon__copied{
    transition:opacity .18s ease;
}

.tranquil-copy-icon__default{
    opacity:1;
}

.tranquil-copy-icon__copied{
    opacity:0;
}

.tranquil-urlcopy.-copied .tranquil-copy-icon__default{
    opacity:0;
}

.tranquil-urlcopy.-copied .tranquil-copy-icon__copied{
    opacity:1;
}

.tranquil-share .tranquil-urlcopy{
    color:inherit !important;
    opacity:1 !important;
}

.tranquil-share .-copy .c-shareBtns__btn{
    color:inherit !important;
    opacity:1 !important;
}

.tranquil-share .-copy .tranquil-copy-icon rect,
.tranquil-share .-copy .tranquil-copy-icon path{
    stroke:currentColor !important;
    opacity:1 !important;
}


/* =========================================================
   10. Popup
========================================================= */

.tranquil-share .c-shareBtns__item.-copy,
.tranquil-share .c-shareBtns__item.-embed,
.tranquil-share .c-shareBtns__item.-native-share{
    position:relative !important;
    overflow:visible !important;
}

.tranquil-copy-popup,
.tranquil-embed-popup,
.tranquil-share-popup{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    bottom:calc(100% + 12px) !important;
    width:max-content !important;
    min-width:max-content !important;
    max-width:none !important;
    padding:7px 11px !important;
    background:#404040 !important;
    color:#fff !important;
    border:none !important;
    border-radius:5px !important;
    font-size:12px !important;
    font-weight:400 !important;
    line-height:1.4 !important;
    text-align:center !important;
    white-space:nowrap !important;
    writing-mode:horizontal-tb !important;
    transform:translate(-50%,5px) !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:9999;
    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;
}

.tranquil-copy-popup.-show,
.tranquil-embed-popup.-show,
.tranquil-share-popup.-show{
    opacity:1 !important;
    visibility:visible !important;
    transform:translate(-50%,0) !important;
}


/* =========================================================
   11. Hover Tooltip
========================================================= */

.tranquil-share .c-shareBtns__item{
    position:relative;
    overflow:visible !important;
}

@media (hover:hover){

    .tranquil-share .c-shareBtns__btn::after{
        content:attr(title);
        position:absolute;
        left:50%;
        bottom:calc(100% + 10px);
        width:max-content;
        max-width:220px;
        padding:6px 9px;
        background:#404040;
        color:#fff;
        border-radius:4px;
        font-size:11px;
        font-weight:400;
        line-height:1.35;
        letter-spacing:.01em;
        white-space:nowrap;
        opacity:0;
        visibility:hidden;
        transform:translate(-50%,4px);
        pointer-events:none;
        z-index:9998;
        transition:
            opacity .16s ease,
            transform .16s ease,
            visibility .16s ease;
    }

    .tranquil-share .c-shareBtns__btn:hover::after,
    .tranquil-share .c-shareBtns__btn:focus-visible::after{
        opacity:1;
        visibility:visible;
        transform:translate(-50%,0);
    }

}


/* =========================================================
   12. Accessibility / Interaction
========================================================= */

.tranquil-share .c-shareBtns__btn{
    -webkit-tap-highlight-color:transparent;
}

.tranquil-share button.c-shareBtns__btn:focus-visible,
.tranquil-share a.c-shareBtns__btn:focus-visible{
    outline:2px solid currentColor;
    outline-offset:4px;
}


/* =========================================================
   13. Reduced Motion
========================================================= */

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

    .tranquil-copy-icon__default,
    .tranquil-copy-icon__copied,
    .tranquil-copy-popup,
    .tranquil-embed-popup,
    .tranquil-share-popup,
    .tranquil-share .c-shareBtns__btn,
    .tranquil-share .c-shareBtns__btn::after{
        transition:none !important;
    }

}