.socials {
    --rocket-ui-socials-icon-color: var(--rocket-color-grey-500);

    $this: &;

    &__list {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        column-gap: $rocket-spacing-size-4;
    }

    &__item {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &__link {
        @include transition;
        @include size(1.5rem);

        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--rocket-ui-socials-icon-color);
        text-decoration: none;
        transform: scale(1);

        svg {
            @include min-size(1.5rem);

            fill: currentColor;
        }

        @include event {
            transform: scale(1.25);
        }
    }
}