@import "base";

@mixin profile-image-dimensions($radius) {
  width: $radius * 2;
  height: $radius * 2;
  border-radius: $radius;
  font-size: $radius;

  .profile-image__icon {
    font-size: 80%;
  }

  .profile-image__status {
    $instantjob-radius: $radius / 3;

    width: $instantjob-radius * 2;
    height: $instantjob-radius * 2;
    font-size: $radius * 0.6;
    padding-top: 18 * 0.11;
    border-radius: $instantjob-radius;
  }

  .profile-image__person {
    font-size: 150%;
  }
}

.profile-image {
  display: flex;
  background-color: color(black, bright);
  color: color(white);
  justify-content: center;
  flex-direction: column;
  margin-left: 5px;
  margin-right: 5px;
  @include profile-image-dimensions(12px);

  position: relative;

  &.profile-image_has-app-clickable {
    &:hover {
      .profile-image__icon {
        display: flex;
      }
      .profile-image__initials {
        display: none;
      }
      .profile-image__person {
        display: none;
      }
    }
  }

  .profile-image__initials {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .profile-image__icon {
    display: none;
    align-items: center;
    justify-content: center;
  }

  .profile-image__person {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .profile-image__status {
    display: flex;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: white;
    align-items: center;
    justify-content: center;
  }

  &.profile-image_large {
    @include profile-image-dimensions(18px);
  }

  &.profile-image_huge {
    @include profile-image-dimensions(100px);
  }
}