@import '../../styles/var.scss';
@import '../../styles/common.scss';

$--tk-avatar-text-color: $--tk-color-white;
$--tk-avatar-bg-color: $--tk-text-color-disabled;
$--tk-avatar-text-size: 14px;
$--tk-avatar-icon-size: 18px;
$--tk-avatar-border-radius: $--tk-border-radius-base;
$--tk-avatar-size-large: 56px;
$--tk-avatar-size-small: 24px;
$--tk-avatar-size: 40px;

.#{$PREFIX}-avatar {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: $--tk-avatar-text-color;
  background: $--tk-avatar-bg-color;
  width: $--tk-avatar-size;
  height: $--tk-avatar-size;
  font-size: $--tk-avatar-text-size;

  &.#{$PREFIX}-avatar--square {
    border-radius: $--tk-avatar-border-radius;
  }
  &.#{$PREFIX}-avatar--circle {
    border-radius: $--tk-border-radius-circle;
  }
  .#{$PREFIX}-avatar_img {
    width: 100%;
    height: 100%;
  }
  .#{$PREFIX}-avatar_image {
    width: 100%;
    height: 100%;
  }
}