/*doc
---
title: Avatar icon
name: avatar
category: Components
---

Icons for displaying an image of a user

```html_example_table
<div class="avatar">
  <div class="avatar-image">
    <img src="https://res.cloudinary.com/mndx/image/upload/c_limit,h_45/tqrjlmxpvanmt4r0ympg" />
  </div>
</div>

<div class="avatar">
  <div class="avatar-name">A</div>
</div>

<div class="avatar avatar-large">
  <div class="avatar-name">A</div>
</div>

<div class="avatar avatar-large">
  <div class="avatar-name avatar-name-hidden">A</div>
</div>

<div class="avatar avatar-large">
  <div class="avatar-image">
    <img src="https://res.cloudinary.com/mndx/image/upload/c_limit,h_100/tqrjlmxpvanmt4r0ympg" />
  </div>
</div>
```
*/

@import "../variables/colors";
@import "../variables/measures";

$avatar-size: 45px;
$avatar-size-small: 35px;
$avatar-size-large: 100px;
$avatar-name-background-color: $color-poptype-magenta;
$avatar-name-text-color: $white;
$avatar-name-text-size: $font-size-larger;
$avatar-name-text-size-large: $font-size-very-large;

%avatar {
  border-radius: 50%;
  height: $avatar-size;
  width: $avatar-size;
}

.avatar {
  display: inline-block;
  text-align: center;

  &-empty {
    @extend %avatar;
  }

  &-image img {
    @extend %avatar;
  }

  &-name {
    @extend %avatar;

    @include display(flex);
    @include align-items(center);
    @include justify-content(center);

    background-color: $avatar-name-background-color;
    color: $avatar-name-text-color;
    font-size: $avatar-name-text-size;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
  }

  &-name-hidden {
    @extend %avatar;

    background-color: $gray-lighter;
    color: $gray-lighter;
  }

  &-small {
    .avatar-name {
      height: $avatar-size-small;
      width: $avatar-size-small;
    }

    img {
      height: $avatar-size-small;
      width: $avatar-size-small;
    }
  }

  &-large {
    .avatar-name {
      font-size: $avatar-name-text-size-large;
      height: $avatar-size-large;
      width: $avatar-size-large;
    }

    img {
      height: $avatar-size-large;
      width: $avatar-size-large;
    }
  }
}