// // avatar.scss // Dashkit component //

// General

.avatar {

position: relative;
display: inline-block;
width: $avatar-size-base;
height: $avatar-size-base;
font-size: $avatar-size-base / 3;
cursor: pointer;
&.avatar-xxl.avatar-dashboard-choice {
  width: 8rem;
  height: 4rem;
  .active {
    border: 2px solid $black-states !important;
  }
  :hover {
    border: 1px solid lighten($black-states, 50%);
  }
}
// Loads mask images so they don't lag on hover
&:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  background-image: url(image-path('desk_front/avatar-status.svg')),
    url(image-path('desk_front/avatar-group.svg')),
    url(image-path('desk_front/avatar-group-hover.svg')),
    url(image-path('desk_front/avatar-group-hover-last.svg'));
}

}

.avatar-img {

width: 100%;
height: 100%;
object-fit: cover;

}

.avatar-title {

display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
line-height: 0;
background-color: $avatar-title-bg;
color: $avatar-title-color;

}

// Status

.avatar-online, .avatar-not-active, .avatar-offline, .card-notselected, .card-selected {

&::before {
  content: '';
  position: absolute;
  bottom: 5%;
  right: 5%;
  width: 20%;
  height: 20%;
  border-radius: 50%;
}
.avatar-img {
  mask-image: url(image-path('desk_front/avatar-status.svg'));
  mask-size: 100% 100%;
}

}

.avatar-online::before, .card-selected::before {

background-color: $success;

}

.avatar-offline::before {

background-color: $gray-500;

}

.avatar-not-active::before {

background-color: $primary;

}

.card-notselected::before {

background-color: $warning;

}

// Sizing

.avatar-xs {

width: $avatar-size-xs;
height: $avatar-size-xs;
font-size: $avatar-size-xs / 3;

}

.avatar-sm {

width: $avatar-size-sm;
height: $avatar-size-sm;
font-size: $avatar-size-sm / 3;

}

.avatar-lg {

width: $avatar-size-lg;
height: $avatar-size-lg;
font-size: $avatar-size-lg / 3;

}

.avatar-xl {

width: $avatar-size-xl;
height: $avatar-size-xl;
font-size: $avatar-size-xl / 3;

}

.avatar-xxl {

width: $avatar-size-xl;
height: $avatar-size-xl;
font-size: $avatar-size-xl / 3;
@include media-breakpoint-up(md) {
  width: $avatar-size-xxl;
  height: $avatar-size-xxl;
  font-size: $avatar-size-xxl / 3;
}

}

// Ratio

.avatar.avatar-4by3 {

width: $avatar-size-base * 4 / 3;

}

.avatar-xs.avatar-4by3 {

width: $avatar-size-xs * 4 / 3;

}

.avatar-sm.avatar-4by3 {

width: $avatar-size-sm * 4 / 3;

}

.avatar-lg.avatar-4by3 {

width: $avatar-size-lg * 4 / 3;

}

.avatar-xl.avatar-4by3 {

width: $avatar-size-xl * 4 / 3;

}

.avatar-xxl.avatar-4by3 {

width: $avatar-size-xxl * 4 / 3;

}

// Group

.avatar-group {

display: inline-flex;
// Shift every next avatar left
.avatar+.avatar {
  margin-left: -$avatar-size-base / 4;
}
.avatar-xs+.avatar-xs {
  margin-left: -$avatar-size-xs / 4;
}
.avatar-sm+.avatar-sm {
  margin-left: -$avatar-size-sm / 4;
}
.avatar-lg+.avatar-lg {
  margin-left: -$avatar-size-lg / 4;
}
.avatar-xl+.avatar-xl {
  margin-left: -$avatar-size-xl / 4;
}
.avatar-xxl+.avatar-xxl {
  margin-left: -$avatar-size-xxl / 4;
}
// Add some spacing between avatars
.avatar:not(:last-child) {
  mask-image: url(image-path('desk_front/avatar-group.svg'));
  mask-size: 100% 100%;
}
// Bring an avatar to front on hover
.avatar:hover {
  mask-image: none;
  z-index: 1;
  +.avatar {
    mask-image: url(image-path('desk_front/avatar-group-hover.svg'));
    mask-size: 100% 100%;
    &:last-child {
      mask-image: url(image-path('desk_front/avatar-group-hover-last.svg'));
    }
  }
}

}