.profile-image {
  $component-name: ".profile-image";

  display: block;

  //This size is the default, and it matches the size used in a profile-image-list
  $size: calc(#{line-height("single", $include-calc: false)} + #{line-height("single", $include-calc: false, $fontsize-relative: ("current": 0, "target": -1))} + #{$width-border-slim * 2});
  width: #{$size};
  height: #{$size};

  border-radius: 50%;
  border: $width-border-slim solid color("background-secondary");
  object-fit: cover;
  object-position: center 15%;

  &--placeholder {
    font-size: font-size(0);
    line-height: 1em; //ensures better vertical alignment of all caps letters and numbers
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-stack {
    display: flex;

    .profile-image {
      flex-grow: 0;
      flex-shrink: 0;
      margin-right: spacing(-5, $times: -1);
      border-color: color("background");
      border-width: $width-border;

      @for $i from 1 through 20 {
        &:nth-child(#{$i}){
          z-index: $z-index-just-above-static + 20 - $i;
        }
      }

      &--placeholder {
        color: color("foreground");
        background-color: color("background-secondary");
      }
    }
  }

  &-list {

    li > a {
      //reset default text-link style for a-tags inside a ul
      background-image: none;
      text-shadow: none;

      &:active {
        background-image: none;
      }
    }

    &__item {
      //reset default li style
      padding: 0;
      &::before {
        content: none;
      }

      display: flex;
      align-items: center;
      margin: spacing(-3) 0;

      & > a {

        display: flex; //set display: flex for when content is wrapped in an a-tag an not direct childs of the li
        align-items: center;

        #{$component-name}__label__title {
          @include icon-style($position: "after") {
            @include set-icon("link-internal");
            margin-left: $width-border;
          }
        }

        &:hover {
          #{$component-name}__label {
            color: color("theme");
          }
        }

        &:active {
          #{$component-name}__label {
            color: color("theme-hover");
          }
        }

      }

      .profile-image {
        flex-grow: 0;
        flex-shrink: 0;
        align-self: start; //if the title wrappes on multiple lines, move the image to the top instead of centering
        margin-right: spacing(-4);

        &--placeholder {
          color: color("theme-secondary-foreground-secondary");
          background-color: color("theme-secondary");
          border-color: color("theme-secondary");
        }
      }

      #{$component-name}__label {
        &__title {
          @include set-font(0, "single");
        }

        &__info {
          @include set-font(-1, "single");
          color: color("foreground");
        }
      }
    }
  }
}