/**
 * Social Media Sidebar Stylesheet
 * Version: 2.0.0
 */

 :root {
    /* --- Main Customization --- */
    --sm-icon-size: 40px;
    --sm-icon-border-radius: 5px;
    --sm-icon-spacing: 2px;
    --sm-sidebar-position: 0; /* Adjusts 'right' or 'left' */

    /* --- Advanced Customization --- */
    --sm-icon-font-size-ratio: 0.6; /* Makes Font Awesome icon size 60% of the container */
    --sm-icon-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    --sm-icon-transition: all 0.3s ease;
    
    /* --- Hover Tooltip --- */
    --sm-tooltip-bg: #333;
    --sm-tooltip-color: #fff;
    --sm-tooltip-padding: 0 10px;
    --sm-tooltip-font-size: 14px;
    
    /* --- Brand Colors --- */
    --sm-color-facebook: #3b5998;
    --sm-color-twitter: #000000; /* Black for X icon */
    --sm-color-instagram: #c32aa3;
    --sm-color-youtube: #ff0000;
    --sm-color-pinterest: #bd081c;
    --sm-color-tiktok: #000000;
}

/* --- Base Sidebar Container --- */
.sm-sidebar {
    position: fixed;
    top: 50%;
    right: var(--sm-sidebar-position);
    transform: translateY(-50%);
    z-index: 9999;
}

/* --- General Icon Styling --- */
.sm-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--sm-icon-size);
    height: var(--sm-icon-size);
    margin-bottom: var(--sm-icon-spacing);
    border-radius: var(--sm-icon-border-radius);
    box-shadow: var(--sm-icon-shadow);
    transition: var(--sm-icon-transition);
    position: relative;
    text-decoration: none;
    color: #fff;
}

/* Font Awesome Icons */
.sm-icon i {
    font-size: calc(var(--sm-icon-size) * var(--sm-icon-font-size-ratio));
}

/* Embedded X SVG Icon */
.sm-x-icon {
    width: calc(var(--sm-icon-size) * var(--sm-icon-font-size-ratio));
    height: calc(var(--sm-icon-size) * var(--sm-icon-font-size-ratio));
    fill: currentColor;
}

/* --- Hover Tooltip --- */
.sm-icon::before {
    content: attr(title);
    position: absolute;
    right: var(--sm-icon-size);
    top: 0;
    background-color: var(--sm-tooltip-bg);
    color: var(--sm-tooltip-color);
    padding: var(--sm-tooltip-padding);
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: var(--sm-icon-transition);
    font-size: var(--sm-tooltip-font-size);
    border-radius: var(--sm-icon-border-radius) 0 0 var(--sm-icon-border-radius);
    white-space: nowrap;
    z-index: 10000;
}

.sm-icon:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* --- Applying Brand Colors --- */
.sm-icon.facebook  { background-color: var(--sm-color-facebook); }
.sm-icon.twitter   { background-color: var(--sm-color-twitter); }
.sm-icon.instagram { background-color: var(--sm-color-instagram); }
.sm-icon.youtube   { background-color: var(--sm-color-youtube); }
.sm-icon.pinterest { background-color: var(--sm-color-pinterest); }
.sm-icon.tiktok    { background-color: var(--sm-color-tiktok); }