/*
Custom css file for share icon styling
Share icon visible on each recipe single page
*/

/* Container and Main button */
.share-icon-buttons,
.main_share_button{
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: 0.2s;
}

.share-icon-buttons {
    height: fit-content;
    width: fit-content;
    margin: 0 !important;
    padding: 0 !important;
}


.share-icon-buttons:hover { padding: 60px;}
.share-icon-buttons:hover .button { box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px var(--meteoWhite);}

.main_share_button {
    padding: 10px;
    border: none;
    background: linear-gradient(120deg, rgba(184, 168, 95, 1) 0%, rgba(170, 143, 24, 1) 46%, rgba(51, 42, 0, 1) 100%);
    box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px var(--meteoWhite);
    z-index: 100;
}

/* Share Icon buttons */
.share_button {
    display: grid;
    place-items: center;
    padding: 10px;
    border: none;
    background: linear-gradient(120deg, rgba(184, 168, 95, 1) 0%, rgba(170, 143, 24, 1) 46%, rgba(51, 42, 0, 1) 100%);
    box-shadow: 5px 5px 12px rgba(202, 202, 202, 0), -5px -5px 12px rgba(255, 255, 255, 0);
    transition: 0.3s;
    border-radius: 50%;
}

button.main_share_button svg,
a.share_button svg{
    width: 28px;
    height: 28px;
}
button.main_share_button svg path,
a.share_button svg path{ fill: var(--meteoWhite) !important;}

a.share_button:hover{ 
    background: var(--meteoWhite);
    box-shadow: 5px 5px 12px rgba(80, 80, 80, 1), -5px -5px 12px rgba(40, 40, 40, 1);

}
a.share_button:hover svg path{ fill: var(--meteoRibbonColor) !important;}

.share-icon-buttons:hover .facebook-button,
.share-icon-buttons:hover .whatsup-button,
.share-icon-buttons:hover .instagram-button,
.share-icon-buttons:hover .twitter-button,
.share-icon-buttons:hover .pinterest-button,
.share-icon-buttons:hover .linkedin-button,
.share-icon-buttons:hover .skype-button,
.share-icon-buttons:hover .mail-button{ box-shadow: 5px 5px 12px #cacaca, -5px -5px 12px var(--meteoWhite);}

.share-icon-buttons:hover .facebook-button { translate: -80px 0px !important;}
.share-icon-buttons:hover .whatsup-button { translate: -55px -55px;}
.share-icon-buttons:hover .instagram-button { translate: 0px -80px;}
.share-icon-buttons:hover .twitter-button { translate: 55px -55px;}
.share-icon-buttons:hover .pinterest-button { translate: 80px 0px;}
.share-icon-buttons:hover .linkedin-button { translate: 55px 55px;}
.share-icon-buttons:hover .skype-button { translate: 0px 80px;}
.share-icon-buttons:hover .mail-button { translate: -55px 55px;}