/* Profile Photo Component Styles */
.profile-photo {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--sunken);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-photo--small {
    width: 40px;
    height: 40px;
}

.profile-photo--medium {
    width: 100px;
    height: 100px;
}

.profile-photo--large {
    width: 150px;
    height: 150px;
}

.profile-photo__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A LOGO IS NOT A FACE, AND `cover` IS WRONG FOR IT.

   `cover` fills the box by cropping whatever does not fit, which is right for a photograph of a
   person - the middle of a face is the part worth keeping. A practice's logo is a whole mark: crop it
   and you get a fragment of a cross and a grey bar, which is what Great River's looked like the first
   time it was uploaded. `contain` fits the whole mark inside the box instead.

   And no plate behind it. The --sunken ground exists so a MISSING photo still reads as somebody;
   a contained logo just shows it as bars down the sides of its own mark.

   Scoped to the type rather than to a caller, so every surface that shows a practice - the thread
   list, the providers list, the organization screen - gets the same answer without each one
   remembering to ask for it. */
.profile-photo--type-organization {
  background-color: transparent;
}

.profile-photo--type-organization .profile-photo__image {
  object-fit: contain;
}

.profile-photo__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}