$text-fill: var(--wds-avatar-text-fill, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #ffffff)));
$color-7-fill: var(--wds-avatar-color-7-fill, var(--wds-color-fill-accent-12, var(--wsr-color-D50, #acafc4)));
$size-tiny: var(--wds-avatar-size-tiny, 18px);
$font-stack: Madefor,
  'Helvetica Neue',
  Helvetica,
  Arial,
  'メイリオ',
  'meiryo',
  'ヒラギノ角ゴ pro w3',
  'hiragino kaku gothic pro',
  sans-serif;
$font-family: var(--wds-font-family-default, var(--wsr-font-family, #{$font-stack}));
$font-family-plain: var(--wds-font-family-default, #{$font-stack});

.avatar {
  line-height: 0;

  &__placeholder {
    fill: var(--wds-color-blue-300, var(--wsr-color-B30, #a8caff));
    height: inherit;
    width: inherit;
    border-radius: inherit;
  }

  &__avatar-container {
    position: relative;
    display: inline-block;
    /* stylelint-disable-next-line plugin/use-baseline */
    user-select: none;
  }

  &__avatar-container--presence &__core-avatar {
    padding-right: 2px;
  }

  &__avatar-container--clickable &__avatar {
    cursor: pointer;
  }

  &__presence {
    border: var(--wds-border-width-200, 2px) solid
      var(--wds-color-border-light-active, var(--wsr-color-D80, #ffffff));
    position: absolute;
    border-radius: var(--wds-border-radius-full, 50px);
    top: 0;
    right: 0;
  }

  &__indication {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  &__avatar-container--fade &__indication {
    opacity: 0;
    transition: opacity 100ms linear;
  }

  &__icon-button-shadow {
    box-shadow: var(
      --wsr-shadow10,
      0 2px 1px 0 rgba(22, 45, 61, 0.48),
      0 0 3px 0 rgba(22, 45, 61, 0.12)
    );
  }

  &__avatar-container--size-size90 &__indication,
  &__avatar-container--size-size72 &__indication {
    width: 30px;
    height: 30px;
  }

  &__avatar-container--size-size60 &__indication,
  &__avatar-container--size-size48 &__indication {
    width: 24px;
    height: 24px;
  }

  &__avatar-container--size-size18 &__presence,
  &__avatar-container--size-size24 &__presence {
    width: 6px;
    height: 6px;
  }

  &__avatar-container--size-size30 &__presence,
  &__avatar-container--size-size36 &__presence {
    width: 8px;
    height: 8px;
  }

  &__avatar-container--size-size48 &__presence,
  &__avatar-container--size-size60 &__presence {
    width: 10px;
    height: 10px;
  }

  &__avatar-container--size-size72 &__presence {
    width: 12px;
    height: 12px;
    top: 1px;
  }

  &__avatar-container--size-size90 &__presence {
    width: 12px;
    height: 12px;
    top: 1px;
    right: 4px;
  }

  &__avatar-container--size-size90#{&}__avatar-container--presence
    &__core-avatar {
    padding-right: 0;
  }

  &__avatar-container--size-size48#{&}__avatar-container--presence
    &__core-avatar,
  &__avatar-container--size-size36#{&}__avatar-container--presence
    &__core-avatar,
  &__avatar-container--size-size30#{&}__avatar-container--presence
    &__core-avatar,
  &__avatar-container--size-size18#{&}__avatar-container--presence
    &__core-avatar {
    padding-top: 1px;
    padding-right: 5px;
  }

  &__avatar-container--size-size24#{&}__avatar-container--presence
    &__core-avatar {
    padding-right: 4px;
  }

  &__avatar-container--presence-type-online &__presence {
    background-color: var(
      --wds-color-fill-success-primary,
      var(--wsr-color-G20, #51b77b)
    );
  }

  &__avatar-container--presence-type-offline &__presence {
    background-color: var(
      --wds-color-fill-destructive-primary,
      var(--wsr-color-R20, #ff6d63)
    );
  }

  &__avatar-container--presence-type-busy &__presence {
    background-color: var(
      --wds-color-fill-warning-primary,
      var(--wsr-color-Y10, #ffb700)
    );
  }

  &__avatar-container--size-size90#{&}__avatar-container--indication,
  &__avatar-container--size-size72#{&}__avatar-container--indication,
  &__avatar-container--size-size60#{&}__avatar-container--indication {
    padding-right: 6px;
  }

  &__avatar-container--size-size48#{&}__avatar-container--indication {
    padding-right: 12px;
  }

  &__avatar-container--size-size90#{&}__avatar-container--indication#{&}__avatar-container--presence {
    padding-right: 6px;
  }

  &__avatar-container--size-size72#{&}__avatar-container--indication#{&}__avatar-container--presence,
  &__avatar-container--size-size60#{&}__avatar-container--indication#{&}__avatar-container--presence {
    padding-right: 4px;
  }

  &__avatar-container--size-size48#{&}__avatar-container--indication#{&}__avatar-container--presence {
    padding-right: 7px;
  }

  &__avatar-container--size-size48#{&}__avatar-container--indication
    &__presence {
    right: 10px;
  }

  &__avatar-container--size-size60#{&}__avatar-container--indication
    &__presence,
  &__avatar-container--size-size72#{&}__avatar-container--indication
    &__presence {
    right: 6px;
  }

  &__avatar-container--size-size90#{&}__avatar-container--shape-square
    &__presence {
    top: -5px;
    right: 1px;
  }

  &__avatar-container--size-size72#{&}__avatar-container--shape-square
    &__presence {
    top: -5px;
    right: 1px;
  }

  &__avatar-container--size-size60#{&}__avatar-container--shape-square
    &__presence {
    top: -4px;
    right: 2px;
  }

  &__avatar-container--size-size48#{&}__avatar-container--shape-square
    &__presence {
    top: -3px;
    right: 8px;
  }

  &__avatar-container--size-size36#{&}__avatar-container--shape-square
    &__presence {
    top: -3px;
    right: 1px;
  }

  &__avatar-container--size-size30#{&}__avatar-container--shape-square
    &__presence {
    top: -3px;
    right: 1px;
  }

  &__avatar-container--size-size24#{&}__avatar-container--shape-square
    &__presence {
    top: -4px;
    right: 0;
  }

  &__avatar-container--size-size18#{&}__avatar-container--shape-square
    &__presence {
    top: -3px;
    right: 1px;
  }

  &__avatar-container--size-size90#{&}__avatar-container--shape-square
    &__indication {
    right: 0;
    bottom: -3px;
  }

  &__avatar-container--size-size72#{&}__avatar-container--shape-square
    &__indication {
    right: 0;
    bottom: -3px;
  }

  &__avatar-container--size-size60#{&}__avatar-container--shape-square
    &__indication {
    right: 0;
    bottom: -2px;
  }

  &__avatar-container--size-size48#{&}__avatar-container--shape-square
    &__indication {
    right: 3px;
    bottom: -2px;
  }

  &__avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    width: 48px;
    border-radius: 30px;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
  }

  &__avatar#{&}__core--content-type-image &__core-content {
    height: inherit;
    width: inherit;
    border-radius: inherit;
  }

  &__avatar#{&}__core--content-type-placeholder {
    background-color: var(--wds-color-blue-500, var(--wsr-color-B50, #e7f0ff));
  }

  &__avatar#{&}__core--content-type-text#{&}__avatar--color-a1 {
    background-color: var(--wds-color-fill-accent-1, var(--wsr-color-A1, #1684ea));
  }

  &__avatar#{&}__core--content-type-text#{&}__avatar--color-a2 {
    background-color: var(--wds-color-fill-accent-2, var(--wsr-color-A2, #17b0e2));
  }

  &__avatar#{&}__core--content-type-text#{&}__avatar--color-a3 {
    background-color: var(--wds-color-fill-accent-3, var(--wsr-color-A3, #6544f9));
  }

  &__avatar#{&}__core--content-type-text#{&}__avatar--color-a4 {
    background-color: var(--wds-color-fill-accent-4, var(--wsr-color-A4, #3d9fa1));
  }

  &__avatar#{&}__core--content-type-text#{&}__avatar--color-a5 {
    background-color: var(--wds-color-fill-accent-5, var(--wsr-color-A5, #d04091));
  }

  &__avatar#{&}__core--content-type-text#{&}__avatar--color-a6 {
    background-color: var(--wds-color-fill-accent-6, var(--wsr-color-A6, #fdb10c));
  }

  &__avatar#{&}__core--content-type-text#{&}__avatar--color-a7 {
    background-color: $color-7-fill;
  }

  &__avatar-container--size-size90 &__loader-container,
  &__avatar-container--size-size90 &__avatar {
    height: 90px;
    width: 90px;
    border-radius: 45px;
  }

  &__avatar-container--size-size72 &__loader-container,
  &__avatar-container--size-size72 &__avatar {
    height: 72px;
    width: 72px;
    border-radius: 36px;
  }

  &__avatar-container--size-size60 &__loader-container,
  &__avatar-container--size-size60 &__avatar {
    height: 60px;
    width: 60px;
    border-radius: 36px;
  }

  &__avatar-container--size-size48 &__loader-container,
  &__avatar-container--size-size48 &__avatar {
    height: 48px;
    width: 48px;
    border-radius: 30px;
  }

  &__avatar-container--size-size36 &__avatar {
    height: 36px;
    width: 36px;
    border-radius: 21px;
  }

  &__avatar-container--size-size30 &__avatar {
    height: 30px;
    width: 30px;
    border-radius: 15px;
  }

  &__avatar-container--size-size24 &__avatar {
    height: 24px;
    width: 24px;
    border-radius: 12px;
  }

  &__avatar-container--size-size18 &__avatar {
    height: $size-tiny;
    width: $size-tiny;
    border-radius: 12px;
  }

  &__avatar-container--shape-square &__loader-container,
  &__avatar-container--shape-square &__avatar {
    border-radius: var(--wds-border-radius-200, 4px);
  }

  &__avatar-container--size-size72#{&}__avatar-container--shape-square
    &__loader-container,
  &__avatar-container--size-size90#{&}__avatar-container--shape-square
    &__loader-container,
  &__avatar-container--size-size72#{&}__avatar-container--shape-square
    &__avatar,
  &__avatar-container--size-size90#{&}__avatar-container--shape-square
    &__avatar {
    border-radius: var(--wds-border-radius-300, 6px);
  }

  &__avatar#{&}__core--content-type-text &__core-content {
    font-family: $font-family;
    font-size: var(
      --wds-font-size-body-small,
      var(--wsr-text-font-size-small, 14px)
    );
    font-weight: var(--wds-font-weight-bold, var(--wsr-font-weight-bold, 700));
    line-height: var(
      --wds-font-line-height-body-small,
      var(--wsr-text-line-height-small, 18px)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    color: $text-fill;
  }

  &__avatar-container--size-size90 &__avatar#{&}__core--content-type-text
    &__core-content,
  &__avatar-container--size-size72 &__avatar#{&}__core--content-type-text
    &__core-content {
    font-family: $font-family;
    font-size: var(
      --wds-font-size-body-medium,
      var(--wsr-text-font-size-medium, 16px)
    );
    font-weight: var(--wds-font-weight-bold, var(--wsr-font-weight-bold, 700));
    line-height: var(
      --wds-font-line-height-body-medium,
      var(--wsr-text-line-height-medium, 24px)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
  }

  &__avatar-container--size-size36 &__avatar#{&}__core--content-type-text
    &__core-content,
  &__avatar-container--size-size30 &__avatar#{&}__core--content-type-text
    &__core-content,
  &__avatar-container--size-size24 &__avatar#{&}__core--content-type-text
    &__core-content,
  &__avatar-container--size-size18 &__avatar#{&}__core--content-type-text
    &__core-content {
    font-family: $font-family-plain;
    font-size: var(--wds-font-size-100, 10px);
    font-weight: var(--wds-font-weight-bold, 700);
    line-height: var(--wds-font-line-height-200, 18px);
  }

  &__loader-container {
    position: absolute;
    bottom: 0;
    left: 0;
  }

  &__overlay {
    opacity: 0.66;
    background-color: var(--wds-color-black-100, var(--wsr-color-D10, #000624));
  }

  &__loader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
  }
}