@use '@gear-js/ui/mixins' as *;
@use '@/shared/assets/styles/_shared.scss' as *;

@mixin icon($name) {
  @include transition();

  display: flex;

  &::before {
    content: url('@/shared/assets/images/socials/#{$name}.svg');
    font-size: 0;
  }

  &:hover {
    opacity: 0.5;
  }
}

.link {
  &:not(:last-child) {
    margin-right: 20px;
  }
}

.twitter {
  @include icon('twitter');
}

.github {
  @include icon('github');
}

.discord {
  @include icon('discord');
}

.medium {
  @include icon('medium');
}