:host {
  display: inline-block;
}

div {
  background-position: center;
  background-repeat: no-repeat;
  font-family: var(--font-family-body), sans-serif;

  //default is lg
  border-radius: var(--border-radius-lg);
  padding: var(--scale-100) var(--scale-100);
  gap: var(--typography-spacing-xs);
  background-color: var(--color-surface-highlight);
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  background-size: cover;

  &.md {
    border-radius: var(--border-radius-round);
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  &.sm {
    border-radius: var(--border-radius-round);
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }
}