@import (reference) "./../styles/variables/neptune-tokens.less";
@import (reference) "./../styles/less/mixins/_logical-properties.less";
@import (reference) "./../styles/less/core/_typography.less";

@avatar-diameter-72: 72px;
@avatar-diameter-56: 56px;
@avatar-diameter-48: 48px;
@avatar-diameter-40: 40px;
@avatar-diameter-24: 24px;

.tw-avatar {
  position: relative;
  border-radius: 50%;
  user-select: none;
  box-sizing: border-box;

  & &__content {
    align-items: center;
    background-color: #86a7bd1a;
    background-color: var(--color-background-neutral);
    border-radius: 50%;
    color: var(--color-content-primary);
    display: flex;
    height: 100%;
    justify-content: center;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
  }

  &--outlined {
    border: 1px solid var(--color-interactive-accent);
    cursor: pointer;

    &:not(.disabled, :disabled):hover {
      border-color: var(--color-interactive-accent-hover);
    }
  }

  &--thumbnail {
    & * {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &--icon {
    & * {
      max-height: 100%;
      max-width: 100%;
    }
  }

  &.tw-avatar--initials,
  &.tw-avatar--emoji {
    font-family: Arial, sans-serif;
    font-weight: var(--font-weight-semi-bold);
  }

  &.tw-avatar--initials,
  &.tw-avatar--icon {
    color: var(--color-content-primary);
  }

  &.tw-avatar--initials,
  &.tw-avatar--emoji {
    // There is a problem how emojis & text vertically aligned between Windows and Mac.
    // Setting font family to Arial seems to resolve it.
    font-family: Arial, sans-serif;
  }

  &.tw-avatar--branded .tw-avatar__content {
    font-family: var(--font-family-display);
    font-feature-settings: "ss01";
    color: var(--color-dark-charcoal);
    line-height: 1;
  }

  &--24 {
    .avatar-dimension(@avatar-diameter-24);
  }

  &--40 {
    .avatar-dimension(@avatar-diameter-40);
  }

  &--48 {
    .avatar-dimension(@avatar-diameter-48);
  }

  &--56 {
    .avatar-dimension(@avatar-diameter-56);
  }

  &--72 {
    .avatar-dimension(@avatar-diameter-72);
  }

  img {
    width: 100%;
    height: 100%;
  }

  .np-theme-personal & {
    &--outlined {
      border-color: var(--color-interactive-primary);

      &:not(.disabled, :disabled):hover {
        border-color: var(--color-interactive-primary-hover);
      }
    }
  }
}

.avatar-dimension(@avatar-size) {
  @mask-size: 2px;

  min-width: @avatar-size;
  width: @avatar-size;
  height: @avatar-size;

  &.tw-avatar--emoji,
  &.tw-avatar--icon {
    font-size: @avatar-size * 0.5;
  }

  &.tw-avatar--initials {
    font-size: @avatar-size * 0.35;
  }

  &.tw-avatar--branded {
    font-size: @avatar-size * 0.45;
  }

  &.tw-avatar--outlined {
    padding: @mask-size;

    &.tw-avatar--thumbnail::after {
      top: @mask-size;
      left: @mask-size;
      right: @mask-size;
      bottom: @mask-size;
    }
  }

  &.tw-avatar--thumbnail::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid var(--color-border-overlay);
    content: "";
    border-radius: 50%;
  }
}