/*-------------------------------------------*\
    2.7. Avatar
\*-------------------------------------------*/

.u-avatar {
	width: $avatar;
	height: $avatar;

  &-image {
    position: relative;

    &-overlay {
      opacity:0;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
    }

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

    &:hover {
      .u-avatar-image-overlay {
        background-color: $primary;
        opacity: 0.851;
        transition: all 0.5s ease-in-out;
      }
    }
  }
}

.u-xs-avatar {
  width: $avatar-xs;
  height: $avatar-xs;
}

.u-sm-avatar {
	width: $avatar-sm;
	height: $avatar-sm;
}

.u-lg-avatar {
    @each $breakpoint in map-keys($grid-breakpoints) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        &#{$infix} {
            @include media-breakpoint-up($breakpoint) {
                width: $avatar-lg;
                height: $avatar-lg;
            }
        }
    }
}

.u-xl-avatar {
  width: $avatar-xl;
  height: $avatar-xl;
}