.base {
  composes: inflex from "../../commoncss/flex.module.css";
  composes: align_center_both from "../../commoncss/flex.module.css";

  color: var(--lib_avatar_text_clr);
  border: var(--lib_border_size_xsmall) solid var(--lib_avatar_border_clr);
  background-color: var(--lib_avatar_bg_clr);

} /* shapes*/
.circle {
  border-radius: 100%;
  text-align: center;
}
.square {
  border-radius: 3px;
  text-align: center;
}

/* sizes */
.large {
  width: 62px;
  height: 62px;
}
.medium {
  width: 52px;
  height: 52px;
}
.small {
  width: 30px;
  height: 30px;
}
.xlarge {
  width: 80px;
  height: 80px;
}
/* colors */
.black {
  color: var(--lib_primary_text_color_dark);
  border: var(--lib_border_size_xsmall) solid var(--lib_primary_text_color_dark);
}
.gray {
  color: var(--lib_primary_text_color_gray);
  border: var(--lib_border_size_xsmall) solid var(--lib_primary_text_color_gray);
}
.blue {
  color: var(--lib_primary_text_color_light);
  border: var(--lib_border_size_xsmall) solid
    var(--lib_primary_text_color_light);
}
/* others */
.container {
  position: relative;
}
.floatinglayer {
  position: absolute;
  border: var(--lib_border_size_xsmall) solid
    var(--lib_primary_text_color_light);
  border-radius: 50%;
  z-index: 1;
  background: var(--lib_avatar_text_clr);
  color: var(--lib_primary_text_color_whiteness);
}
/* small */
.topalign_small,
.bottomalign_small,
.rightalign_small,
.leftalign_small {
  font-size: 8px;
  padding: 2px 5px;
}
.topalign_small {
  top: -8px;
  left: 7px;
}
.bottomalign_small {
  bottom: -4px;
  left: 7px;
}
.rightalign_small {
  right: -8px;
  top: 6px;
}
.leftalign_small {
  left: -8px;
  top: 6px;
}

/* medium */
.topalign_medium,
.bottomalign_medium,
.rightalign_medium,
.leftalign_medium {
  padding: 5px 8px;
  font-size: 10px;
}
.topalign_medium {
  top: -8px;
  left: 15px;
}
.bottomalign_medium {
  bottom: -4px;
  left: 15px;
}
.rightalign_medium {
  right: -9px;
  top: 15px;
}
.leftalign_medium {
  left: -9px;
  top: 15px;
}
/* large */
.topalign_large,
.bottomalign_large,
.rightalign_large,
.leftalign_large {
  padding: 6px 10px;
  font-size: 12px;
}
.topalign_large {
  top: -14px;
  left: 18px;
}
.bottomalign_large {
  bottom: -8px;
  left: 18px;
}
.rightalign_large {
  right: -16px;
  top: 14px;
}
.leftalign_large {
  left: -16px;
  top: 14px;
}

/* x-large */
.topalign_xlarge,
.bottomalign_xlarge,
.rightalign_xlarge,
.leftalign_xlarge {
  padding: 6px 10px;
  font-size: 14px;
}
.topalign_xlarge {
  top: -17px;
  left: 26px;
}
.bottomalign_xlarge {
  bottom: -8px;
  left: 26px;
}
.rightalign_xlarge {
  right: -14px;
  top: 22px;
}
.leftalign_xlarge {
  left: -14px;
  top: 22px;
}
