@import 'variables';
@import 'theme-colors';

.avatar {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: $default-radius;

  &.avatar-circle {
    border-radius: 100%;
  }

  &.avatar-bordered {
    border: 2px solid var(--avatar-border-color);
  }

  &.avatar-shadow {
    box-shadow: var(--avatars-box-shadow);
  }

  @for $i from 20 through 100 {
    @if ($i%5 == 0) {
      &.avatar-size-#{$i} {
        width: #{$i}px;
        height: #{$i}px;
      }
    }
  }
}

.avatar-with-status {
  position: relative;
  display: inline-block;

  .status {
    width: 10px;
    height: 10px;
    position: absolute;
    right: 8%;
    bottom: 5%;
    border-radius: 100%;

    &.success {
      background-color: $success-color;
    }

    &.warning {
      background-color: $warning-color;
    }

    &.info {
      background-color: $info-color;
    }

    &.danger {
      background-color: $danger-color;
    }

    &.secondary {
      background-color: $secondary-color;
    }
  }

  // Maintain status size
  $j: 5px;
  @for $i from 20 through 100 {
    @if ($i%5 == 0) {
      .avatar-size-#{$i} {
        + .status {
          width: $j;
          height: $j;
        }
      }
      $j: $j + 0.5;
    }
  }
}

/* Avatars Group */
.avatar-group {
  display: flex;
  align-items: center;

  .avatar, .avatar-with-status {
    margin-left: -15px;

    &:first-child {
      margin-left: 0;
    }

    &:hover {
      transition: $default-transition-duration;
      transform: translateY(-2px) scale(1.02);
    }
  }
}

// SCSS for RTL Layout
[dir="rtl"] {
  .avatar-group {
    .avatar, .avatar-with-status {
      margin-right: -15px;
      margin-left: 0;

      &:first-child {
        margin-right: 0;
      }
    }
  }
}

