/* ==========================================================================
   Config
   ========================================================================== */
@use "sass:math";

$avatar-size: 32px !default;
$avatar-border-radius: $avatar-size !default;
$avatar-size-small: $layout-spacing-base !default;
$avatar-size-large: $layout-spacing-base * 2 !default;
$avatar-size-extra-large: $layout-spacing-base * 4 !default;
$avatar-highlighted-background: $neutral-base !default;
$avatar-highlighted-color: white !default;
$avatar-offline-transparency: 0.5 !default;
$avatar-pillbox-padding: $typo-size-lead * 0.25 math.div($typo-size-lead, 3) !default;

/* ==========================================================================
   Styles
   ========================================================================== */
@keyframes avatar {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  25% {
    opacity: 1;
    transform: scale(1.1);
  }

  50% {
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}

@keyframes ring {
  0% {
    box-shadow: none;
  }

  50% {
    box-shadow: white 0 0 0 3px, 0 0 0 4px, white 0 0 0 5px;
  }

  100% {
    box-shadow: white 0 0 0 2px, 0 0 0 3px, white 0 0 0 5px;
    animation-timing-function: ease;
  }
}

.gui-avatar {
  background: $neutral-light;
  border-radius: $avatar-border-radius;
  font-weight: $typo-weight-semi-bold;
  width: $avatar-size;
  height: $avatar-size;
  display: inline-block;
  vertical-align: top;
  outline: none;
  transition: transform 0.5s;
  flex-shrink: 0;
  color: white;
  position: relative;

  &--size-sm {
    width: $avatar-size-small;
    height: $avatar-size-small;
  }

  &--size-lrg {
    width: $avatar-size-large;
    height: $avatar-size-large;
    border-radius: $avatar-size-large;
  }

  &--size-xlrg {
    width: $avatar-size-extra-large;
    height: $avatar-size-extra-large;
    border-radius: $avatar-size-extra-large;
  }
}

.gui-avatar__information {
  overflow: hidden;
  margin-left: $layout-spacing-base * 0.5;
  min-width: 300px;


  .gui-avatar__name,
  .gui-avatar__email {
    display: block;
    color: $neutral-dark;
  }

  .gui-avatar__name + .gui-avatar__email {
    color: $neutral-base;
    font-size: $typo-size-slight;
  }

  .gui-avatar__pending {
    @apply text-purple-primary
  }
}

.gui-avatar__wrapper {
  display: inline-flex;
  align-items: center;
  width: 100%;

  &--size-sm {
    font-size: $typo-size-slight;
  }

  .gui-avatar__additional {
    display: none;
  }
}

.gui-avatar__popover {
  display: flex;
  align-items: center;
}

.gui-avatar--highlighted {
  background-color: $avatar-highlighted-background;
  color: $avatar-highlighted-color;
}

.gui-avatar--supporting {
  flex-shrink: 0;
  margin: 0 $layout-spacing-base * 0.5 0 0;
}

.gui-avatar--is-locked {
  cursor: default;
}

.gui-avatar__wrapper:focus:not(.gui-avatar--is-locked),
.gui-avatar--with-toggle:not(.gui-avatar--is-locked) {
  cursor: pointer;
}

.gui-avatar__initials {
  width: $avatar-size;
  height: $avatar-size;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: $typo-size-small;
  color: $neutral-dark;

  .gui-avatar--highlighted & {
    color: white;
  }

  .gui-avatar--size-sm & {
    width: $avatar-size-small;
    height: $avatar-size-small;
    font-size: $typo-size-micro;
  }

  .gui-avatar--size-lrg & {
    font-size: $typo-size-base;
    width: $avatar-size-large;
    height: $avatar-size-large;
  }

  .gui-avatar--size-xlrg & {
    font-size: 32px;
    width: $avatar-size-extra-large;
    height: $avatar-size-extra-large;
  }
}

.gui-avatar__image {
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: $avatar-border-radius;
}

.gui-avatar__locked {
  @apply absolute bg-neutral-20 rounded-full w-3 h-3 flex items-center justify-center;

  bottom: -2px;
  right: -2px;
}

.gui-avatar__remove {
  @apply absolute top-0 left-0 w-full h-full border-0 rounded-full;

  backdrop-filter: blur(2px);
  background: rgba(#29333d, 0.5);
  display: none;
}

.gui-avatar__remove:active {
  background: rgba(#29333d, 0.7);
}

.gui-avatar:hover .gui-avatar__remove {
  @apply flex items-center justify-center;
}

.gui-avatar--offline {
  opacity: $avatar-offline-transparency;
}

.gui-avatar__wrapper--offline {
  .gui-avatar__name,
  .gui-avatar__email {
    opacity: $avatar-offline-transparency;
  }
}

.gui-avatar--offline .gui-avatar__image {
  @supports (filter: grayscale(100)) {
    filter: grayscale(100);
    opacity: 1;
  }
}

.gui-avatar__caret {
  margin-left: $layout-spacing-base * 0.25;
  opacity: 0.6;
}

.gui-is-active .gui-avatar__caret {
  opacity: 1;
}

.gui-avatar__target {
  display: inline-block;
}

.gui-avatar__wrapper--additional {
  .gui-avatar__name,
  .gui-avatar__email {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &.gui-is-visible {
    .gui-avatar__additional {
      display: block;
      margin-left: auto;

      button[class*="button--link"] {
        padding-top: 0;
        padding-bottom: 0;
      }
    }
  }
}

.gui-avatar__email {
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}

.gui-avatar__actions {
  padding-top: $layout-spacing-base * 0.25;
  display: block;
}

.gui-avatar--has-colour {
  box-shadow: white 0 0 0 2px, 0 0 0 3px, white 0 0 0 5px;
}

.gui-avatar--bordered {
  box-shadow: 0 0 0 1px white, 0 0 0 1px transparent, 0 0 0 2px white;
}

.gui-avatar--animated {
  &.gui-avatar--has-colour {
    box-shadow: none;
  }

  animation: avatar 0.7s cubic-bezier(0.39, 0.575, 0.565, 1) forwards,
    ring 0.5s 0.4s ease-out forwards;
}

.gui-avatar__wrapper--size-xlrg {
  .gui-avatar__name {
    font-size: $typo-size-larger;
    font-weight: $typo-weight-bold;
    margin-bottom: $layout-spacing-base * 0.25;
  }

  .gui-avatar__information .gui-avatar__name + .gui-avatar__email,
  .gui-avatar__email {
    font-size: $typo-size-base;
    color: $neutral-dark;
  }
}