// Copyright (c) 2014, 2026, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// WARNING: do not directly import this file, instead import the
//          version in your base theme's directory,
//          for example alta/widgets/_oj.alta.avatar.scss
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

@import "../../utilities/oj.utilities";

//--------------------------------------------------------

// include dependencies
@if $includeAvatarClasses != false {
  @include module-include-once("common.avatar") {

    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-avatar:not(.oj-complete) {
        visibility: hidden;
      }
    }

    oj-avatar {
      display: inline-block;
    }

    .oj-avatar-background-image {
      background-size: cover;
      background-position: center center;
      align-self: stretch;
      align-items: center;
      justify-content: center;
      display: flex;
      position: absolute;
      top: -1px;
      left: -1px;
      // Chrome bug 1016796 Background-image upscaling creates artifact on top/right edges
      width: calc(100% + 2px);
      height: calc(100% + 2px);
    }
    .oj-avatar {
      border: $avatarXxsBorderWidth solid $avatarBorderColor;
      color:$avatarTextColor;

      align-items: center;
      justify-content: center;
      display: flex;
      position: relative;
      background-color: $avatarInnerBgColor;
      overflow: hidden;
    }
    .oj-avatar-square,
    .oj-avatar-square .oj-avatar-background-image,
    .oj-avatar-square .oj-avatar-placeholder-icon,
    .oj-avatar-square::after{
      border-radius: $mediumBorderRadius;
    }
  
    .oj-avatar-circle,
    .oj-avatar-circle .oj-avatar-placeholder-icon,
    .oj-avatar-circle::after,
    .oj-avatar-circle .oj-avatar-placeholder-icon {
      border-radius: 50%;
    }

    //div selector present to give it priority over colored backgrounds below
    div.oj-avatar.oj-avatar-image {
      background-color: rgba(0, 0, 0, 0);
    }

    .oj-avatar-bg-purple.oj-avatar {
      background-color: $avatarPurple;
      border-color: $avatarPurple;
    }

    .oj-avatar-bg-orange.oj-avatar {
      background-color: $avatarOrange;
      border-color: $avatarOrange;
    }

    .oj-avatar-bg-red.oj-avatar {
      background-color: $avatarRed;
      border-color: $avatarRed;
    }

    .oj-avatar-bg-teal.oj-avatar {
      background-color: $avatarTeal;
      border-color: $avatarTeal;
    }

    .oj-avatar-bg-green.oj-avatar {
      background-color: $avatarGreen;
      border-color: $avatarGreen;
    }
    .oj-avatar-bg-forest.oj-avatar {
      background-color: $avatarForest;
      border-color: $avatarForest;
    }
    .oj-avatar-bg-mauve.oj-avatar {
      background-color: $avatarMauve;
      border-color: $avatarMauve;
    }

    .oj-avatar-bg-pink.oj-avatar {
      background-color: $avatarPink;
      border-color: $avatarPink;
    }

    .oj-avatar-bg-slate.oj-avatar {
      background-color: $avatarSlate;
      border-color: $avatarSlate;
    }

    .oj-avatar-bg-blue.oj-avatar {
      background-color: $avatarBlue;
      border-color: $avatarBlue;
    }

    .oj-avatar-bg-lilac.oj-avatar {
      background-color: $avatarLilac;
      border-color: $avatarLilac;
    }

    .oj-avatar-bg-gray.oj-avatar {
      background-color: $avatarGray;
      border-color: $avatarGray;
    }

    .oj-avatar::after {
      content: '';
      display: block;
      position: absolute;
      border: 0px solid transparent;
    }

    .oj-avatar-initials {
      text-overflow: ellipsis;
      overflow:hidden;
    }
    .oj-avatar-placeholder-icon {
      background-repeat:no-repeat;
      @extend .oj-fwk-icon-person-avatar;
    }
    .oj-avatar-group-image .oj-avatar-placeholder-icon {
      @extend .oj-fwk-icon-group-avatar;
    }
    //To meet text contrast ratio requirement, a Filter is placed on the two
    //smallest avatars to darken the background color
    .oj-avatar-xxs.oj-avatar-has-initials.oj-avatar,
    .oj-avatar-xs.oj-avatar-has-initials.oj-avatar {

        background-image:linear-gradient(rgba(0, 0, 0, $avatarInitialsShadeOpacity),rgba(0, 0, 0, $avatarInitialsShadeOpacity));

    }
    //Filter is placed on the border so that the background color and border
    //color are the same
    .oj-avatar-xxs.oj-avatar-has-initials.oj-avatar::after,
    .oj-avatar-xs.oj-avatar-has-initials.oj-avatar::after {

        border-color: rgba(0, 0, 0, $avatarInitialsShadeOpacity);
        //needed to line up the darkening border with the normal border
        top: calc(0px - #{$avatarXxsBorderWidth});
        left: calc(0px - #{$avatarXxsBorderWidth});

    }

    .oj-avatar-xxs.oj-avatar-has-initials.oj-avatar::after {

        width:#{$avatarXxsInnerSize};
        height:#{$avatarXxsInnerSize};
        border-width: $avatarXxsBorderWidth;

    }
    .oj-avatar-xxs.oj-avatar {

        font-size: $avatarXxsInitialsFontSize;
        width: $avatarXxsInnerSize;
        height: $avatarXxsInnerSize;

    }

    .oj-avatar-xxs .oj-avatar-placeholder-icon {

        @include oj-fwk-icon-person-avatar-scale($avatarXxsPlaceholderScale);

    }
    .oj-avatar-group-image .oj-avatar-xxs .oj-avatar-placeholder-icon{

        @include oj-fwk-icon-group-avatar-scale($avatarXxsPlaceholderScale);

    }
    .oj-avatar-xs.oj-avatar-has-initials.oj-avatar::after {

        width:#{$avatarXsInnerSize};
        height:#{$avatarXsInnerSize};
        border-width: $avatarXxsBorderWidth;

    }
    .oj-avatar-xs.oj-avatar {

        font-size: $avatarXsInitialsFontSize;
        width: $avatarXsInnerSize;
        height: $avatarXsInnerSize;

    }

    .oj-avatar-xs .oj-avatar-placeholder-icon {

        @include oj-fwk-icon-person-avatar-scale($avatarXsPlaceholderScale);

    }
    .oj-avatar-group-image .oj-avatar-xs .oj-avatar-placeholder-icon{

        @include oj-fwk-icon-group-avatar-scale($avatarXsPlaceholderScale);

    }
    .oj-avatar-sm.oj-avatar {

        height:$avatarSmInnerSize;
        width: $avatarSmInnerSize;
        font-size: $avatarSmInitialsFontSize;

    }

    .oj-avatar-sm .oj-avatar-placeholder-icon {

        @include oj-fwk-icon-person-avatar-scale($avatarSmPlaceholderScale);

    }
    .oj-avatar-group-image .oj-avatar-sm .oj-avatar-placeholder-icon{

        @include oj-fwk-icon-group-avatar-scale($avatarSmPlaceholderScale);

    }
    /*Don't need to specify medium size since it is the default*/
    .oj-avatar {

        height:$avatarMdInnerSize;
        width: $avatarMdInnerSize;
        font-size: $avatarMdInitialsFontSize;

    }

    .oj-avatar-placeholder-icon {

        @include oj-fwk-icon-person-avatar-scale($avatarMdPlaceholderScale);

    }
    .oj-avatar-group-image .oj-avatar-placeholder-icon{

        @include oj-fwk-icon-group-avatar-scale($avatarMdPlaceholderScale);

    }
    .oj-avatar-lg.oj-avatar {

        height:$avatarLgInnerSize;
        width: $avatarLgInnerSize;
        font-size: $avatarLgInitialsFontSize;

    }

    .oj-avatar-lg .oj-avatar-placeholder-icon {

        @include oj-fwk-icon-person-avatar-scale($avatarLgPlaceholderScale);

    }
    .oj-avatar-group-image .oj-avatar-lg .oj-avatar-placeholder-icon{

        @include oj-fwk-icon-group-avatar-scale($avatarLgPlaceholderScale);

    }
    .oj-avatar-xl.oj-avatar {

        height:$avatarXlInnerSize;
        width: $avatarXlInnerSize;
        font-size: $avatarXlInitialsFontSize;

    }
 
    .oj-avatar-xl .oj-avatar-placeholder-icon {

        @include oj-fwk-icon-person-avatar-scale($avatarXlPlaceholderScale);

    }
    .oj-avatar-group-image .oj-avatar-xl .oj-avatar-placeholder-icon{

        @include oj-fwk-icon-group-avatar-scale($avatarXlPlaceholderScale);

    }
    .oj-avatar-xxl.oj-avatar,
    .oj-avatar-xl.oj-avatar{

        border-width: $avatarXlBorderWidth;

    }
    .oj-avatar-xxl.oj-avatar {

        height:$avatarXxlInnerSize;
        width: $avatarXxlInnerSize;
        font-size: $avatarXxlInitialsFontSize;

    }

    .oj-avatar-xxl .oj-avatar-placeholder-icon {

        @include oj-fwk-icon-person-avatar-scale($avatarXxlPlaceholderScale);

    }
    .oj-avatar-group-image .oj-avatar-xxl .oj-avatar-placeholder-icon{

        @include oj-fwk-icon-group-avatar-scale($avatarXxlPlaceholderScale);

    }
  }
}