@use "sass:map";
@use "functions" as *;
@use "mixins/border-radius" as *;
@use "mixins/transition" as *;
@use "mixins/tokens" as *;

$avatar-tokens: () !default;

// stylelint-disable custom-property-no-missing-var-function
// scss-docs-start avatar-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$avatar-tokens: defaults(
  (
    --avatar-size: 2.5rem,
    --avatar-border-radius: 50%,
    --avatar-border-width: 2px,
    --avatar-border-color: var(--bg-body),
    --avatar-bg: var(--bg-2),
    --avatar-color: var(--fg-body),
    // --avatar-font-weight: var(--font-weight-medium), // Defaults to fallback
    --avatar-status-size: .75rem,
    --avatar-status-border-width: 2px,
    --avatar-status-border-color: var(--bg-body),
    --avatar-stack-spacing: -.3,
    --avatar-stack-transition: "transform .2s ease-in-out",
  ),
  $avatar-tokens
);
// scss-docs-end avatar-tokens
// stylelint-enable custom-property-no-missing-var-function

// scss-docs-start avatar-sizes
$avatar-sizes: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$avatar-sizes: defaults(
  (
    "xs": (
      size: 1.5rem,
      status-size: .625rem,
    ),
    "sm": (
      size: 2rem,
    ),
    "lg": (
      size: 3rem,
      status-size: 1rem,
    ),
    "xl": (
      size: 4rem,
      status-size: 1.25rem,
    ),
  ),
  $avatar-sizes
);
// scss-docs-end avatar-sizes

@layer components {
  .avatar {
    @include tokens($avatar-tokens);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size);
    height: var(--avatar-size);
    font-size: calc(var(--avatar-size) * .4);
    font-weight: var(--avatar-font-weight, var(--font-weight-medium));
    line-height: 1;
    color: var(--theme-contrast, var(--avatar-color));
    text-transform: uppercase;
    vertical-align: middle;
    background-color: var(--theme-bg, var(--avatar-bg));
    @include border-radius(var(--avatar-border-radius));
  }

  .avatar-subtle {
    color: var(--theme-fg, var(--avatar-color));
    background-color: var(--theme-bg-subtle, var(--avatar-bg));
  }

  .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    @include border-radius(inherit);
  }

  .avatar-status {
    position: absolute;
    right: calc(var(--avatar-status-border-width) * -1);
    bottom: calc(var(--avatar-status-border-width) * -1);
    width: var(--avatar-status-size);
    height: var(--avatar-status-size);
    background-color: var(--gray-400);
    border: var(--avatar-status-border-width) solid var(--avatar-status-border-color);
    @include border-radius(50%);

    &.status-online {
      background-color: var(--green-500);
    }

    &.status-offline {
      background-color: var(--gray-400);
      @include border-radius(20%);
    }

    &.status-busy {
      background-color: var(--red-500);
      @include border-radius(20%);
    }

    &.status-away {
      background-color: var(--yellow-500);
    }
  }

  .avatar-stack {
    display: inline-flex;
    flex-direction: row-reverse;

    .avatar {
      // Stack spacing is calculated as a percentage of avatar size
      margin-left: calc(var(--avatar-size) * var(--avatar-stack-spacing));
      border: var(--avatar-border-width) solid var(--avatar-border-color);
      mask-image: none;
      @include transition(var(--avatar-stack-transition));

      &:last-child {
        margin-left: 0;
      }

      &:hover {
        z-index: 1;
        transform: translateY(-2px);
      }
    }
  }

  @each $size, $tokens in $avatar-sizes {
    .avatar-#{$size},
    .avatar-stack-#{$size} {
      --avatar-size: #{map.get($tokens, size)};

      @if map.has-key($tokens, status-size) {
        --avatar-status-size: #{map.get($tokens, status-size)};
      }
    }
  }
}