.s_social_media {
    user-select: none;
    // Default icon size used by the builder RangeWithNumberInput control
    // Inherit to icons so the option panel reads 40px initially
    --fa-icon-size: 40px;
    $-size: map-get($spacers, 5);
    > * {
        display: inline-block;
        vertical-align: middle;
    }
    .s_social_media_title {
        margin: 0 .4rem 0 0;
    }
    a {
        i.fa, span.fa, .social_media_img {
            display: flex;
            justify-content: center;
            align-items: center;
            // Custom size via builder RangeWithNumberInput control
            &.o_sm_custom_size {
                // Always scale the icon glyph size, regardless of layout
                // Keep roughly the default 16px glyph for a 40px disk (0.4 ratio)
                font-size: calc(var(--fa-icon-size) * 0.4) !important;
            }
            // For non-stack layouts, also control the visual container
            &.o_sm_custom_size:not(.fa-stack) {
                width: var(--fa-icon-size) !important;
                height: var(--fa-icon-size) !important;
                line-height: var(--fa-icon-size) !important;
            }
            &[class*="o_cc"] {
                background-color: var(--o-cc-bg);
            }
            &:not(.small_social_icon, .fa-2x, .fa-3x, .fa-4x, .fa-5x) {
                &.rounded-circle,
                &.rounded,
                &.fa-stack {
                    width: $-size - .5rem;
                    height: $-size - .5rem;
                }
            }
        }
        // Margin should be same for all layout options.
        margin: .2rem;
    }
    &:not(.no_icon_color) {
        .s_social_media_facebook {
            &, &:hover, &:focus {
                @extend .text-facebook;
            }
        }
        .s_social_media_twitter {
            &, &:hover, &:focus {
                @extend .text-twitter;
            }
        }
        .s_social_media_linkedin {
            &, &:hover, &:focus {
                @extend .text-linkedin;
            }
        }
        .s_social_media_google {
            &, &:hover, &:focus {
                @extend .text-google-plus;
            }
        }
        .s_social_media_whatsapp {
            &, &:hover, &:focus {
                @extend .text-whatsapp;
            }
        }
        .s_social_media_pinterest {
            &, &:hover, &:focus {
                @extend .text-pinterest;
            }
        }
        .s_social_media_github {
            &, &:hover, &:focus {
                @extend .text-github;
            }
        }
        .s_social_media_instagram {
            &, &:hover, &:focus {
                @extend .text-instagram;
            }
        }
        .s_social_media_youtube {
            &, &:hover, &:focus {
                @extend .text-youtube;
            }
        }
        .s_social_media_tiktok {
            &, &:hover, &:focus {
                @extend .text-tiktok;
            }
        }
        .s_social_media_discord {
            &, &:hover, &:focus {
                @extend .text-discord;
            }
        }
    }
}