@use 'sass:map';
@use "sass:list";

$avatarThemeList: (
  (
    name: "primary",
    textColor: var(--vxe-ui-font-primary-color),
    btnColor: #fff,
  ),
  (
    name: "success",
    textColor: var(--vxe-ui-status-success-color),
    btnColor: #fff,
  ),
  (
    name: "info",
    textColor: var(--vxe-ui-status-info-color),
    btnColor: #fff,
  ),
  (
    name: "warning",
    textColor: var(--vxe-ui-status-warning-color),
    btnColor: #fff,
  ),
  (
    name: "danger",
    textColor: var(--vxe-ui-status-danger-color),
    btnColor: #fff,
  ),
  (
    name: "error",
    textColor: var(--vxe-ui-status-error-color),
    btnColor: #fff,
  )
);

.vxe-avatar {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: var(--vxe-ui-base-border-radius);
  vertical-align: middle;
  &.is--circle {
    border-radius: 50%;
    .vxe-avatar--img {
      border-radius: 50%;
    }
  }
  &.is--dot {
    &::before {
      content: "";
      position: absolute;
      top: -0.25em;
      right: -0.25em;
      text-align: center;
      width: 0.5em;
      height: 0.5em;
      border-radius: 50%;
      background-color: #ff4d4f;
      z-index: 1;
    }
  }
  @for $index from 0 to list.length($avatarThemeList) {
    $item: list.nth($avatarThemeList, $index + 1);
    $textColor: map.get($item, textColor);
    $btnColor: map.get($item, btnColor);
    &.theme--#{map.get($item, name)} {
      color: $btnColor;
      border-color: $textColor;
      background-color: $textColor;
    }
  }
}

.vxe-avatar--img {
  width: 100%;
  height: 100%;
  border-radius: var(--vxe-ui-base-border-radius);
}

.vxe-avatar--count {
  position: absolute;
  top: -0.8em;
  right: -0.8em;
  text-align: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.4em;
  border-radius: 0.8em;
  font-size: 0.8em;
  background-color: #ff4d4f;
  color: #fff;
  z-index: 1;
}

.vxe-avatar {
  width: 36px;
  height: 36px;
  &.size--medium {
    width: 32px;
    height: 32px;
    font-size: var(--vxe-ui-font-size-medium);
  }
  &.size--small {
    width: 28px;
    height: 28px;
    font-size: var(--vxe-ui-font-size-small);
  }
  &.size--mini {
    width: 24px;
    height: 24px;
    font-size: var(--vxe-ui-font-size-mini);
  }
}