_avatar.scss

@use "@carbon/react/scss/spacing" as *;
@use "@carbon/react/scss/theme" as *;
@use "@carbon/colors" as *;
@use "@carbon/motion";
@use "@carbon/type";

.avatar__colorBackground {
  background-color: $background-inverse;
}

.avatar__colorSupportWarning {
  background-color: $support-warning;
}

.avatar__colorSupportCautionMajor {
  background-color: $support-caution-major;
}

.avatar__colorSupportError {
  background-color: $support-error;
}

.avatar__colorBackgroundSelected {
  background-color: $background-selected;
}

.avatar__colorLayerAccentActive02 {
  background-color: $layer-accent-active-02;
}

.avatar__colorBackgroundBrand {
  background-color: $background-brand;
}

.avatar__colorSupportSuccessInverse {
  background-color: $support-success-inverse;
}

.avatar__colorTagBackground {
  background-color: $teal-20; // TODO: this should be $tag-background-teal but it fails
}

.avatar__colorLinkPrimary {
  background-color: $link-primary;
}

.avatar__colorSupportInfo {
  background-color: $support-info;
}

.avatar__colorSupportSuccess {
  background-color: $support-success;
}

.avatar__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;

  &.chat {
    width: 1.75rem;
    height: 1.75rem;

    svg {
      width: 1.75rem;
      height: 1.75rem;
    }
  }

  &.profile {
    width: 64px;
    height: 64px;

    svg {
      width: 64px;
      height: 64px;
    }
  }

  svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: $layer-01;
    // stylelint-disable-next-line carbon/layout-token-use
    padding: 4px;
  }
}