//
// Avatar
// --------------------------------------------------


// Base style

.avatar {
  display: inline-flex;
  overflow: hidden;
  width: @avatar-size;
  height: @avatar-size;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  background-position: center;
  background-size: cover;

  img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
  }
}


// Avatar sizes

.avatar-sm {
  width: @avatar-size-sm;
  height: @avatar-size-sm;
  font-size: @font-size-small;
}

.avatar-lg {
  width: @avatar-size-lg;
  height: @avatar-size-lg;
  font-size: (@avatar-size-lg/2);

  > .icon {font-size: (@avatar-size-lg/2)}
}

.avatar-xl {
  width: @avatar-size-xl;
  height: @avatar-size-xl;
  font-size: (@avatar-size-xl/2);

  > .icon {font-size: (@avatar-size-xl/2)}
}