.overlay {
  height: 100%;

  /* Parent element
    Must be position=relative
    No z-index allowed
  */
  position: relative;
  width: 100%;
}

.overlay::after {
  /* Dark overlay is achieved overposing a pseudo-element with a 6% darker wash */
  background: var(--color-background-avatar-wash);
  border-radius: 50%;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;

  /* z-index required to position pseudo-elements in front of the parent */
  z-index: 1;
}

.translateX10 {
  transform: translateX(-10%);
}

html[dir="rtl"] .translateX10 {
  transform: translateX(10%);
}