// =========================================================================================
//   File Name: avatar.scss
//   Description: Avatar images.
//   ----------------------------------------------------------------------------------------
//   Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
//   Author: PIXINVENT
//   Author URL: http://www.themeforest.net/user/pixinvent
// ==========================================================================================

// Component: Avatar
// =================

.avatar {
  position: relative;
  width: $avatar-size;
  height: $avatar-size;
  white-space: nowrap;
  border-radius: 50%;
  cursor: pointer;
  color: $white;
  display: inline-flex;
  font-size: 0.8rem;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-items: center;

  i {
    position: absolute;
    right: -3px;
    bottom: 2px;
    width: $avatar-status-size;
    height: $avatar-status-size;
    border-radius: 100%;
    border: 1px solid $white;
    z-index: 2;

  }
  span.text-circle{
    text-align: center;
    vertical-align: middle;
    color: $white;
    font-size: 1.2rem;
    background: $gray-100;
    display: table-cell;
  }

  img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 0 none;
    border-radius: 50%;
    z-index: 1;
  }
  .badge-up {
    top: -8px;
    right: -11px;
  }
}


// Status Modifier
// ========================================================================

.avatar-online {
  i {
    background-color: $avatar-online-color;
  }
}

.avatar-off {
  i {
    background-color: $avatar-off-color;
  }
}

.avatar-busy {
  i {
    background-color: $avatar-busy-color;
  }
}

.avatar-away {
  i {
    background-color: $avatar-away-color;
  }
}

// Size Modifier
// ========================================================================

.avatar-100 {
  width: $avatar-size-100;
  span.text-circle{
    width: $avatar-size-100;
    height: $avatar-size-100;
  }
  i {
    height: $avatar-status-size-100;
    width: $avatar-status-size-100;
  }
}

.avatar-50 {
  width: $avatar-size-50;
  span.text-circle{
    width: $avatar-size-50;
    height: $avatar-size-50;
  }
  i {
    height: $avatar-status-size-50;
    width: $avatar-status-size-50;
  }
}

.avatar-lg {
  width: $avatar-size-lg;
  height: $avatar-size-lg;
  span.text-circle{
    width: $avatar-size-lg;
    height: $avatar-size-lg;
  }
  i {
    right:0;
    bottom:0;
    height: $avatar-status-size-lg;
    width: $avatar-status-size-lg;
  }
}

.avatar-md {
  width: $avatar-size-md;
  height: $avatar-size-md;
  span.text-circle{
    width: $avatar-size-md;
    height: $avatar-size-md;
  }
  i {
    right:0;
    bottom:0;
    height: $avatar-status-size-md;
    width: $avatar-status-size-md;
  }
}

.avatar-sm {
  width: $avatar-size-sm;
  height: $avatar-size-sm;
  span.text-circle{
    width: $avatar-size-sm;
    height: $avatar-size-sm;
  }
  i {
    height: $avatar-status-size-sm;
    width: $avatar-status-size-sm;
  }
}

.avatar-xs {
  width: $avatar-size-xs;
  height: $avatar-size-xs;
  span.text-circle{
    width: $avatar-size-xs;
    height: $avatar-size-xs;
  }
  i {
    height: $avatar-status-size-xs;
    width: $avatar-status-size-xs;
  }
}

.dropdown{
  .avatar{
    i{
      margin-right: 0;
    }
  }
}
