@st-namespace 'Avatar-base-st-css';
@st-import [ setVar ] from '../../common/formatters.st';

:import {
  -st-from: "../../common/mixins.st.css";
  -st-named: sr-only;
}

.root {
  aspect-ratio: 1;
  align-items: center;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  letter-spacing: 0;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.image {
  width: 100%;
  height: 100%;
  font-size: initial;
  -st-mixin:
    setVar(--wix-ui-tpa-wow-image-border-radius, null, %, 50);
}

.anonymousAvatar::before, .textAvatar::before {
  width: 100%;
  height: 100%;
  position: absolute;
}

.textAvatar::before {
  content: attr(data-initials) / '';
  display: flex;
  align-items: center;
  justify-content: center;
}

.srOnly {
  -st-mixin: sr-only();
}

.anonymousAvatar::before {
  background-image: url('data:image/svg+xml,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cdefs%3E%3Cstyle%3E.cls-anonymous-icon%7Bfill%3A%20%23969696%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cellipse%20class%3D%22cls-anonymous-icon%22%20cx%3D%22103.7%22%20cy%3D%2274.3%22%20rx%3D%2238.3%22%20ry%3D%2238.7%22%2F%3E%3Cpath%20style%3D%22fill%3A%20none%3B%22%20d%3D%22M0%200h200v200H0z%22%2F%3E%3Cpath%20class%3D%22cls-anonymous-icon%22%20d%3D%22M188.4%20200c-7.4-43.6-44.2-76.8-88.4-76.8S19%20156.4%2011.6%20200Z%22%2F%3E%3C%2Fsvg%3E');
  content: '';
}

/* st-namespace-reference="../../../../src/components/Avatar/Avatar.base.st.css" */