//
//  DIALTONE
//  COMPONENTS: Avatars
//
//  These are avatars classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/components/avatars
//
//  TABLE OF CONTENTS
//  • BASE STYLE
//    • COLOR VARIANTS
//    • CHILDREN
//    • SIZES
//    • VARIANTS
//
//  ============================================================================
//  $   BASE STYLE
//  ----------------------------------------------------------------------------
.d-avatar {
  //  Component CSS Vars
  //  ------------------------------------------------------------------------
  --avatar-color-background: var(--dt-avatar-color-background-000);
  --avatar-color-text: var(--dt-avatar-color-foreground);
  --avatar-size-shape: var(--dt-size-600);
  --avatar-size-image: var(--dt-size-100-percent);
  --avatar-size-text: var(--dt-font-size-200);
  --avatar-presence-position-right: var(--dt-space-200-negative);
  --avatar-presence-position-bottom: var(--dt-space-200-negative);
  --avatar-count-color-shadow: var(--dt-theme-sidebar-color-background);

  position: relative;
  display: flex;
  color: var(--avatar-color-text);

  //  --  COLOR VARIANTS
  //  ------------------------------------------------------------------------
   &--color-000 { --avatar-color-background: var(--dt-avatar-color-background-000); }
   &--color-100 { --avatar-color-background: var(--dt-avatar-color-background-100); }
   &--color-200 { --avatar-color-background: var(--dt-avatar-color-background-200); }
   &--color-300 { --avatar-color-background: var(--dt-avatar-color-background-300); }
   &--color-400 { --avatar-color-background: var(--dt-avatar-color-background-400); }
   &--color-500 { --avatar-color-background: var(--dt-avatar-color-background-500); }
   &--color-600 { --avatar-color-background: var(--dt-avatar-color-background-600); }
   &--color-700 { --avatar-color-background: var(--dt-avatar-color-background-700); }
   &--color-800 { --avatar-color-background: var(--dt-avatar-color-background-800); }
   &--color-900 { --avatar-color-background: var(--dt-avatar-color-background-900); }
   &--color-1000 { --avatar-color-background: var(--dt-avatar-color-background-1000); }
   &--color-1100 { --avatar-color-background: var(--dt-avatar-color-background-1100); }
   &--color-1200 { --avatar-color-background: var(--dt-avatar-color-background-1200); }
   &--color-1300 { --avatar-color-background: var(--dt-avatar-color-background-1300); }
   &--color-1400 { --avatar-color-background: var(--dt-avatar-color-background-1400); }
   &--color-1500 { --avatar-color-background: var(--dt-avatar-color-background-1500); }
   &--color-1600 { --avatar-color-background: var(--dt-avatar-color-background-1600); }
   &--color-1700 { --avatar-color-background: var(--dt-avatar-color-background-1700); }
   &--color-1800 { --avatar-color-background: var(--dt-avatar-color-background-1800); }

  //  --  CHILDREN
  //  ------------------------------------------------------------------------

  &__canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size-shape);
    height: var(--avatar-size-shape);
    overflow: hidden;
    background-color: var(--avatar-color-background);
    border-radius: var(--dt-size-radius-pill);
  }

  &__image {
    width: var(--avatar-size-image);
    height: var(--avatar-size-image);
    object-fit: cover;
    border-radius: var(--dt-size-radius-pill);
  }

  &--image-loaded {
    background-color: transparent;
    background-image: unset;
  }

  &__initials {
    position: absolute;
    z-index: var(--zi-base);
    font-weight: var(--dt-font-weight-bold);
    font-size: var(--avatar-size-text);
    line-height: var(--dt-font-line-height-100);
    text-transform: uppercase;
    user-select: none;
  }

  &__icon {
    display: flex;
  }

  &__presence {
    position: absolute;
    right: var(--avatar-presence-position-right);
    bottom: var(--avatar-presence-position-bottom);
    z-index: var(--zi-base);
    display: flex;
  }

  &__count {
    position: absolute;
    right: var(--dt-space-0);
    bottom: var(--dt-space-0);
    z-index: var(--zi-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: calc(var(--dt-size-300) * 3.5);
    padding: var(--dt-space-200) calc(var(--dt-space-200) + var(--dt-space-100));
    color: var(--dt-color-foreground-primary-inverted);
    font-weight: var(--dt-font-weight-bold);
    font-size: calc(var(--dt-font-size-100) - var(--dt-size-200));
    line-height: var(--dt-font-line-height-100);
    text-align: center;
    background-color: var(--dt-color-surface-strong);
    border-radius: var(--dt-size-radius-pill);
    box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);

    .d-recipe-leftbar-row--selected &,
    .d-recipe-leftbar-row__primary:hover & {
      --avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
    }
  }

  &--clickable {
    --avatar-color-border: transparent;

    padding: 0;
    background-color: transparent;
    border: var(--dt-size-border-100) solid var(--avatar-color-border);
    border-radius: var(--dt-size-radius-circle);
    cursor: pointer;

    &:focus-visible {
      outline: none;
      box-shadow: var(--dt-shadow-focus);
    }

    &:hover {
      --avatar-color-border: var(--dt-color-border-default);
    }

    &:active {
      --avatar-color-border: var(--dt-color-border-moderate);

      transform: scale(0.98);
    }
  }

  &__overlay {
    position: absolute;
    z-index: var(--zi-base);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--dt-size-100-percent);
    height: var(--dt-size-100-percent);
    background-color: var(--dt-color-surface-contrast-opaque);
    border-radius: var(--dt-size-radius-circle);
    opacity: var(--dt-opacity-900);

    &-icon {
      width: var(--dt-size-100-percent);
      color: var(--dt-color-foreground-primary-inverted);
    }

    &-text {
      width: var(--dt-size-100-percent);
      color: var(--dt-color-foreground-primary-inverted);
      font-weight: var(--dt-font-weight-bold);
      font-size: var(--dt-font-size-200);
      text-align: center;
    }
  }

  //  --  SIZES
  //  ------------------------------------------------------------------------

  &--xs {
    --avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-200));
    --avatar-presence-position-right: var(--dt-space-300-negative);
    --avatar-presence-position-bottom: var(--dt-space-300-negative);
  }

  &--sm {
    --avatar-size-shape: var(--dt-size-550);
    --avatar-size-text: var(--dt-font-size-100);
    --avatar-presence-position-right: var(--dt-space-200-negative);
    --avatar-presence-position-bottom: var(--dt-space-200-negative);
  }

  &--md {
    --avatar-size-shape: var(--dt-size-600);
    --avatar-size-text: var(--dt-font-size-200);
    --avatar-presence-position-right: var(--dt-space-100-negative);
    --avatar-presence-position-bottom: var(--dt-space-100-negative);
  }

  &--lg {
    --avatar-size-shape: var(--dt-size-650);
    --avatar-size-text: var(--dt-font-size-300);
    --avatar-presence-position-right: var(--dt-space-100);
    --avatar-presence-position-bottom: var(--dt-space-100);
  }

  &--xl {
    --avatar-size-shape: var(--dt-size-700);
    --avatar-size-text: var(--dt-font-size-400);
    --avatar-presence-position-right: var(--dt-space-300);
    --avatar-presence-position-bottom: var(--dt-space-300);
  }

  //  --  GROUP
  //  ------------------------------------------------------------------------

  &--group {
    --avatar-size-shape: calc(var(--dt-size-300) * 4.5);

    width: var(--dt-size-550);
    height: var(--dt-size-550);
  }
}