// ─────────────────────────────────────────────────────────────────────────
// ng-hub-ui-avatar — consumer SCSS helpers
// ─────────────────────────────────────────────────────────────────────────
//
//   @use 'ng-hub-ui-avatar/styles' as avatar;
//
//   • hub-avatar-theme()          — override any --hub-avatar-* token in one call
//   • hub-avatar-color-variants() — emit avatar + badge colour variants in a loop
//   • hub-avatar-badge-color()    — set the badge colour from a single value
//
// Token-based and self-contained (no Bootstrap dependency).

// Default semantic colour map → design-system `--hub-sys-color-*` tokens.
// Pass your own map (or extend this one) to `hub-avatar-color-variants()`.
// Mirrors the open accent set (9 canonical variants); each entry feeds the
// avatar's `--hub-avatar-accent` slot, so the circle fill and its legible
// foreground (`-on`) follow automatically. Add custom colours (e.g. `brand`) to
// this map — or pass your own map — and they work the same way.
$hub-avatar-semantic-colors: (
	'primary': var(--hub-sys-color-primary),
	'secondary': var(--hub-sys-color-secondary),
	'success': var(--hub-sys-color-success),
	'danger': var(--hub-sys-color-danger),
	'warning': var(--hub-sys-color-warning),
	'info': var(--hub-sys-color-info),
	'neutral': var(--hub-sys-color-neutral),
	'light': var(--hub-sys-color-light),
	'dark': var(--hub-sys-color-dark)
) !default;

// ── hub-avatar-color-variants ────────────────────────────────────────────────
// In ONE loop over `$colors`, emit a coloured-circle variant of the AVATAR and a
// coloured variant of its BADGE for every entry. The avatar circle re-bases the
// single `--hub-avatar-accent` slot (not `--hub-avatar-bg-color` directly), so
// the fill and its legible foreground (`--hub-avatar-accent-on`) follow from one
// value — light accents get dark text automatically. The nine canonical colours
// already work out of the box; use this to (re)emit them in your own global CSS,
// or to register custom colours.
//
// @example
//   @include avatar.hub-avatar-color-variants();                          // the 9 semantic
//   @include avatar.hub-avatar-color-variants(('brand': var(--brand)));   // custom colour
//
//   <hub-avatar class="hub-avatar--brand">    → brand-coloured circle
//   <hub-avatar badge badgeColor="brand">     → brand-coloured badge
@mixin hub-avatar-color-variants($colors: $hub-avatar-semantic-colors) {
	@each $name, $color in $colors {
		hub-avatar.hub-avatar--#{$name} {
			--hub-avatar-accent: #{$color};
		}

		hub-avatar[data-badge-color='#{$name}'] {
			--hub-avatar-badge-color: #{$color};
		}
	}
}

// ── hub-avatar-badge-color ───────────────────────────────────────────────────
// Set the badge colour from a single value (a token or a literal).
@mixin hub-avatar-badge-color($color) {
	--hub-avatar-badge-color: #{$color};
}

// ── hub-avatar-theme ─────────────────────────────────────────────────────────
// Override any of the `--hub-avatar-*` design tokens in a single include. Every
// parameter is OPTIONAL and defaults to `null`: only the parameters you pass are
// emitted, so the rest keep the component's defaults.
//
// @example
//   hub-avatar.brand {
//     @include avatar.hub-avatar-theme(
//       $size: 64px, $bg: #ede9fe, $fg: #5b21b6, $badge-color: #f43f5e
//     );
//   }
//
// scss-docs-start hub-avatar-theme
@mixin hub-avatar-theme(
	// ── Shape & surface ──
	$size: null,
	$border-radius: null,
	$border-width: null,
	$border-color: null,
	$bg: null,
	$fg: null,
	$object-fit: null,
	// ── Typography (initials) ──
	$font-family: null,
	$font-weight: null,
	$font-size: null,
	$text-transform: null,
	// ── Projected custom content ──
	$content-padding: null,
	$content-icon-size: null,
	// ── Corner badge (dot / labelled) ──
	$badge-size: null,
	$badge-offset: null,
	$badge-ring-width: null,
	$badge-ring-color: null,
	$badge-color: null,
	$badge-text-color: null,
	$badge-font-size: null,
	$badge-padding: null,
	// ── Stacked group ──
	$group-overlap: null,
	$group-ring-width: null,
	$group-ring-color: null
) {
	// Shape & surface
	@if $size != null {
		--hub-avatar-size: #{$size};
	}
	@if $border-radius != null {
		--hub-avatar-border-radius: #{$border-radius};
	}
	@if $border-width != null {
		--hub-avatar-border-width: #{$border-width};
	}
	@if $border-color != null {
		--hub-avatar-border-color: #{$border-color};
	}
	@if $bg != null {
		--hub-avatar-bg-color: #{$bg};
	}
	@if $fg != null {
		--hub-avatar-fg-color: #{$fg};
	}
	@if $object-fit != null {
		--hub-avatar-object-fit: #{$object-fit};
	}

	// Typography
	@if $font-family != null {
		--hub-avatar-font-family: #{$font-family};
	}
	@if $font-weight != null {
		--hub-avatar-font-weight: #{$font-weight};
	}
	@if $font-size != null {
		--hub-avatar-font-size: #{$font-size};
	}
	@if $text-transform != null {
		--hub-avatar-text-transform: #{$text-transform};
	}

	// Projected custom content
	@if $content-padding != null {
		--hub-avatar-content-padding: #{$content-padding};
	}
	@if $content-icon-size != null {
		--hub-avatar-content-icon-size: #{$content-icon-size};
	}

	// Corner badge
	@if $badge-size != null {
		--hub-avatar-badge-size: #{$badge-size};
	}
	@if $badge-offset != null {
		--hub-avatar-badge-offset: #{$badge-offset};
	}
	@if $badge-ring-width != null {
		--hub-avatar-badge-ring-width: #{$badge-ring-width};
	}
	@if $badge-ring-color != null {
		--hub-avatar-badge-ring-color: #{$badge-ring-color};
	}
	@if $badge-color != null {
		--hub-avatar-badge-color: #{$badge-color};
	}
	@if $badge-text-color != null {
		--hub-avatar-badge-text-color: #{$badge-text-color};
	}
	@if $badge-font-size != null {
		--hub-avatar-badge-font-size: #{$badge-font-size};
	}
	@if $badge-padding != null {
		--hub-avatar-badge-padding: #{$badge-padding};
	}

	// Stacked group
	@if $group-overlap != null {
		--hub-avatar-group-overlap: #{$group-overlap};
	}
	@if $group-ring-width != null {
		--hub-avatar-group-ring-width: #{$group-ring-width};
	}
	@if $group-ring-color != null {
		--hub-avatar-group-ring-color: #{$group-ring-color};
	}
}
// scss-docs-end hub-avatar-theme