@import "carbon-components/scss/globals/scss/vars";
@import "carbon-components/scss/globals/scss/typography";

/// UserAvatar component styles (circular frame, sizes, color variants).
/// @access private
/// @group components
@mixin user-avatar {
  .#{$prefix}--user-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    color: $text-on-color;
  }

  // Images fill the circle; the icon glyph keeps its intrinsic size.
  .#{$prefix}--user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  //--------------------------------------------------------------------------
  // Sizes
  //--------------------------------------------------------------------------
  .#{$prefix}--user-avatar--sm {
    width: $carbon--spacing-06;
    height: $carbon--spacing-06;
  }

  .#{$prefix}--user-avatar--md {
    width: $carbon--spacing-07;
    height: $carbon--spacing-07;
  }

  .#{$prefix}--user-avatar--lg {
    width: $carbon--spacing-08;
    height: $carbon--spacing-08;
  }

  .#{$prefix}--user-avatar--xl {
    width: $carbon--spacing-10;
    height: $carbon--spacing-10;
  }

  .#{$prefix}--user-avatar--sm .#{$prefix}--user-avatar__text {
    @include type-style("label-01");
  }

  .#{$prefix}--user-avatar--md .#{$prefix}--user-avatar__text {
    @include type-style("body-short-01");
  }

  .#{$prefix}--user-avatar--lg .#{$prefix}--user-avatar__text {
    @include type-style("productive-heading-02");
  }

  .#{$prefix}--user-avatar--xl .#{$prefix}--user-avatar__text {
    @include type-style("productive-heading-04");
  }

  //--------------------------------------------------------------------------
  // Color variants (static palette tokens; consistent across themes)
  //--------------------------------------------------------------------------
  .#{$prefix}--user-avatar--red {
    background-color: $red-60;
  }

  .#{$prefix}--user-avatar--magenta {
    background-color: $magenta-60;
  }

  .#{$prefix}--user-avatar--purple {
    background-color: $purple-60;
  }

  .#{$prefix}--user-avatar--blue {
    background-color: $blue-60;
  }

  .#{$prefix}--user-avatar--cyan {
    background-color: $cyan-60;
  }

  .#{$prefix}--user-avatar--teal {
    background-color: $teal-60;
  }

  .#{$prefix}--user-avatar--green {
    background-color: $green-60;
  }

  .#{$prefix}--user-avatar--gray {
    background-color: $gray-60;
  }

  .#{$prefix}--user-avatar--cool-gray {
    background-color: $cool-gray-60;
  }

  .#{$prefix}--user-avatar--warm-gray {
    background-color: $warm-gray-60;
  }

  //--------------------------------------------------------------------------
  // Tooltip wrapper: strip the definition trigger's underline/padding so the
  // circle renders clean when `tooltipText` is set.
  //--------------------------------------------------------------------------
  .#{$prefix}--user-avatar-tooltip .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition {
    margin: 0;
    border-bottom: none;
  }
}

@include exports("user-avatar") {
  @include user-avatar;
}