:host {
  --identicon-background-red: linear-gradient(136deg, #ff4270 6.86%, #ff7c7c 93.78%);
  --identicon-background-orange: linear-gradient(136deg, #f45532 6.86%, #ff9b63 93.78%);
  --identicon-background-yellow: linear-gradient(136deg, #ffa756 6.86%, #fbff47 93.78%);
  --identicon-background-green: linear-gradient(136deg, #0cae60 6.86%, #7bffd0 93.78%);
  --identicon-background-blue: linear-gradient(136deg, #476fff 6.86%, #47c8ff 93.78%);
  --identicon-background-purple: linear-gradient(136deg, #9747ff 6.86%, #da47ff 93.78%);
  --identicon-background-empty: linear-gradient(136deg, #aaaaaa 6.86%, #999999 93.78%);
  --identicon-arc-width: 30%;
  display: block;
  aspect-ratio: 1;
  border-radius: 25%;
  position: relative;
  border: 1px solid var(--cpsl-color-background-8);
}
:host > svg {
  fill: rgba(255, 255, 255, 0.6);
  position: absolute;
  width: var(--identicon-arc-width);
}
:host > svg.rotate90 {
  transform: rotate(0.25turn);
}
:host > svg.rotate180 {
  transform: rotate(0.5turn);
}
:host > svg.rotate270 {
  transform: rotate(0.75turn);
}
:host > svg:nth-child(1) {
  right: 50%;
  bottom: 50%;
}
:host > svg:nth-child(2) {
  left: 50%;
  bottom: 50%;
}
:host > svg:nth-child(3) {
  right: 50%;
  top: 50%;
}
:host > svg:nth-child(4) {
  left: 50%;
  top: 50%;
}

:host(.red) {
  background: var(--identicon-background-red);
}

:host(.orange) {
  background: var(--identicon-background-orange);
}

:host(.green) {
  background: var(--identicon-background-green);
}

:host(.yellow) {
  background: var(--identicon-background-yellow);
}

:host(.blue) {
  background: var(--identicon-background-blue);
}

:host(.purple) {
  background: var(--identicon-background-purple);
}

:host(.empty) {
  background: var(--identicon-background-empty);
}

:host(.avatar) {
  border-radius: 1000px;
}