/* ==========================================================================
   Avatar
   ========================================================================== */

.avatar-round {
  border-radius: 50%;
}

.avatar-squared {
  border-radius: 4px;
}

.avatar {
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-decoration: none;

  img {
    height: inherit;
    left: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: 1;
  }

  .avatar-initials {
    border: 1px solid $white;
    box-sizing: border-box;
  }
}

/* Topbar Variation (default primary)
   ========================================================================== */

.topbar .avatar .avatar-initials {
  border: 1px solid $primary;
  box-sizing: border-box;
}

/* Avatar - Sizes
   ========================================================================== */

$xsmall : 24px;
$small  : 36px;
$medium : 48px;
$large  : 60px;
$xlarge : 72px;

.avatar-xsmall {
  height: $xsmall;
  width: $xsmall;
}

.avatar-small {
  height: $small;
  width: $small;
}

.avatar-medium {
  height: $medium;
  width: $medium;
}

.avatar-large {
  height: $large;
  width: $large;
}

.avatar-xlarge {
  height: $xlarge;
  width: $xlarge;
}

/* Avatar - Photo
   ========================================================================== */

.avatar-photo img {
  @extend .avatar-round;
}

.avatar-photo.avatar-squared img {
  @extend .avatar-squared;
}

.avatar-photo.avatar-xsmall img {
  @extend .avatar-xsmall;
}

.avatar-photo.avatar-small img {
  @extend .avatar-small;
}

.avatar-photo.avatar-medium img {
  @extend .avatar-medium;
}

.avatar-photo.avatar-large img {
  @extend .avatar-large;
}

.avatar-photo.avatar-xlarge img {
  @extend .avatar-xlarge;
}

/* Avatar - Initials
   ========================================================================== */

.avatar-initials {
  background: rgba($primary, .3);
  color: $white;
  cursor: default;
  font-family: $font-primary;
  font-weight: 700;
  margin: 0 auto;
  text-transform: uppercase;
}

.avatar-initials:hover {
  color: $white;
}

/* Avatar - Number
   ========================================================================== */

.avatar-number {
  background: rgba($primary, .1);
  color: rgba($primary, .6);
  font-family: $font-primary;
  font-weight: 700;

  @extend .avatar;

  @include anim(background);
}

.avatar-number:hover {
  background: rgba($primary, .2);
}

/* Avatar - Initials and Number
   ========================================================================== */

.avatar-initials.avatar-xsmall,
.avatar-number.avatar-xsmall {
  font-size: 12px;
  line-height: $xsmall;
}

.avatar-initials.avatar-small,
.avatar-number.avatar-small {
  font-size: 14px;
  line-height: $small;
}

.avatar-initials.avatar-medium,
.avatar-number.avatar-medium {
  font-size: 16px;
  line-height: $medium;
}

.avatar-initials.avatar-large,
.avatar-number.avatar-large {
  font-size: 18px;
  line-height: $large;
}

.avatar-initials.avatar-xlarge,
.avatar-number.avatar-xlarge {
  font-size: 20px;
  line-height: $xlarge;
}

/* Avatar - Icon
   ========================================================================== */

.avatar-icon {
  @extend .avatar;
}

/* Avatar - Icon (SVG)
   ========================================================================== */

.avatar-icon.avatar-xsmall img {
  height: $xsmall/2;
  margin: $xsmall/4 auto;
  width: $xsmall/2;
}

.avatar-icon.avatar-small img {
  height: $small/2;
  margin: $small/4 auto;
  width: $small/2;
}

.avatar-icon.avatar-medium img {
  height: $medium/2;
  margin: $medium/4 auto;
  width: $medium/2;
}

.avatar-icon.avatar-large img {
  height: $large/2;
  margin: $large/4 auto;
  width: $large/2;
}

.avatar-icon.avatar-xlarge img {
  height: $xlarge/2;
  margin: $xlarge/4 auto;
  width: $xlarge/2;
}

/* Avatar - Icon (Font)
   ========================================================================== */

.avatar-icon.avatar-xsmall span {
  line-height: $xsmall;
}

.avatar-icon.avatar-small span {
  line-height: $small;
}

.avatar-icon.avatar-medium span {
  line-height: $medium;
}

.avatar-icon.avatar-large span {
  line-height: $large;
}

.avatar-icon.avatar-xlarge span {
  line-height: $xlarge;
}

.avatar-icon-12,
.avatar-icon-16 {
  @extend .avatar;
}

$icon12Medium: 36px;

.avatar-icon-12.avatar-medium {
  height: $icon12Medium;
  width: $icon12Medium;
}

.avatar-icon-12.avatar-medium span {
  font-size: 12px;
  line-height: $icon12Medium;
}

$icon12Large: 72px;

.avatar-icon-12.avatar-large {
  height: $icon12Large;
  width: $icon12Large;
}

.avatar-icon-12.avatar-large span {
  font-size: 24px;
  line-height: $icon12Large;
}

$icon16Medium: 56px;

.avatar-icon-16.avatar-medium {
  height: $icon16Medium;
  width: $icon16Medium;
}

.avatar-icon-16.avatar-medium span {
  font-size: 16px;
  line-height: $icon16Medium;
}

$icon16Large: 96px;

.avatar-icon-16.avatar-large {
  height: $icon16Large;
  width: $icon16Large;
}

.avatar-icon-16.avatar-large span {
  font-size: 32px;
  line-height: $icon16Large;
}

/* Avatar - Photo + Initials
   ========================================================================== */

.avatar-container {
  display: inline-block;
  position: relative;
}

.avatar-container .avatar-photo {
  z-index: 1;
}

.avatar-container .avatar-photo,
.avatar-container .avatar-initials {
  left: 0;
  position: absolute;
}

/* Avatar - background white with shadow and status colors
   ========================================================================== */

.avatar.avatar-white,
.avatar-initials.avatar-white .avatar-icon.avatar-white {
  background: $white;
  box-shadow: 0 2px 8px rgba($primary, .1);
  color: rgba($primary, .8);
}

.avatar.avatar-success,
.avatar-initials.avatar-success .avatar-icon.avatar-success {
  background: $brand-success;
  color: $white;
}

.avatar.avatar-danger,
.avatar-initials.avatar-danger .avatar-icon.avatar-danger {
  background: $brand-danger;
  color: $white;
}

.avatar.avatar-primary,
.avatar-initials.avatar-primary .avatar-icon.avatar-primary {
  background: rgba($primary, .8);
  color: $white;
}

/* Avatar - We
   ========================================================================== */

.avatar-initials.avatar-we {
  font-family: $font-primary;
  font-weight: 600;
  text-transform: capitalize;
}