.avatar-button {
  border-radius: var(--avatar-border-radius);
  cursor: pointer;
  height: var(--avatar-diameter);
  width: var(--avatar-diameter);
  &:focus-visible {
    outline: none;
    --offset: calc(var(--sds-size-stroke-border) * 2);
    &::before {
      content: "";
      border-radius: calc(var(--avatar-border-radius) + var(--offset));
      bottom: calc(-1 * var(--offset));
      box-shadow: 0 0 0 var(--global-focus-ring-size)
        var(--global-focus-ring-color);
      left: calc(-1 * var(--offset));
      position: absolute;
      right: calc(-1 * var(--offset));
      top: calc(-1 * var(--offset));
    }
  }
}

.avatar {
  border-radius: var(--avatar-border-radius);
  position: relative;
  height: var(--avatar-diameter);
  width: var(--avatar-diameter);
  > img,
  > svg {
    border-radius: var(--avatar-border-radius);
    height: auto;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  > svg {
    background: var(--sds-color-background-brand-default);
    > text {
      fill: var(--sds-color-text-brand-on-brand);
      font-size: var(--sds-typography-scale-07);
    }
  }
}

.avatar-block {
  align-items: start;
  color: var(--sds-color-text-default-secondary);
  display: grid;
  grid-template-areas: "avatar title";
  grid-template-columns: auto 1fr;
  column-gap: var(--sds-size-space-200);
  row-gap: var(--sds-size-space-050);

  &:has(> .text-body-base) {
    grid-template-areas: "avatar title" "avatar description";
  }

  > .avatar {
    grid-area: avatar;
  }

  > .text-body-strong {
    grid-area: title;
  }

  > .text-body-base {
    grid-area: description;
  }
}

.avatar-shape-circle {
  --avatar-border-radius: var(--sds-size-radius-full);
}
.avatar-shape-square {
  --avatar-border-radius: var(--sds-size-radius-200);
}

.avatar-size-small {
  --avatar-diameter: var(--sds-size-icon-small);
}
.avatar-size-medium {
  --avatar-diameter: var(--sds-size-icon-medium);
}
.avatar-size-large {
  --avatar-diameter: var(--sds-size-icon-large);
}

.avatar-group {
  align-items: center;
  display: flex;
  gap: var(--sds-size-space-300);

  > .avatar + .avatar {
    margin-left: calc(var(--sds-size-space-300) * -1 + var(--avatar-group-gap));
  }
  > .avatar-group-overflow {
    align-items: center;
    background: var(--sds-color-background-default-secondary);
    border-radius: var(--sds-size-radius-200);
    color: var(--sds-color-text-default-secondary);
    display: flex;
    justify-content: center;
    font: var(--sds-font-body-small);
    font-weight: var(--sds-typography-body-weight-strong);
    height: var(--sds-typography-scale-05);
    width: var(--sds-typography-scale-05);
  }

  &.avatar-group-spacing-100 {
    --avatar-group-gap: var(--sds-size-space-100);
  }
  &.avatar-group-spacing-200 {
    --avatar-group-gap: var(--sds-size-space-200);
  }
  &.avatar-group-spacing-300 {
    --avatar-group-gap: var(--sds-size-space-300);
  }
  &.avatar-group-spacing-negative-100,
  &.avatar-group-spacing-negative-200,
  &.avatar-group-spacing-negative-300 {
    > .avatar {
      box-shadow: var(--sds-effects-shadows-drop-shadow-200);
    }
  }
  &.avatar-group-spacing-negative-100 {
    --avatar-group-gap: var(--sds-size-space-negative-100);
  }
  &.avatar-group-spacing-negative-200 {
    --avatar-group-gap: var(--sds-size-space-negative-200);
  }
  &.avatar-group-spacing-negative-300 {
    --avatar-group-gap: var(--sds-size-space-negative-300);
  }
}
