//
// Avatar
// --------------------------------------------------

.avatar {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  text-align: center;
  overflow: hidden;
  font-size: $font-size-h3;
  text-transform: uppercase;
  font-family: $font-family-base;

  @include themes(background-color, avatar-bg);
  @include themes(color, color-new-heading);

  @include avatar-size($avatar-md);
  @include border-radius(50%);

  // Elements
  // ---------------------

  &-bg {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;

    @include border-radius(50%);
  }

  // Style variations
  // ---------------------

  &-icon {
    text-align: center;
    vertical-align: middle;
  }

  &-center {
    margin: auto auto;
    display: block;
  }

  &-person {
    background-size: auto $avatar-md - 5;
    background-position: center 5px;
    background-repeat: no-repeat;
    background-color: $color-harmony-bright-grey;

    &-f1 {
      background-image: url("#{$image-path}/persons/female-1.svg");
    }

    &-f2 {
      background-image: url("#{$image-path}/persons/female-2.svg");
    }

    &-m1 {
      background-image: url("#{$image-path}/persons/male-1.svg");
    }

    &-m2 {
      background-image: url("#{$image-path}/persons/male-2.svg");
    }

    &-m3 {
      background-image: url("#{$image-path}/persons/male-3.svg");
    }

    &-m4 {
      background-image: url("#{$image-path}/persons/male-4.svg");
    }

    @each $group-name, $group in $map-harmony-colors-grouped {
      @each $name, $color in map-get($group, colors) {
        &.avatar-#{$name} {
          @each $theme, $map in $themes {
            .#{$theme} & {
              background-color: $color;
            }
          }
        }
      }
    }
  }

  &-with-dot {
    background-color: transparent;
    overflow: visible;

    .avatar-dot {
      $size: $grid-unit-y;

      height: $size;
      width: $size;
      border: 1px solid $color-white;
      background-color: $brand-success;
      border-radius: ceil($size * 0.5);
      position: absolute;
      right: 2px;
      top: 2px;
      z-index: 1;
    }
  }

  &-squared {
    @include border-radius($avatar-border-radius-md);
  }

  // Size variations
  // ---------------------

  &-xs {
    @include avatar-xs();
  }

  &-sm {
    @include avatar-sm();
  }

  &-lg {
    @include avatar-lg();
  }

  &-xl {
    @include avatar-xl();
  }

  &-xxl {
    @include avatar-xxl();
  }

  &-xxxl {
    @include avatar-xxxl();
  }

  // Color variations
  // ---------------------

  @each $group-name, $group in $map-harmony-colors-grouped {
    @each $name, $color in map-get($group, colors) {
      &-#{$name} {
        @each $theme, $map in $themes {
          .#{$theme} & {
            @include avatar-color-variation(
              $color,
              map-get($group, "text-color")
            );
          }
        }
      }
    }
  }

  &-demoted {
    position: relative;

    &:before {
      content: "\f05e";
      font-family: $font-family-awesome;
      font-weight: $font-family-awesome-weight;
      font-size: $avatar-md;
      color: $color-white;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }

    &.avatar-xxxl {
      &:before {
        font-size: $avatar-xxxl;
      }
    }

    &.avatar-xxl {
      &:before {
        font-size: $avatar-xxl;
      }
    }

    &.avatar-xl {
      &:before {
        font-size: $avatar-xl;
      }
    }

    &.avatar-lg {
      &:before {
        font-size: $avatar-lg;
      }
    }

    &.avatar-sm {
      &:before {
        font-size: $avatar-sm;
      }
    }

    &.avatar-xs {
      &:before {
        font-size: $avatar-xs;
      }
    }
  }

  // Stacked Container

  &-stacked {
    display: flex;

    .avatar-wrapper {
      width: ceil($avatar-md * 0.5);
    }

    .avatar {
      border: 2px solid $color-white;
      box-sizing: border-box;
    }

    // Different sizes

    &-xs {
      .avatar-wrapper {
        width: ceil($avatar-xs * 0.5);
      }
    }

    &-sm {
      .avatar-wrapper {
        width: ceil($avatar-sm * 0.5);
      }
    }

    &-lg {
      .avatar-wrapper {
        width: ceil($avatar-lg * 0.5);
      }
    }

    &-xl {
      .avatar-wrapper {
        width: ceil($avatar-xl * 0.5);
      }
    }
  }
}