@layer base {
  :host .dds-avatar {
    display: inline-flex;
    flex-shrink: 0;
    block-size: var(--dds-avatar-size);
    inline-size: var(--dds-avatar-size);
  }
}

@layer shapes {
  :host([shape="circle"]) {
    --dds-avatar-radius: var(--dds-radius-full);
  }

  :host([shape="square"]) {
    --dds-avatar-radius: var(--dds-radius-s);
  }
}

@layer sizes {
  :host([size="m"]) {
    --dds-avatar-size: var(--dds-avatar-size-m);
  }
}

@layer reset, base, shapes, sizes;
