@import "../../styles/global.scss";
@import "../../styles/variables.scss";

.ai-avatar-container {
  display: inline-flex;
  .ai-avatar-image-wrapper {
    cursor: pointer;
    display: flex;
    .ai-avatar-image {
      border-radius: $border-radius-radius-2;
    }
    .rounded {
      border-radius: 50%;
    }
  }
}

.ai-group-avators {
  //Added row-reverse is required to achive design
  border-radius: 4px;
  flex-direction: row-reverse;
  padding: 4px 3px 4px 11px;
  .ai-avatar-image-wrapper {
    cursor: pointer;
    .ai-avatar-image {
      object-fit: cover;
      border: 2px solid white;
      border-radius: 50%;
      margin-left: -8px;
      border-radius: $border-radius-radius-2;
    }
    .ai-avatar-show-more {
      @extend .center;
      border: 2px solid white;
      border-radius: 50%;
      margin-left: -8px;
      border-radius: $border-radius-radius-2;
      background-color: $color-core-teal-lighter;
      color: $color-core-teal-dark;
      font-size: 12px;
    }
    .rounded {
      border-radius: 50%;
    }
  }
  &:hover {
    background-color: $color-core-grey-lighter;
    cursor: pointer;
  }
}

.ai-avatar-application-type-container {
  //Added row-reverse is required to achive design
  border-radius: 4px;
  flex-direction: row-reverse;
  display: inline-flex;
  .ai-avatar-image-wrapper {
    cursor: pointer;
    .ai-avatar-image {
      object-fit: cover;
      border: 2px solid white;
      margin-left: -8px;
    }
    .rounded {
      border-radius: 50%;
    }
  }
}

.avatar-size-sm {
  width: 16px;
  height: 16px;
}
.avatar-size-md {
  width: 24px;
  height: 24px;
}
.avatar-size-lg {
  width: 32px;
  height: 32px;
}
.avatar-size-xl {
  width: 40px;
  height: 40px;
}