@import '../tools/mixins/avatar';
@import '../tools/mixins/flex';
@import '../settings/fonts';
@import 'node_modules/@collabui/icons/scss/mixins';

@include exports('cui-avatar') {
  .#{$avatar__class} {
    position: relative;
    display: inline-flex;
    font-family: $brand-font-regular;
    text-transform: uppercase;
    user-select: none;

    @include avatar-size;

    > .#{$avatar__class}__failure-badge:after {
      position: absolute;
      right: $avatar-badge__spacing;
      bottom: $avatar-badge__spacing;
      font-weight: bolder;
      color: $avatar-failure-badge__color;
      background-color: $avatar-failure-badge__background;
      border: $avatar-failure-badge__border;
      content: '\0021';

      @include flex;
      @include border-radius($global-rounded);
      @include avatar-size(
        $avatar-failure-badge__size,
        $avatar-failure-badge__font-size
      );
    }

    > .#{$avatar__class}__notification-badge:after {
      @include border-radius($global-rounded);
      height: $avatar-notification-badge__size;
      width: $avatar-notification-badge__size;
      position: absolute;
      right: $avatar-badge__spacing;
      top: $avatar-badge__spacing;
      background-color: $avatar-notification-badge__color;
      content: '\00a0';

      @include flex;
    }

    &.#{$avatar__class}--dark {
      &.#{$avatar__class}--active:after {
        box-shadow: $avatar--active__shadow--dark;
      }
    }

    &.#{$avatar__class}--typing {
      > .cui-loading {
        @include avatar-overlay-style;
      }
    }

    &.#{$avatar__class}--bot:after {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: $avatar-bot__padding;
      font-size: $avatar-bot__font-size;
      line-height: $avatar-bot__line-height;
      color: $avatar-bot__color;
      text-transform: none;
      background-color: $avatar-bot__background;
      border-radius: $avatar-bot__border-radius;
      content: 'Bot';
    }

    .#{$avatar__class}__img {
      @include avatar-contents-base;

      background-color: $avatar-img__background;
    }

    .#{$avatar__class}__letter {
      @include avatar-contents-base;

      color: $avatar-letter__color;
      background-color: $avatar-letter__background;
    }

    .#{$avatar__class}__self {
      @include avatar-contents-base;

      background-color: $avatar-self__background;
      border: $avatar-self__border;
      fill: $avatar-self__color;
    }

    .#{$avatar__class}__icon {
      @include avatar-contents-base;

      color: $avatar-icon__color;
      background-color: $avatar-icon__background;
      fill: currentColor;

      &--overview {
        @include border-radius($global-rounded);
        @include box-shadow(inset 0 0 0 1px $white-16);

        color: $white;
        background-color: transparent;
      }
    }

    .#{$avatar__class}__img--hidden {
      display: none;
    }

    &.#{$avatar__class}--clickable:after {
      @include avatar-contents-base;

      position: absolute;
      content: '';
    }

    &.#{$avatar__class}--clickable {
      &:hover::after {
        @include avatar-overlay-style($white, $black_08);
      }

      &:active::after {
        @include avatar-overlay-style($white, $black_16);
      }
    }

    &.#{$avatar__class}--active:after {
      @include avatar-contents-base;
      left: 0;

      position: absolute;
      content: '';
      box-shadow: $avatar--active__shadow;
    }

    &.#{$avatar__class}--inactive {
      opacity: $avatar--inactive__opacity;
    }

    @each $size-class, $dnd-size, $pto-size, $dimension in $avatar-sizes {
      $size: $size-class;

      @if $dimension {
        $size: $dimension;
      }

      &.#{$avatar__class}--#{$size-class} {
        @include avatar-size(rem-calc($size));

        &.#{$avatar__class}--ooo:after {
          @include avatar-overlay-style;

          font-size: rem-calc($size/2);
          content: $pto-size;
        }

        &.#{$avatar__class}--dnd:after {
          @include avatar-overlay-style;

          font-size: rem-calc($size/2);
          content: $dnd-size;
        }
      }
    }
  }
}

/**
* @component avatar
* @section default
*
* @html
  <div class="cui-avatar cui-avatar--44" title="Tom Smith">
    <span class="cui-avatar__letter">TS</span>
  </div>
*/

/**
* @component avatar
* @section dark
*
* @html
  <div class="cui-avatar cui-avatar--active cui-avatar--dark" title="Tom Smith">
    <img alt="Barbara" class="cui-avatar__img" src="http://react.collab-ui.com/barbara.png">
  </div>
*/

/**
* @component avatar
* @section active
*
* @html
  <div class="cui-avatar cui-avatar--active" title="Tom Smith">
    <span class="cui-avatar__letter">TS</span>
  </div>
*/

/**
* @component avatar
* @section inactive
*
* @html
  <div class="cui-avatar cui-avatar--inactive" title="Barbara">
    <img alt="Barbara" class="cui-avatar__img" src="http://react.collab-ui.com/barbara.png">
  </div>
*/

/**
* @component avatar
* @section self
*
* @html
  <div class="cui-avatar cui-avatar--self" title="Tom Smith">
    <span class="cui-avatar__self">
      <i class="icon icon-chat-active_18 cui-color--blue-base"></i>
      </span>
  </div>
*/

/**
* @component avatar
* @section status
*
* @html
  <div class="cui-avatar cui-avatar--dnd" title="Tom Smith">
    <span class="cui-avatar__letter">TS</span>
  </div>
  <div class="cui-avatar cui-avatar--ooo" title="Barbara">
    <img alt="Barbara" class="cui-avatar__img" src="http://react.collab-ui.com/barbara.png">
  </div>
*/

/**
* @component avatar
* @section group
*
* @html
  <div class="cui-avatar cui-avatar--group" title="Team Space">
    <span class="cui-avatar__letter">T</span>
  </div>
*/

/**
* @component avatar
* @section bot
*
* @html
  <div class="cui-avatar cui-avatar--bot" title="R2D2">
    <span class="cui-avatar__letter">R2</span>
  </div>
*/

/**
* @component avatar
* @section notification
*
* @html
  <div class="cui-avatar" title="Tom Smith">
    <span class="cui-avatar__letter">TS</span>
    <span class="cui-avatar__notification-badge"></span>
  </div>
*/

/**
* @component avatar
* @section failure
*
* @html
  <div class="cui-avatar" title="Tom Smith">
    <span class="cui-avatar__letter">TS</span>
    <span class="cui-avatar__failure-badge"></span>
  </div>
*/

/**
* @component avatar
* @section typing
*
* @html
  <div class="cui-avatar cui-avatar--typing" title="Barbara">
      <img alt="Barbara" class="cui-avatar__img" src="http://react.collab-ui.com/barbara.png">
      <div class="cui-loading">
      <span class="cui-loading__icon"></span>
      <span class="cui-loading__icon"></span>
      <span class="cui-loading__icon"></span>
    </div>
  </div>
*/

/**
* @component avatar
* @section composite
*
* @html
  <div class="cui-composite-avatar cui-composite-avatar--40">
    <div class="cui-avatar" title="Tom Smith">
      <span class="cui-avatar__letter">TS</span>
    </div>
    <div class="cui-avatar" title="Barbara">
        <img alt="Barbara" class="cui-avatar__img" src="http://react.collab-ui.com/barbara.png">
      </div>
  </div>
*/