@import (reference) '../variable.less';
@import (reference) '../../Avatar/variable.less';

.@{skeletonPrefix}-avatar {
  &-animate {
    .skeleton-animation();
  }
  width: @avatar-size;
  height: @avatar-size;
  border-radius: @default-radius;
  background: @skeleton-fill;
  display: inline-block;
  &-circle {
    border-radius: 50%;
  }

  &-x-small {
    width: @avatar-size-x-small;
    height: @avatar-size-x-small;
  }
  &-small {
    width: @avatar-size-small;
    height: @avatar-size-small;
  }
  &-medium {
    width: @avatar-size-medium;
    height: @avatar-size-medium;
  }
  &-large {
    width: @avatar-size-large;
    height: @avatar-size-large;
  }
}