.miao-avatar {
  font-variant: small-caps;
  margin: 0;
  padding: 0;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #fff;
  white-space: nowrap;
  position: relative;
  width: 64px;
  height: 64px;
  background-size: cover;
  background-position: center;
  vertical-align: middle;
  font-size: 1.5em;

  [class*="EIcon-"] {
    font-family: "EIcon";
  }

  .avatar-text {
    font-size: 0.4em;
  }





}


.miao-avatar-group {
  direction: rtl;
  unicode-bidi: bidi-override;
  //padding: 0 10px 0 40px;
  display: inline-block;

  &._sm {
    .miao-avatar {
      margin-left: -10px;
    }
  }

  &._xs {
    .miao-avatar {
      margin-left: -10px;
    }
  }

  &._md {
    .miao-avatar {
      margin-left: -20px;
    }
  }

  &._lg {
    .miao-avatar {
      margin-left: -30px;

    }
  }

  &._xl {
    .miao-avatar {
      margin-left: -40px;

      .badge {
        &[class*="EIcon-"] {
          width: 48px;
          height: 48px;
          top: -4px;
          right: -4px;
          font-size: 48px
        }
      }
    }
  }

  &._xxl {
    .miao-avatar {
      margin-left: -50px;

      .badge {
        &[class*="EIcon-"] {
          width: 54px;
          height: 54px;
          top: -8px;
          right: -8px;
          font-size: 54px
        }
      }
    }
  }

  &._sl {
    .miao-avatar {
      margin-left: -60px;

      .badge {
        &[class*="EIcon-"] {
          width: 60px;
          height: 60px;
          top: -12px;
          right: -12px;
          font-size: 60px
        }
      }
    }
  }

  &._xsl {
    .miao-avatar {
      margin-left: -70px;

      .badge {
        &[class*="EIcon-"] {
          width: 68px;
          height: 68px;
          top: -16px;
          right: -16px;
          font-size: 68px
        }
      }
    }
  }

  .miao-avatar {

    &:last-child {
      margin-left: 0
    }

    // margin-left: -30px;
    border: 4px solid #f1f1f1;
    vertical-align: middle;

  }




}