.cf-avatar {
  --cf-avatar-border-radius: 50%;

  aspect-ratio: 1;
  border-radius: var(--cf-avatar-border-radius);
  display: grid;
  inline-size: var(--cf-avatar-size, 5ch);
  margin: 0;
  place-items: center;

  img {
    aspect-ratio: 1;
    block-size: auto;
    border-radius: var(--cf-avatar-border-radius);
    grid-area: 1/1;
    inline-size: var(--cf-avatar-size, 5ch);
    max-inline-size: 100%;
    object-fit: cover;
  }
}

.cf-avatar--icon {
  border: 1px solid var(--cf-color-border-darker);
  background-color: var(--cf-color-text-reversed);

  img {
    background-color: transparent;
    border-radius: 0;
    inline-size: auto;
    margin: var(--cf-inline-space);
  }

  @media (any-hover: hover) {
    &:where(:not(:active):hover) {
      box-shadow: 0 0 0 var(--cf-hover-size) var(--cf-hover-color);
    }
  }
}

.cf-avatar__group {
  --cf-avatar-size: 2.5ch;

  block-size: 5ch;
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content;
  inline-size: 5ch;
  place-content: center;

  .cf-avatar {
    margin: auto;
  }

  &:where(:has(> :last-child:nth-child(2))) {
    --cf-avatar-size: 3.5ch;

    > :first-child {
      margin-block-end: 1.5ch;
      margin-inline-end: -0.75ch;
    }

    > :last-child {
      margin-block-start: 1.5ch;
      margin-inline-start: -0.75ch;
    }
  }

  &:where(:has(> :last-child:nth-child(3))) {
    > :last-child {
      margin-inline: 1.25ch -1.25ch;
    }
  }
}

.cf-avatar__form {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

/* Account logo */
.cf-account-logo {
  --cf-avatar-border-radius: 0.5em;

  #nav & {
    block-size: var(--cf-btn-size);
    inline-size: auto;
  }
}