@import "../../_style/app.theme";

$avatar-primary-color: $secondary-bg-color;
$avatar-secondary-color: rgb(0, 212, 166);
$avatar-font-color: #fff;

@mixin default-user-avatar($size, $shadow: 'default') {
    width: $size;
    height: $size;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    background: -webkit-linear-gradient(left top, $avatar-primary-color, $avatar-secondary-color);
    background: -o-linear-gradient(bottom right, $avatar-primary-color, $avatar-secondary-color);
    background: -moz-linear-gradient(bottom right, $avatar-primary-color, $avatar-secondary-color);
    background: linear-gradient(to bottom right, $avatar-primary-color, $avatar-secondary-color);
    @if $shadow == 'default' {
      box-shadow: 2px 2px 7px 1px #333;
    }
    margin: 10% 0 10% 5%;

    .initials {
      position: relative;
      top: $size*0.25;
      font-size: $size*0.5;
      line-height: $size*0.5;
      color: $avatar-font-color;
      font-weight: bold;
      text-transform: uppercase;
    }
}

.avatar-circle      { @include default-user-avatar(100px); }
.avatar-circle-sm   { @include default-user-avatar(50px); }
.avatar-circle-lg   { @include default-user-avatar(250px); }
.avatar-circle-header   { @include default-user-avatar(35px, 'noshadow'); }

.card-avatar, .card-avatar-content {
  border-radius: 50%;
}

.profile-img{
  left: -50px;
  right: 0;
  margin: auto;
  max-width: 35px;
  position: absolute;
  top: 25px;
}
