@import "../style/colors";

$avatarXSmSize: 32px;
$avatarSmSize: 48px;
$avatarDefaultSize: 64px;
$avatarLargeSize: 88px;
$avatarXLargeSize: 264px;

.la-avatar {
  height: $avatarDefaultSize;
  width: $avatarDefaultSize;
  vertical-align: middle;
  overflow: hidden;
  border-radius: 50%;
  float: left;

  &--x-small {
    height: $avatarXSmSize;
    width: $avatarXSmSize;
  }

  &--small {
    height: $avatarSmSize;
    width: $avatarSmSize;
  }

  &--medium {
    height: $avatarDefaultSize;
    width: $avatarDefaultSize;
  }

  &--large {
    width: $avatarLargeSize;
    height: $avatarLargeSize;
  }

  &--x-large {
    width: $avatarXLargeSize;
    height: $avatarXLargeSize;
  }
}