:root {
    --nb-footer-social-networks-margin-bottom: 14px;

    --nb-footer-social-networks-title-color: var(--nb-color-white);
    --nb-footer-social-networks-title-font-size: var(--nb-h6-font-size);
    --nb-footer-social-networks-title-font-weight: var(--nb-h6-font-weight);

    --nb-footer-social-networks-width: 36px;
    --nb-footer-social-networks-height: 36px;
    --nb-footer-social-networks-bg: var(--nb-color-white);
    --nb-footer-social-networks-hover-bg: var(--nb-spec-color);
    --nb-footer-social-networks-border-radius: var(--nb-border-radius-xs);
}

.nb-footer-social-networks .nb-footer-social-networks-title {
    color: var(--nb-footer-social-networks-title-color);
    font-size: var(--nb-footer-social-networks-title-font-size);
    font-weight: var(--nb-footer-social-networks-title-font-weight);
    margin-bottom: var(--nb-footer-social-networks-margin-bottom);
}

.nb-footer-social-networks .nb-footer-social-networks-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.nb-footer-social-networks .nb-footer-social-networks-wrapper .nb-link:hover {
    color: var(--nb-color-white);
}

.nb-footer-social-networks .nb-footer-social-networks-wrapper .nb-link:hover > * {
    background-color: var(--nb-footer-social-networks-hover-bg);
}

.nb-footer-social-networks .nb-footer-social-networks-wrapper .nb-link > * {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--nb-footer-social-networks-width);
    height: var(--nb-footer-social-networks-height);
    background-color: var(--nb-footer-social-networks-bg);
    border-radius: var(--nb-footer-social-networks-border-radius);
}

@media screen and (max-width: 576px) {
    :root {
        --nb-footer-social-networks-margin-bottom: 24px;
    }
}