.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-round);
  overflow: hidden;
  font-weight: var(--font-weight-700);
  color: var(--color-on-surface-alt-primary);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  .disabled-overlay{
    display: none;
  }
  &.disabled{
    .disabled-overlay{
      border-radius: var(--border-radius-round);
      position: absolute;
      height: 100%;
      width: 100%;
      display: block;
      background-color: var(--color-on-surface-alt-primary);
      opacity: 0.6;
      z-index: 2;
    }
    @for $i from 1 through 9 {
      &.bg-color-data-0#{$i} {
        background-color: var(--color-data-0#{$i}-light) !important;
      }
    }
    .material-symbols-rounded{
      color: var(--color-on-surface-neutral-disabled);
    }
  }
  .material-symbols-rounded{
    color: var(--color-on-surface-neutral-secondary);
  }
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-xs {
  width: 24px;
  height: 24px;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-700);
  .material-symbols-rounded{
    font-size: 16px;
  }
  .avatar-initials{
    font-size: var(--font-size-caption);
  }
}

.avatar-s {
  width: 36px;
  height: 36px;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-700);
  .material-symbols-rounded{
    font-size: 20px;
  }
  .avatar-initials{
    font-size: var(--font-size-s);
  }
}

.avatar-m {
  width: 48px;
  height: 48px;
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-700);
  .material-symbols-rounded{
    font-size: 24px;
  }
  .avatar-initials{
    font-size: var(--font-size-m);
  }
}

.avatar-l {
  width: 64px;
  height: 64px;
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-700);
  .material-symbols-rounded{
    font-size: 36px;
  }
  .avatar-initials{
    font-size: var(--font-size-l);
  }
}

.avatar-group {
  display: flex;
  align-items: center;
  &.avatar-xs-group{
    metron-avatar{
      margin-left: -8px;
      &:first-of-type {
        margin-left: 0;
      }
    }
    .extra-avatar{
      margin-left: -8px;
    }
  }
  &.avatar-s-group{
    metron-avatar{
      margin-left: -12px;
      &:first-of-type {
        margin-left: 0;
      }
    }
    .extra-avatar{
      margin-left: -12px;
    }
  }
  &.avatar-m-group{
    metron-avatar {
      margin-left: -16px;
      &:first-of-type {
        margin-left: 0;
      }
    }
    .extra-avatar{
      margin-left: -16px;
    }
  }
  &.avatar-l-group{
    metron-avatar {
      margin-left: -20px;
      &:first-of-type {
        margin-left: 0;
      }
    }
    .extra-avatar{
      margin-left: -20px;
    }
  }

  .avatar-xs {
    outline: 1px solid var(--color-surface-neutral-idle);;
    outline-offset: -1px;
  }

  .avatar-s {
    outline: 2px solid var(--color-surface-neutral-idle);;
    outline-offset: -2px;
  }

  .avatar-m {
    outline: 3px solid var(--color-surface-neutral-idle);;
    outline-offset: -3px;
  }

  .avatar-l {
    outline: 4px solid var(--color-surface-neutral-idle);;
    outline-offset: -4px;
  }
}

.extra-avatar {
  margin-left: -16px;
  background-color: var(--color-surface-neutral-nested);
  color: var(--color-on-surface-neutral-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-round);
  overflow: hidden;
  font-weight: var(--font-weight-700);
  cursor: pointer;
  position: relative;
  z-index: 3;
  &:hover {
    background-color: var(--color-surface-neutral-hover);
  }
  &:active {
    background-color: var(--color-surface-neutral-press);
  }
}

.avatar{
  &.avatar-icon{
    background-color: var(--color-surface-neutral-nested);
    i{
      color: var(--color-on-surface-neutral-primary);
    }
    &.avatar-xs{
      i{
        font-size: 16px;
      }
    }
    &.avatar-s{
      i{
        font-size: 20px;
      }
    }
    &.avatar-m{
      i{
        font-size: 24px;
      }
    }
    &.avatar-l{
      i{
        font-size: 36px;
      }
    }
    &.disabled{
      i{
        color: var(--color-on-surface-neutral-disabled);
      }
    }
  }
}

.avatar {
  &.avatar-logo {
    background-color: var(--color-surface-neutral-nested);
    &.avatar-xs{
      padding: 4px;
    }
    &.avatar-s{
      padding: 8px;
    }
    &.avatar-m{
     padding: 12px;
    }
    &.avatar-l{
      padding: 14px;
    }
  }
}