@use '../abstract' as *;

.avatar {
  --p-text-size: var(--text-size, var(--font-size-0));
  --p-image-size: var(--image-size, #{pxToRem(20)} );
  --p-size: var(--size, #{pxToRem(40)} ); /* default is medium size */

  --p-avatar-text-color: var(--p-avatar-text-color-default);
  --p-avatar-bg-color: var(--p-avatar-bg-color-default);
  --p-avatar-border-color: var(--p-avatar-border-color-default);

  /* default */
  --p-avatar-text-color-default:   var(--color-neutral-60);
  --p-avatar-bg-color-default:     var(--color-neutral-5);
  --p-avatar-border-color-default: var(--color-neutral-10);

  /* empty */
  --p-avatar-text-color-empty:   var(--color-neutral-20);
  --p-avatar-bg-color-empty:     var(--transparent);
  --p-avatar-border-color-empty: var(--color-neutral-20);

  /* orange */
  --p-avatar-text-color-orange:   var(--color-neutral-0);
  --p-avatar-bg-color-orange:     var(--color-orange-100);
  --p-avatar-border-color-orange: var(--p-avatar-bg-color-orange);

  /* green */
  --p-avatar-text-color-green:   var(--color-neutral-0);
  --p-avatar-bg-color-green:     var(--color-green-100);
  --p-avatar-border-color-green: var(--p-avatar-bg-color-green);

  /* blue */
  --p-avatar-text-color-blue:   var(--color-neutral-0);
  --p-avatar-bg-color-blue:     var(--color-blue-100);
  --p-avatar-border-color-blue: var(--p-avatar-bg-color-blue);

  /* pink */
  --p-avatar-text-color-pink:   var(--color-neutral-0);
  --p-avatar-bg-color-pink:     var(--color-pink-100);
  --p-avatar-border-color-pink: var(--p-avatar-bg-color-pink);

  /* red */
  --p-avatar-text-color-red:   var(--color-neutral-0);
  --p-avatar-bg-color-red:     var(--color-red-100);
  --p-avatar-border-color-red: var(--p-avatar-bg-color-red);


  --color-text-info: var(--color-information-100);
  --color-text-danger: var(--color-danger-100);
  --color-text-warning: var(--color-warning-100);
  --color-text-success: var(--color-success-100);


  /* info */
  --p-avatar-text-info:   var(--color-neutral-0);
  --p-avatar-bg-info:     var(--color-text-info);
  --p-avatar-border-info: var(--p-avatar-bg-info);

  /* danger */
  --p-avatar-text-danger:   var(--color-neutral-0);
  --p-avatar-bg-danger:     var(--color-text-danger);
  --p-avatar-border-danger: var(--p-avatar-bg-danger);

  /* warning */
  --p-avatar-text-warning:   var(--color-neutral-0);
  --p-avatar-bg-warning:     var(--color-text-warning);
  --p-avatar-border-warning: var(--p-avatar-bg-warning);

  /* success */
  --p-avatar-text-success:   var(--color-neutral-0);
  --p-avatar-bg-success:     var(--color-text-success);
  --p-avatar-border-success: var(--p-avatar-bg-success);

  color: hsl(var(--p-avatar-text-color));
  background-color: hsl(var(--p-avatar-bg-color));
  border: solid pxToRem(1) hsl(var(--p-avatar-border-color));

  font-size: var(--p-text-size);
  inline-size: var(--p-size);
  block-size: var(--p-size);

  /* fix shrinking issue */
  min-inline-size: var(--p-size);
  min-block-size: var(--p-size);
  max-inline-size: var(--p-size);
  max-block-size: var(--p-size);

  border-radius: var(--border-radius-circular);

  display: grid;
  place-content: center;
  flex-shrink: 0; /* in case it a child of flexbox */
  box-sizing: content-box;
  overflow: hidden;
  text-transform: uppercase;
  -webkit-user-select: none;
  user-select: none;
  line-height: 1;

  [class*="icon"] { font-size:var(--p-text-size)!important; }
  img, svg { inline-size:var(--p-image-size); block-size:var(--p-image-size); }
  &-link {
    display:block; border-radius:var(--border-radius-circular);
    &:focus-visible { box-shadow:var(--focus-box-shadow); }
  }
  /* sizes */
  &.is-size-x-small  {
    --p-text-size: #{pxToRem(10)};
    --p-size: #{pxToRem(24)};
    --p-image-size: #{pxToRem(16)};
    &.is-with-3-char { --p-text-size:#{pxToRem(8)}; }
    [class*="icon"] { --p-text-size:var(--font-size-0); }
  }
  &.is-size-small    {
    --p-text-size: var(--font-size-00);
    --p-size: #{pxToRem(32)};
    --p-image-size: #{pxToRem(20)};
    &.is-with-3-char { --p-text-size:#{pxToRem(10)}; }
    [class*="icon"] { --p-text-size:var(--font-size-0); }
    .icon-question-mark-circle { --p-text-size:var(--font-size-2); }
  }
  &.is-size-medium        {
    /* default */
    &.is-with-3-char { --p-text-size:var(--font-size-0); }
    [class*="icon"] { --p-text-size:var(--font-size-1); }
  }
  &.is-size-large         {
    --p-text-size:var(--font-size-1);
    --p-size:#{pxToRem(48)};
    --p-image-size: #{pxToRem(24)};
    &.is-with-3-char { --p-text-size:var(--font-size-0); }
    [class*="icon"] { --p-text-size:var(--font-size-4); }
  }
  &.is-size-x-large       {
    --p-text-size:var(--font-size-4);
    --p-size:#{pxToRem(64)};
    --p-image-size: #{pxToRem(24)};
    &.is-with-3-char { --p-text-size:var(--font-size-2); }
    [class*="icon"] { --p-text-size:var(--font-size-4); }
  }

  /* color states */
  &.is-color-empty {
    border-style: dashed;
    --p-avatar-text-color: var(--p-avatar-text-color-empty);
    --p-avatar-bg-color: var(--p-avatar-bg-color-empty);
    --p-avatar-border-color: var(--p-avatar-border-color-empty);
  }
  &.is-color-orange {
    --p-avatar-text-color: var(--p-avatar-text-color-orange);
    --p-avatar-bg-color: var(--p-avatar-bg-color-orange);
    --p-avatar-border-color: var(--p-avatar-border-color-orange);
  }
  &.is-color-green {
    --p-avatar-text-color: var(--p-avatar-text-color-green);
    --p-avatar-bg-color: var(--p-avatar-bg-color-green);
    --p-avatar-border-color: var(--p-avatar-border-color-green);
  }
  &.is-color-blue {
    --p-avatar-text-color: var(--p-avatar-text-color-blue);
    --p-avatar-bg-color: var(--p-avatar-bg-color-blue);
    --p-avatar-border-color: var(--p-avatar-border-color-blue);
  }
  &.is-color-pink {
    --p-avatar-text-color: var(--p-avatar-text-color-pink);
    --p-avatar-bg-color: var(--p-avatar-bg-color-pink);
    --p-avatar-border-color: var(--p-avatar-border-color-pink);
  }
  &.is-color-red {
    --p-avatar-text-color: var(--p-avatar-text-color-red);
    --p-avatar-bg-color: var(--p-avatar-bg-color-red);
    --p-avatar-border-color: var(--p-avatar-border-color-red);
  }

  /* message Avatars colors */
  &.is-info {
    --p-avatar-text-color: var(--p-avatar-text-info);
    --p-avatar-bg-color: var(--p-avatar-bg-info);
    --p-avatar-border-color: var(--p-avatar-border-info);
  }

  &.is-warning {
    --p-avatar-text-color: var(--p-avatar-text-warning);
    --p-avatar-bg-color: var(--p-avatar-bg-warning);
    --p-avatar-border-color: var(--p-avatar-border-warning);
  }

  &.is-danger {
    --p-avatar-text-color: var(--p-avatar-text-danger);
    --p-avatar-bg-color: var(--p-avatar-bg-danger);
    --p-avatar-border-color: var(--p-avatar-border-danger);
  }

  &.is-success {
    --p-avatar-text-color: var(--p-avatar-text-success);
    --p-avatar-bg-color: var(--p-avatar-bg-success);
    --p-avatar-border-color: var(--p-avatar-border-success);
  }


  #{$theme-dark} & {
    /* default */
    --p-avatar-text-color-default:    var(--color-neutral-20);
    --p-avatar-bg-color-default:      var(--color-neutral-85);
    --p-avatar-border-color-default:  var(--color-neutral-80);

    /* colors avatars*/
    --p-avatar-text-color-orange: var(--color-neutral-80);
    --p-avatar-text-color-green:  var(--color-neutral-80);
    --p-avatar-text-color-blue:   var(--color-neutral-80);
    --p-avatar-text-color-pink:   var(--color-neutral-80);
    --p-avatar-text-color-red:    var(--color-neutral-80);


  }
}

.avatars-group {
  --p-avatar-group-border-color: var(--avatar-group-border-color, var(--color-neutral-10));
  position:relative; z-index:0; display:flex;
  &-item {
    position: relative;
    display: inline-flex;
    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        $zindex: 10 - $i;
        z-index: $zindex;
      }
    }
    .avatar {
      border:solid pxToRem(1) hsl(var(--p-avatar-group-border-color)); border-radius:var(--border-radius-circular);
      margin-inline-start: -.6rem;
    }
    .image-item { margin-inline-start: -.6rem; }

    .is-size-x-small  { margin-inline-start: -.5rem; }
    .is-size-small    { margin-inline-start: -.5rem; }
    .is-size-large    { margin-inline-start: -0.8rem; }
  }
  #{$theme-dark} & {
    --p-avatar-group-border-color: var(--color-neutral-80);
  }
}