Floating Social Media Icons Bar

<?php
if ( ! function_exists( 'scseed_social_bar_output' ) ) :

function scseed_social_bar_output() {
    $links = apply_filters( 'scseed_social_bar_links', array(
        array(
            'url'   => '#',
            'label' => 'Facebook',
            'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>',
        ),
        array(
            'url'   => '#',
            'label' => 'X (Twitter)',
            'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>',
        ),
        array(
            'url'   => '#',
            'label' => 'Instagram',
            'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>',
        ),
        array(
            'url'   => '#',
            'label' => 'LinkedIn',
            'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>',
        ),
        array(
            'url'   => '#',
            'label' => 'YouTube',
            'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.6.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58A2.78 2.78 0 0 0 3.4 19.54C5.12 20 12 20 12 20s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58zM9.75 15.02V8.98L15.5 12l-5.75 3.02z"/></svg>',
        ),
    ) );

    echo '<div class="scseed-social-bar">';
    foreach ( $links as $link ) {
        if ( empty( $link['url'] ) || empty( $link['label'] ) ) {
            continue;
        }
        $url   = esc_url( $link['url'] );
        $label = esc_attr( $link['label'] );
        $icon  = isset( $link['icon'] ) ? $link['icon'] : '';
        echo '<a href="' . $url . '" target="_blank" rel="noopener noreferrer" aria-label="' . $label . '">';
        echo '<span class="scseed-sb-icon">' . $icon . '</span>';
        echo '<span class="scseed-sb-label">' . esc_html( $link['label'] ) . '</span>';
        echo '</a>';
    }
    echo '</div>';
}
add_action( 'wp_footer', 'scseed_social_bar_output' );

endif;

.scseed-social-bar {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9990;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scseed-social-bar a {
    display: flex;
    align-items: center;
    background: #333333;
    color: #ffffff;
    width: 40px;
    height: 40px;
    overflow: hidden;
    text-decoration: none;
    border-radius: 0 4px 4px 0;
    transition: width 0.25s ease, background 0.25s ease;
}

.scseed-social-bar a:hover {
    width: 130px;
    background: #7c5cff;
}

.scseed-sb-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scseed-sb-label {
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 600;
    padding-right: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s ease 0.05s;
}

.scseed-social-bar a:hover .scseed-sb-label {
    opacity: 1;
}

@media (max-width: 768px) {
    .scseed-social-bar a {
        width: 32px;
        height: 32px;
    }

    .scseed-sb-icon {
        width: 32px;
        height: 32px;
    }

    .scseed-sb-icon svg {
        width: 14px;
        height: 14px;
    }

    .scseed-social-bar a:hover {
        width: 110px;
    }
}