$social-icon-size: 20px;
$social-icon-hover-size: 35px;

@mixin social_icon_transition($property) {
  @include transition($property 0.15s ease-in-out);
}

.footer-tagline {
  padding-top: $padding-small-vertical;
  padding-bottom: $padding-small-vertical;
}

.footer-main_block {
  @media screen and (min-width: $screen-sm) {
    padding-left: 0;
    padding-right: 0;
  }
}

.footer-main_block-nav_group {
  padding-top: $padding-default-vertical;
  padding-bottom: $padding-default-vertical;
}

.footer-main_block-nav_group-item {
  padding-top: $padding-xs-vertical;
  padding-bottom: $padding-xs-vertical;

  @media screen and (min-width: $screen-md) {
    padding-top: $padding-xs-vertical * 1.5;
    padding-bottom: $padding-xs-vertical * 1.5;
  }
}

a.footer-main_block-nav_group-link {
  display: inline-block;
  color: $color-gray-400;
}

.footer-info_block {
  @media screen and (min-width: $screen-sm) {
    padding-left: 0;
    padding-right: 0;
  }

  @media screen and (min-width: $screen-md) {
    padding-top: $padding-large-vertical;
    padding-bottom: $padding-large-vertical;
  }
}

.footer-info_block-address {
  margin-bottom: 0;

  @media screen and (min-width: $screen-xs) {
    margin-top: $padding-default-vertical;
  }

  @media screen and (min-width: $screen-lg) {
    margin-top: 0;
  }
}

.footer-info_block-legal {
  @media screen and (min-width: $screen-xs) {
    margin-top: $padding-default-vertical;
  }

  @media screen and (min-width: $screen-lg) {
    margin-top: 0;
  }
}

.footer-info_block-social_link {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: $social-icon-size;
  height: $social-icon-size;
  margin-right: $padding-default-horizontal;

  &::after {
    position: absolute;
    top: -($social-icon-hover-size - $social-icon-size) / 2;
    left: -($social-icon-hover-size - $social-icon-size) / 2;
    width: $social-icon-hover-size;
    height: $social-icon-hover-size;
    background-color: $color-gray-500;
    border-radius: 50%;
    opacity: 0;
    z-index: $zindex-navbar - 2;
    @include social_icon_transition(opacity);
    content: "";
  }

  &:hover,
  &:active {
    text-decoration: none;

    &::after {
      opacity: 1;
    }

    .footer-info_block-social_icon {
      color: $color-white;
    }
  }
}

.footer-info_block-social_icon {
  position: relative;
  z-index: $zindex-navbar - 1;
  @include social_icon_transition(color);
}

a.footer-info_block-legal-link {
  padding-left: $padding-small-horizontal;
  padding-right: $padding-small-horizontal;
  color: $color-white;
}