.md-avatar-presence-icon-wrapper {
  position: absolute;
  background-color: var(--mds-color-theme-background-solid-primary-normal);
  border-radius: 100vh;
  width: 1.125rem;
  height: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: -0.2rem;
  right: -0.2rem;

  &[data-shape='false'] {
    border-radius: 25%;
  }
}

.md-avatar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100vh;
  position: relative;
  width: fit-content;

  // The color of these elements are descriptive therefore don't override them in high contrast
  forced-color-adjust: none;

  .md-avatar-wrapper-children {
    position: absolute;
  }

  .md-avatar-icon-on-hover-wrapper {
    position: absolute;
    background-color: transparent;
    border-radius: 100vh;
    width: 1.125rem;
    height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;

    .md-avatar-icon-wrapper::part(icon) {
      display: none;
    }
  }

  &:hover {
    // when it is not a button
    .md-avatar-icon-on-hover-wrapper {
      background-color: var(--mds-color-theme-common-overlays-secondary-normal);

      .md-avatar-icon-wrapper::part(icon) {
        display: block;
      }
    }
  }

  span {
    font-weight: 550;
    color: var(--mds-color-theme-common-text-primary-normal);
  }

  img {
    border-radius: 100vh;
    height: inherit;
    width: inherit;
    object-fit: cover;

    &.md-avatar-image-hidden {
      display: none;
    }
  }

  .md-avatar-icon-wrapper {
    --mdc-icon-fill-color: var(--mds-color-theme-common-text-primary-normal);
  }

  // Background Color
  &[data-color='default'] {
    background-color: var(--mds-color-theme-avatar-default);
  }

  &[data-color='gold'] {
    background-color: var(--mds-color-theme-avatar-gold);
  }

  &[data-color='orange'] {
    background-color: var(--mds-color-theme-avatar-orange);
  }

  &[data-color='lime'] {
    background-color: var(--mds-color-theme-avatar-lime);
  }

  &[data-color='mint'] {
    background-color: var(--mds-color-theme-avatar-mint);
  }

  &[data-color='cyan'] {
    background-color: var(--mds-color-theme-avatar-cyan);
  }

  &[data-color='cobalt'] {
    background-color: var(--mds-color-theme-avatar-cobalt);
  }

  &[data-color='slate'] {
    background-color: var(--mds-color-theme-avatar-slate);
  }

  &[data-color='violet'] {
    background-color: var(--mds-color-theme-avatar-violet);
  }

  &[data-color='purple'] {
    background-color: var(--mds-color-theme-avatar-purple);
  }

  &[data-color='pink'] {
    background-color: var(--mds-color-theme-avatar-pink);
  }

  &[data-color='yellow'] {
    background-color: var(--mds-color-theme-avatar-yellow);
  }

  // Sizes
  &[data-size='24'] {
    span {
      font-size: 0.75rem;
    }

    .md-avatar-presence-icon-wrapper {
      width: 1rem;
      height: 1rem;
    }

    width: 1.5rem;
    height: 1.5rem;

    .md-avatar-icon-on-hover-wrapper {
      width: 1.5rem;
      height: 1.5rem;
    }
  }

  &[data-size='32'] {
    span {
      font-size: 0.875rem;
    }

    .md-avatar-presence-icon-wrapper {
      width: 1rem;
      height: 1rem;
    }

    width: 2rem;
    height: 2rem;

    .md-avatar-icon-on-hover-wrapper {
      width: 2rem;
      height: 2rem;
    }
  }

  &[data-size='48'] {
    span {
      font-size: 1.125rem;
    }

    .md-avatar-presence-icon-wrapper {
      width: 1.125rem;
      height: 1.125rem;
    }

    width: 3rem;
    height: 3rem;

    .md-avatar-icon-on-hover-wrapper {
      width: 3rem;
      height: 3rem;
    }
  }

  &[data-size='64'] {
    span {
      font-size: 1.625rem;
    }

    .md-avatar-presence-icon-wrapper {
      width: 1.375rem;
      height: 1.375rem;
    }

    width: 4rem;
    height: 4rem;

    .md-avatar-icon-on-hover-wrapper {
      width: 4rem;
      height: 4rem;
    }
  }

  &[data-size='72'] {
    span {
      font-size: 1.625rem;
    }

    .md-avatar-presence-icon-wrapper {
      width: 1.5rem;
      height: 1.5rem;
    }

    width: 4.5rem;
    height: 4.5rem;

    .md-avatar-icon-on-hover-wrapper {
      width: 4.5rem;
      height: 4.5rem;
    }
  }

  &[data-size='88'] {
    span {
      font-size: 1.625rem;
    }

    .md-avatar-presence-icon-wrapper {
      width: 2rem;
      height: 2rem;
    }

    width: 5.5rem;
    height: 5.5rem;

    .md-avatar-icon-on-hover-wrapper {
      width: 5.5rem;
      height: 5.5rem;
    }
  }

  &[data-size='124'] {
    span {
      font-size: 2.5rem;
    }

    .md-avatar-presence-icon-wrapper {
      width: 2.75rem;
      height: 2.75rem;
    }

    width: 7.75rem;
    height: 7.75rem;

    .md-avatar-icon-on-hover-wrapper {
      width: 7.75rem;
      height: 7.75rem;
    }
  }
}

.md-avatar-button-wrapper {
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;

  &:hover,
  &:focus {
    // when it is a button
    .md-avatar-icon-on-hover-wrapper {
      background-color: var(--mds-color-theme-common-overlays-secondary-normal);

      .md-avatar-icon-wrapper::part(icon) {
        display: block;
      }
    }
  }
}

.md-avatar-animation-wrapper {
  width: 100%;
  height: 100%;
  background: var(--mds-color-theme-common-overlays-secondary-normal);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100vh;
}