.socials {
    --font-size: var(--root-font-size); /* Reset, use REM */
}

.socials__item {
    --color-background: transparent;
    --color-border: var(--root-color-text-link);
    --color-icon: var(--root-color-text-link);
    --has-border: 1;
    --shape-round: 1; /* 1 = round, 0 = square */
    --width-border: var(--root-border-width);
}

.socials__item:focus,
.socials__item:hover {
    --color-background: var(--root-color-text-link);
    --color-border: var(--root-color-text-link);
    --color-icon: var(--root-color--white);
}

.socials__item .link {
    /*--color: var(--root-color-text-link);*/
    /*--font-family: inherit;*/
    /*--font-size: var(--root-font-size);*/
    /*--font-style: normal;*/
    /*--font-weight: var(--root-font-weight--normal);*/
    /*--line-height: inherit;*/
    /*--text-underline-offset: var(--root-text-underline-offset);*/
    /*--text-decoration-thickness: var(--root-text-decoration-thickness);*/
    /*--text-decoration-color: inherit;*/
}

.socials__item .link .icon {
    /*--fill: currentColor;*/
    --height: 50%;
}

.socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}

.socials__item .link {
    align-items: center;
    border-style: solid;
    display: flex;
    height: 2.5em;
    justify-content: center;
    width: 2.5em;
}

.socials__item .link .icon {
    margin-right: 0;
}

.socials {
    font-size: var(--font-size, 1rem); /* Reset, use REM */
}

.socials__item .link {
    background-color: var(--color-background, transparent);
    border-color: var(--color-border, black);
    border-radius: calc(var(--has-border, 1) * var(--shape-round, 1) * 50%);
    border-width: calc(var(--has-border, 1) * var(--width-border, 0.063em));
}

.socials__item .link .icon {
    fill: var(--color-icon, black);
}