:root {
    --social-share-height: 38px
}

.meehhobar-social-share {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    margin: 0;
    padding: 0;
}
.meehhobar-social-share-item {
    position: relative;
    padding: 0 8px;
    overflow: hidden;
}

@keyframes shine {100%{right:125%}}
@media (pointer: fine) {
    .meehhobar-social-share-item::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
        pointer-events: none;
        transform: skewX(-25deg);
    }
    .meehhobar-social-share-item:hover::before {
        animation: shine .7s;
    }
}

.share-icon-svg {
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
}

/* component, inspector */
.components-button-group .components-button:last-child {
    margin-left: 6px
}
.sns-button-list .components-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(50% - 4px);
    padding: 6px 10px 6px 4px
}
.sns-button-list .components-button .sns-activation {
    font-weight: bold;
    font-size: 1.6em
}

/* SNS brand color */
.meehhobar-social-share-item.facebook {
    background: rgb(59,89,152);
}
.meehhobar-social-share-item.x {
    background: black;
}
.meehhobar-social-share-item.hatena {
    background: rgb(53,113,221);
}
.meehhobar-social-share-item.pinterest {
    background: rgb(206,15,25);
}
.meehhobar-social-share-item.line {
    background: rgb(22,207,1);
}
.meehhobar-social-share-item.linkedin {
    background: rgb(10,102,194);
}
.meehhobar-social-share-item.whatsapp {
    background: rgb(63,195,81);
}
.meehhobar-social-share-item.reddit {
    background: rgb(255,87,0);
}
.meehhobar-social-share-item.tumblr {
    background: rgb(52,82,111);
}
.meehhobar-social-share-item.diigo {
    background: rgb(82,133,196);
}
.meehhobar-social-share-item.digg {
    background: rgb(41,41,41);
}
.meehhobar-social-share-item.flipboard {
    background: rgb(225,40,40);
}
.meehhobar-social-share-item.meneame {
    background: rgb(255,100,0);
}
.meehhobar-social-share-item.fark {
    background: rgb(106,106,156);
}
.meehhobar-social-share-item.odnoklassniki {
    background: rgb(215,120,45);
}
.meehhobar-social-share-item.sinaweibo {
    background: rgb(225,23,44);
}
.meehhobar-social-share-item.vk {
    background: rgb(74,108,145);
}
.meehhobar-social-share-item.snapchat {
    background: rgb(254,252,3);
}
.meehhobar-social-share-item.xing {
    background: rgb(26,117,118);
}
.meehhobar-social-share-item.livejournal {
    background: rgb(0,176,234);
}
.meehhobar-social-share-item.buffer {
    background: rgb(41,41,41);
}
.meehhobar-social-share-item.douban {
    background: rgb(45,150,60);
}
.meehhobar-social-share-item.hackernews {
    background: rgb(255,64,1);
}
.meehhobar-social-share-item.instapaper {
    background: rgb(41,41,41);
}
.meehhobar-social-share-item.pocket {
    background: rgb(238,64,85);
}
.meehhobar-social-share-item.qzone {
    background: rgb(241,196,14);
}
.meehhobar-social-share-item.kindleit {
    background: rgb(54,60,61);
}
.meehhobar-social-share-item.microsoftteams {
    background: rgb(81,91,193);
}
.meehhobar-social-share-item.naver {
    background: rgb(3,188,94);
}
.meehhobar-social-share-item.plurk {
    background: rgb(255,87,78);
}
.meehhobar-social-share-item.pinboard {
    background: rgb(31,54,242);
}
.meehhobar-social-share-item.tencentqq {
    background: rgb(87,144,247);
}
.meehhobar-social-share-item.yummly {
    background: rgb(224,96,31);
}
.meehhobar-social-share-item.diaspora {
    background: rgb(41,41,41);
}
.meehhobar-social-share-item.surfingbird {
    background: rgb(108,211,255);
}
.meehhobar-social-share-item.refind {
    background: rgb(66,134,244);
}
.meehhobar-social-share-item.renren {
    background: rgb(0,91,170);
}
.meehhobar-social-share-item.telegram {
    background: rgb(43,182,245);
}

.meehhobar-social-share-item .meehhobar-social-share-anchor {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: var(--social-share-height);
    color: white;
    padding: .4em 0
}
.meehhobar-social-share-item .share-icon-svg-snapchat {
    fill: rgb(51,51,51);
}