@import (reference) '../extend.less';
.yo-avatar-info {
  position: relative;

  overflow: hidden;

  width: 128px;
  margin: 0 auto;

  border-radius: 50%;
  &--cover {
    font-size: @font-size-lg * 2;

    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    cursor: pointer;
    transition: @animation-duration-slow;

    opacity: 0;
    color: @white;
    background-color: fade(@black, 50%);
    &:hover {
      opacity: 1;
    }
  }
}
.yo-avatar-cropper {
  overflow: hidden;

  border-radius: @border-radius-base;
  background-color: #ccc;
}
.yo-avatar-preview {
  overflow: hidden;

  width: 200px;
  height: 200px;
  margin: 0 auto;

  border-radius: 50%;
  background: #ccc;
}
