/* 通常タイトルと本文の間に一定の余白があるが、余白分離れてSNSボタンが表示されると微妙なのでマイナスオフセットで余白を詰めている */
.veu_socialSet {
    margin-bottom: 1.5em;
    /* core の margin-block-start に margin-top が上書きされるのを防ぐ */
    &.veu_contentAddSection {
        margin-top: var(--vk-margin-block-bottom);
    }
    &.veu_socialSet-position-before {
        margin-top: -1em;
        margin-bottom: 2em;
    }
    &.veu_socialSet-auto.veu_socialSet-position-after {
        margin-top: 3em;
    }
    ul {
        display: flex;
		flex-wrap: wrap;
		gap: 6px;
		padding: 0;
		margin: 0 0 3px 0;
		list-style: none;
    }
    li {
        flex: 1 1 135px;
        background: none;
        position: relative;
        display: block;
        overflow: visible;
        box-sizing: border-box;
        margin: 0;
    }
    .sb_icon {
        .sb_icon_inner {
            display: block;
            overflow: hidden;
            width:100%;
			box-sizing: border-box;
            padding: 5px 10px;
            border-radius: var(--vk-size-radius);
            color: #fff;
            text-decoration: none;
            line-height: 100%;
            font-size: 90%;
            text-align: left;
            border:none;
            &:hover {
                box-shadow: none !important;
                transform: translateY(2px);
                cursor: pointer;
                transition: all 0.3s ease-in-out;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
            }
            .sns_txt {
                position: relative;
                top: -1px;
            }
            .icon_sns {
                font-size: 100%;
                padding: 5px 8px 5px 0;
                display: inline-block;
            }
        }
    }
    .sb_facebook a {
        background: #1877f2;
        box-shadow: 0 2px 0 rgb(52, 78, 132);
    }
    .sb_bluesky a {
        background: #1877f2;
        box-shadow: 0 2px 0 rgb(52, 78, 132);
    }
    .sb_hatena a {
        background: #007fc5;
        box-shadow: 0 2px 0 rgba(0, 103, 159, 1);
    }
    .sb_twitter a {
        background: #00abec;
        box-shadow: 0 2px 0 rgba(0, 126, 170, 1);
    }
    // X・Threads は背景が黒系のため、暗い影では立体表現がほぼ見えなくなる。
    // WCAG 1.4.11 の非テキストコントラスト 3:1 を満たす明るいグレー #666 を影に使う
    // （#666 vs #0f1419 = 3.22:1 / #666 vs #000 = 3.66:1）
    // X and Threads have near-black backgrounds, so a dark shadow makes the raised effect
    // almost invisible. Use the lighter gray #666 for the shadow to meet the 3:1 non-text
    // contrast of WCAG 1.4.11 ( #666 vs #0f1419 = 3.22:1 / #666 vs #000 = 3.66:1 ).
    .sb_x_twitter a {
        background: #0f1419;
        box-shadow: 0 2px 0 rgba(102, 102, 102, 1);
    }
    .sb_threads a {
        background: #000;
        box-shadow: 0 2px 0 rgba(102, 102, 102, 1);
    }
    // Threads は Font Awesome のブランドアイコンを使うため、他アイコンと視覚的な大きさを揃える
    // Threads uses a Font Awesome brand icon, so match its visual size to the other icons
    .sb_threads .sb_icon_inner i {
        font-size: 16px;
    }
    .sb_google a {
        background: #dd4b39;
        box-shadow: 0 2px 0 rgba(160, 53, 36, 1);
    }
    .sb_line a {
        background: #6ebd30;
        box-shadow: 0 2px 0 #5b9c28;
    }
    .sb_copy .sb_icon_inner {
        background: #555;
        box-shadow: 0 2px 0 #333;
        padding-bottom:4px;
        i {
            font-size:14px;
        }
    }
} //.veu_socialSet ul

.veu_count_sns_fb,
.veu_count_sns_hb {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 77%;
    line-height: 1;
    font-weight: bold;
}

@media (max-width: 767px) {
    .veu_socialSet {
        .veu_count_sns_fb,
        .veu_count_sns_hb {
            bottom: 2px;
        }
        .sb_icon a {
            padding: 8px 10px;
        }
    }
}

/*
.veu_socialSet と .veu_contentAddSection ２つつけているのは一つだと .content ul などの継承に負けるため
*/
.veu_socialSet.veu_contentAddSection ul {
    padding: 0;
    li {
        padding: 0;
        margin: 0;
    } //li
}
