/* vc-svg-social-icons — frontend styles */

:root {
    --vcsi-size:     40px;
    --vcsi-gap:      12px;
    --vcsi-radius:   50px;
    --vcsi-pad:      10px;
    --vcsi-bg:       transparent;
    --vcsi-hover-bg: transparent;
}

/* Wrapper */
.vcsi-wrapper {
    display: block;
    width: 100%;
}

/* Alignment */
.vcsi-align-left   .vcsi-icons-row { justify-content: flex-start; }
.vcsi-align-center .vcsi-icons-row { justify-content: center; }
.vcsi-align-right  .vcsi-icons-row { justify-content: flex-end; }

/* Icon row */
.vcsi-icons-row {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--vcsi-gap);
    margin:      0;
    padding:     0;
    list-style:  none;
}

/* Each icon link */
.vcsi-icon-link {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           calc( var(--vcsi-size) + var(--vcsi-pad) * 2 );
    height:          calc( var(--vcsi-size) + var(--vcsi-pad) * 2 );
    border-radius:   var(--vcsi-radius);
    background:      var(--vcsi-bg);
    padding:         var(--vcsi-pad);
    text-decoration: none;
    transition:      background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    flex-shrink:     0;
}

.vcsi-icon-link:hover,
.vcsi-icon-link:focus-visible {
    background:      var(--vcsi-hover-bg);
    transform:       translateY(-2px);
    box-shadow:      0 4px 16px rgba(0,0,0,.15);
    outline:         none;
}

/* SVG image */
.vcsi-icon-inner {
    display: block;
    width:   var(--vcsi-size);
    height:  var(--vcsi-size);
}

.vcsi-svg-img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: contain;
}

/* No icons placeholder */
.vcsi-no-icons {
    color:      #999;
    font-style: italic;
    font-size:  .875em;
}