.gl-avatar-link {
  @include gl-display-inline-flex;

  .gl-avatar {
    @include gl-transition-property-border-color;
    @include gl-transition-duration-slow;
    @include gl-transition-timing-function-ease;
  }

  &:hover {
    @include gl-text-decoration-none;

    .gl-avatar {
      @include gl-border-gray-a-24;
    }

    .gl-avatar-labeled {
      &-label {
        @include gl-text-decoration-underline;
        @include gl-text-decoration-color-gray-900;
      }

      &-sublabel {
        @include gl-text-decoration-underline;
        @include gl-text-decoration-color-gray-500;
      }
    }
  }

  &:active,
  &:focus,
  &:focus:active {
    // allow the focus ring to be placed on the avatar image instead of parent anchor so that the focus ring takes the rounded shapes of the avatars
    box-shadow: none !important;
    outline: none !important;

    .gl-avatar {
      @include gl-focus;
    }
  }
}