/*
  colors: .a-avatar--{blue|green|purple|red|yellow|lavender|orange} (default blue)
  sizes: .a-avatar--{sm|md|lg|xl} (default xl)
*/

.a-avatar {
  --bg: var(--lens-semantic-color-accent-blue-background);
  --color: var(--a-avatar-color, var(--lens-semantic-color-accent-blue-content));
  --radius: var(--lens-semantic-radius-full);
  --size: var(--lens-core-spacing-9);
  --icon-size: var(--lens-semantic-icon-size-xl);
  --fs: var(--lens-semantic-font-text-body-font-size);
  --fw: var(--lens-semantic-font-weight-emphasis);
  --lh: var(--lens-semantic-font-text-body-line-height);
  --ls: var(--lens-semantic-font-text-body-letter-spacing);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--a-avatar-size, var(--size));
  height: var(--a-avatar-size, var(--size));
  background: var(--a-avatar-bg, var(--bg));
  border-radius: var(--a-avatar-radius, var(--radius));
  font-size: var(--a-avatar-font-size, var(--fs));
  font-weight: var(--a-avatar-font-weight, var(--fw));
  line-height: var(--a-avatar-line-height, var(--lh));
  letter-spacing: var(--a-avatar-letter-spacing, var(--ls));
  user-select: none;
  -webkit-user-select: none;
  & svg {
    width: var(--a-avatar-icon-size, var(--icon-size));
    height: var(--a-avatar-icon-size, var(--icon-size));
    fill: currentColor;
  }
  & > img {
    width: inherit;
    height: inherit;
    border-radius: inherit;
  }
  &.a-avatar--blue {
    --bg: var(--lens-semantic-color-accent-blue-background);
    --color: var(--a-avatar-color, var(--lens-semantic-color-accent-blue-content));
  }
  &.a-avatar--green {
    --bg: var(--lens-semantic-color-accent-green-background);
    --color: var(--a-avatar-color, var(--lens-semantic-color-accent-green-content));
  }
  &.a-avatar--purple {
    --bg: var(--lens-semantic-color-accent-purple-background);
    --color: var(--a-avatar-color, var(--lens-semantic-color-accent-purple-content));
  }
  &.a-avatar--red {
    --bg: var(--lens-semantic-color-accent-red-background);
    --color: var(--a-avatar-color, var(--lens-semantic-color-accent-red-content));
  }
  &.a-avatar--yellow {
    --bg: var(--lens-semantic-color-accent-yellow-background);
    --color: var(--a-avatar-color, var(--lens-semantic-color-accent-yellow-content));
  }
  &.a-avatar--lavender {
    --bg: var(--lens-semantic-color-accent-lavender-background);
    --color: var(--a-avatar-color, var(--lens-semantic-color-accent-lavender-content));
  }
  &.a-avatar--orange {
    --bg: var(--lens-semantic-color-accent-orange-background);
    --color: var(--a-avatar-color, var(--lens-semantic-color-accent-orange-content));
  }
  &.a-avatar--sm {
    --size: var(--lens-core-spacing-3);
    --icon-size: var(--lens-semantic-icon-size-md);
  }
  &.a-avatar--md {
    --size: var(--lens-core-spacing-4);
  }
  &.a-avatar--sm,
  &.a-avatar--md {
    --fs: var(--lens-semantic-font-label-xs-font-size);
    --lh: var(--lens-semantic-font-label-xs-line-height);
    --ls: var(--lens-semantic-font-label-xs-letter-spacing);
  }
  &.a-avatar--lg {
    --size: var(--lens-core-spacing-5);
    --fs: var(--lens-semantic-font-text-md-font-size);
    --lh: var(--lens-semantic-font-text-md-line-height);
    --ls: var(--lens-semantic-font-text-md-letter-spacing);
  }
  &.a-avatar--xl {
    --fs: var(--lens-semantic-font-text-body-font-size);
    --lh: var(--lens-semantic-font-text-body-line-height);
    --ls: var(--lens-semantic-font-text-body-letter-spacing);
  }
  &.a-avatar--md,
  &.a-avatar--lg,
  &.a-avatar--xl {
    --icon-size: var(--lens-semantic-icon-size-lg);
  }
}