/* Styles for SocialLinks component */
@layer components {
    .social-links {
        display: flex;
        gap: var(--space-xs);
        padding: 0;
        list-style: none;

        & .social-links__link {
            display: grid;
            place-items: center;
            inline-size: 2.75rem;
            block-size: 2.75rem;
            border: 1px solid var(--color-border-strong);
            color: var(--color-text);
            font-size: 1.25rem;
            transition:
                background-color var(--duration-fast) var(--ease-jab),
                border-color var(--duration-fast) var(--ease-jab),
                color var(--duration-fast) var(--ease-jab);

            &:hover {
                background-color: var(--color-accent);
                border-color: var(--color-accent);
                color: var(--color-on-accent);
            }
        }

        &[data-size="small"] .social-links__link {
            inline-size: 2.25rem;
            block-size: 2.25rem;
            font-size: 1.05rem;
        }
    }
}