.social-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em;
  font-size: 62px;
}

$social-button-size: 64px;
$social-button-icon-size: 0.4;
$social-button-background: #fff;
$social-button-active-color: #fff;
$social-button-transition-time: 0.3s;

$social-button-colors: (
  'mail': #0072c6,
  'facebook': #3b5999,
  'linkedin': #0077b5,
  'github': #6e5494,
  'codepen': #212121,
  'steam': #7da10e,
  'snapchat': #eec900,
  'twitter': #55acee,
  'instagram': #e4405f,
  'npmjs': #c12127,
);

.social-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  width: $social-button-size;
  height: $social-button-size;
  text-decoration: none;
  border-radius: 100%;
  background: $social-button-background;
  text-align: center;

  &::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    border-radius: 100%;
    transition: $social-button-transition-time;
  }

  &:focus,
  &:hover {
    color: $social-button-active-color;

    &::after {
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      margin-left: calc(-50% - 1px);
    }
  }

  i,
  svg {
    position: relative;
    z-index: 1;
    transition: $social-button-transition-time;
  }

  i {
    font-size: $social-button-size * $social-button-icon-size;
  }

}