@use "../../config" as *;
@use "../../spacing" as *;
@use "../../motion" as *;
@use "../../type" as *;
@use "../../breakpoint" as *;
@use "../../theme" as *;
@use "../../utilities/component-reset";
@use "../../utilities/convert" as *;
@use "../../utilities/rtl" as *;
@use "../../utilities/high-contrast-mode" as *;

/// Avatar styles
/// @access public
/// @group avatar
@mixin avatar {
  .#{$prefix}--avatar {
    @include reset;
    border-radius: 50%;
    overflow: hidden;
    font-size: 1.3em;
    width: 1em;
    height: 1em;

    > img {
      display: block;
      object-fit: cover;
      width: 1em;
      height: 1em;
    }
  }

  .#{$prefix}--avatar--missing {
    color: $neutral-neutral50;
    > path {
      transform: scale(0.9);
      transform-origin: center bottom;
    }
  }

  .#{$prefix}--avatar--letter {
    background: $border-subtle;

    > text {
      font-size: 0.6em;
    }
  }

  .#{$prefix}--avatar__icon--empty {
    border-radius: 50%;
    background-size: 100%;
    border: 2px solid var(--body-tbc-on-secondary-container);
    background-color: var(--body-tbc-on-secondary-container);
    padding-top: 2px;
    color: var(--action-solid-link-default);
    text {
      fill: $background-main; // TODO $text-inverse
      font-weight: 600;
      font-family: "Arial";
    }
  }
}