.socials-icons {
    display: flex;
    gap: $spacing-md;

    @include media-breakpoint-down(sm) {
        gap: 10px;
    }
}

.social-icon {
    align-items: center;
    border: 1px solid $color-shade-darkest;
    border-radius: $border-radius-md;
    display: flex;
    height: 40px;
    justify-content: center;
    padding: 6px;
    transition: $transition-default;
    width: 40px;

    &.social-icon--x {
        padding: 3px;
    }

    @include media-breakpoint-down(sm) {
        border-radius: $border-radius-xs;
        height: 26px;
        width: 26px;
    }

    &:hover {
        border-color: $color-primary;
    }

    > svg {
        color: $color-shade-darkest;
        height: 100%;
        width: 100%;
    }
}
