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

  background-color: var(--lib_base_avatar_bg);
} /* shapes*/
.circle {
  border-radius: 100%;
  text-align: center;
}
.square {
  border-radius: 3px;
  text-align: center;
}

/* sizes */
.large {
  width: var(--lib_size_62);
  height: var(--lib_size_62);
}
.medium {
  width: var(--lib_size_52);
  height: var(--lib_size_52);
}
.small {
  width: var(--lib_size_30);
  height: var(--lib_size_30);
}
.xlarge {
  width: var(--lib_size_80);
  height: var(--lib_size_80);
}
/* colors */
.black {
  color: var(--lib_base_avatar_default_color);
  border: var(--lib_border_size_xsmall) solid var(--lib_base_avatar_default_border);
}
.gray {
  color: var(--lib_base_avatar_primary_color);
  border: var(--lib_border_size_xsmall) solid var(--lib_base_avatar_primary_border);
}
.blue {
  color: var(--lib_base_avatar_secondary_color);
  border: var(--lib_border_size_xsmall) solid
    var(--lib_base_avatar_secondary_border);
}
/* others */
.container {
  position: relative;
}
.floatinglayer {
  position: absolute;
  z-index: 1;
  color: var(--lib_base_avatar_floating_color);
  border: var(--lib_border_size_xsmall) solid
    var(--lib_base_avatar_floating_border);
  border-radius: 50%;
  background: var(--lib_base_avatar_floating_bg);
}
/* small */
.topalign_small,
.bottomalign_small,
.rightalign_small,
.leftalign_small {
  font-size: var(--lib_fsize_8);
}
.topalign_small, .bottomalign_small, .rightalign_small, .leftalign_small {
  padding: var(--lib_size_2) var(--lib_size_5);
}
.topalign_small {
  top: -8px;
}
[dir=ltr] .topalign_small {
  left: 7px;
}
[dir=rtl] .topalign_small {
  right: 7px;
}
.bottomalign_small {
  bottom: -4px;
}
[dir=ltr] .bottomalign_small {
  left: 7px;
}
[dir=rtl] .bottomalign_small {
  right: 7px;
}
.rightalign_small {
  top: 6px;
}
[dir=ltr] .rightalign_small {
  right: -8px;
}
[dir=rtl] .rightalign_small {
  left: -8px;
}
.leftalign_small {
  top: 6px;
}
[dir=ltr] .leftalign_small {
  left: -8px;
}
[dir=rtl] .leftalign_small {
  right: -8px;
}

/* medium */
.topalign_medium,
.bottomalign_medium,
.rightalign_medium,
.leftalign_medium {
  font-size: var(--lib_fsize_10);
}
.topalign_medium, .bottomalign_medium, .rightalign_medium, .leftalign_medium {
  padding: var(--lib_size_5) var(--lib_size_8);
}
.topalign_medium {
  top: -8px;
}
[dir=ltr] .topalign_medium {
  left: 15px;
}
[dir=rtl] .topalign_medium {
  right: 15px;
}
.bottomalign_medium {
  bottom: -4px;
}
[dir=ltr] .bottomalign_medium {
  left: 15px;
}
[dir=rtl] .bottomalign_medium {
  right: 15px;
}
.rightalign_medium {
  top: 15px;
}
[dir=ltr] .rightalign_medium {
  right: -9px;
}
[dir=rtl] .rightalign_medium {
  left: -9px;
}
.leftalign_medium {
  top: 15px;
}
[dir=ltr] .leftalign_medium {
  left: -9px;
}
[dir=rtl] .leftalign_medium {
  right: -9px;
}
/* large */
.topalign_large,
.bottomalign_large,
.rightalign_large,
.leftalign_large {
  font-size: var(--lib_fsize_12);
}
.topalign_large, .bottomalign_large, .rightalign_large, .leftalign_large {
  padding: var(--lib_size_6) var(--lib_size_10);
}
.topalign_large {
  top: -14px;
}
[dir=ltr] .topalign_large {
  left: 18px;
}
[dir=rtl] .topalign_large {
  right: 18px;
}
.bottomalign_large {
  bottom: -8px;
}
[dir=ltr] .bottomalign_large {
  left: 18px;
}
[dir=rtl] .bottomalign_large {
  right: 18px;
}
.rightalign_large {
  top: 14px;
}
[dir=ltr] .rightalign_large {
  right: -16px;
}
[dir=rtl] .rightalign_large {
  left: -16px;
}
.leftalign_large {
  top: 14px;
}
[dir=ltr] .leftalign_large {
  left: -16px;
}
[dir=rtl] .leftalign_large {
  right: -16px;
}

/* x-large */
.topalign_xlarge,
.bottomalign_xlarge,
.rightalign_xlarge,
.leftalign_xlarge {
  font-size: var(--lib_fsize_14);
}
.topalign_xlarge, .bottomalign_xlarge, .rightalign_xlarge, .leftalign_xlarge {
  padding: var(--lib_size_6) var(--lib_size_10);
}
.topalign_xlarge {
  top: -17px;
}
[dir=ltr] .topalign_xlarge {
  left: 26px;
}
[dir=rtl] .topalign_xlarge {
  right: 26px;
}
.bottomalign_xlarge {
  bottom: -8px;
}
[dir=ltr] .bottomalign_xlarge {
  left: 26px;
}
[dir=rtl] .bottomalign_xlarge {
  right: 26px;
}
.rightalign_xlarge {
  top: 22px;
}
[dir=ltr] .rightalign_xlarge {
  right: -14px;
}
[dir=rtl] .rightalign_xlarge {
  left: -14px;
}
.leftalign_xlarge {
  top: 22px;
}
[dir=ltr] .leftalign_xlarge {
  left: -14px;
}
[dir=rtl] .leftalign_xlarge {
  right: -14px;
}
