.site-drawer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.9rem;
}

.site-drawer__socials .site-social-link {
    position: relative;
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: var(--sps-white);
    background: rgba(255, 255, 255, 0.04);
    text-decoration: none;
    transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.site-drawer__socials .site-social-link::before {
    content: "";
    position: absolute;
    inset: -40% auto -40% -60%;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
    transform: skewX(-18deg);
    transition: left 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-drawer__socials .site-social-link:hover,
.site-drawer__socials .site-social-link:focus-visible {
    color: var(--sps-white);
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.09);
}

.site-drawer__socials .site-social-link:hover::before,
.site-drawer__socials .site-social-link:focus-visible::before {
    left: 125%;
}

.site-drawer__socials .site-social-link svg,
.site-drawer__socials .site-social-link span {
    position: relative;
    z-index: 1;
}

.site-drawer__socials .site-social-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.site-drawer__socials .site-social-link span {
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
}