/*!
 * Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */

.c-avatar{
  display:-webkit-inline-box;
  display:inline-flex;
  position:relative;
  -webkit-box-align:center;
          align-items:center;
  -webkit-box-pack:center;
          justify-content:center;
  -webkit-transition:box-shadow .25s ease-in-out,color .1s ease-in-out;
  transition:box-shadow .25s ease-in-out,color .1s ease-in-out;
  margin:0;
  border-radius:50%;
  width:40px;
  height:40px;
  vertical-align:middle;
  box-sizing:border-box;
  color:transparent;
}

.c-avatar:before{
  position:absolute;
  top:0;
  left:0;
  -webkit-transition:box-shadow .25s ease-in-out;
  transition:box-shadow .25s ease-in-out;
  box-shadow:inset 0 0 0 2px;
  content:"";
}

.c-avatar:before,.c-avatar>img,.c-avatar__img{
  border-radius:inherit;
  width:100%;
  height:100%;
}

.c-avatar>img,.c-avatar__img{
  box-sizing:inherit;
  vertical-align:bottom;
  -o-object-fit:cover;
     object-fit:cover;
}

.c-avatar__txt{
  overflow:hidden;
  text-align:center;
  line-height:40px;
  white-space:nowrap;
  font-size:18px;
}

.c-avatar>svg,.c-avatar__svg,.c-avatar__txt{
  color:#fff;
}

.c-avatar>svg,.c-avatar__svg{
  width:1em;
  height:1em;
  font-size:16px;
}

.c-avatar--lg{
  width:48px;
  height:48px;
}

.c-avatar--lg .c-avatar__txt{
  line-height:48px;
  font-size:22px;
}

.c-avatar--lg .c-avatar__svg,.c-avatar--lg>svg{
  font-size:24px;
}

.c-avatar--sm{
  width:32px;
  height:32px;
}

.c-avatar--sm .c-avatar__txt{
  line-height:32px;
  font-size:14px;
}

.c-avatar--sm .c-avatar__svg,.c-avatar--sm>svg{
  font-size:12px;
}

.c-avatar--xs{
  width:24px;
  height:24px;
}

.c-avatar--xs .c-avatar__txt{
  line-height:24px;
  font-size:12px;
}

.c-avatar--xs .c-avatar__svg,.c-avatar--xs>svg{
  font-size:12px;
}

.c-avatar.is-active,.c-avatar.is-available,.c-avatar.is-away{
  color:#fff;
}

.c-avatar.is-active{
  box-shadow:0 0 0 2px #e34f32;
}

.c-avatar.is-away{
  box-shadow:0 0 0 2px #ffb057;
}

.c-avatar.is-available{
  box-shadow:0 0 0 2px #00a656;
}

.c-avatar--system{
  border-radius:4px;
}

.c-avatar--system.c-avatar--lg{
  border-radius:5px;
}

.c-avatar--system.c-avatar--sm{
  border-radius:3px;
}

.c-avatar:after{
  display:inline-block;
  position:absolute;
  right:2px;
  bottom:2px;
  -webkit-transition:all .25s ease-in-out,color 0s;
  transition:all .25s ease-in-out,color 0s;
  opacity:0;
  border:2px solid;
  border-radius:100px;
  background-color:transparent;
  padding:0;
  min-width:0;
  height:0;
  box-sizing:content-box !important;
  text-align:center;
  line-height:1px;
  font-size:0;
  font-weight:600;
  -webkit-text-fill-color:#fff;
  content:"";
}

.c-avatar:after,_:-ms-input-placeholder{
  color:#fff;
}

.c-avatar--lg:after{
  right:3px;
  bottom:3px;
}

.c-avatar--sm:after{
  right:1px;
  bottom:1px;
}

.c-avatar--xs:after{
  right:0;
  bottom:0;
}

.c-avatar.is-active:after,.c-avatar.is-available:after{
  opacity:1;
}

.c-avatar.is-active:after{
  right:-4px;
  bottom:-4px;
  -webkit-animation:zd-avatar--active__badge .375s ease-in-out;
          animation:zd-avatar--active__badge .375s ease-in-out;
  background-color:#e34f32;
  padding:0 5px;
  min-width:10px;
  height:20px;
  line-height:20px;
}

.c-avatar.is-available:after{
  right:-4px;
  bottom:-4px;
  background-color:#00a656;
  min-width:12px;
  height:12px;
  line-height:12px;
}

.c-avatar--xs.is-active:after{
  padding:0;
}

.c-avatar--xs.is-active:after,.c-avatar--xs.is-available:after{
  min-width:8px;
  height:8px;
  line-height:8px;
}

.c-avatar--sm.is-active:after{
  padding:0 3px;
  height:16px;
  line-height:16px;
}

.c-avatar--sm.is-available:after{
  min-width:10px;
  height:10px;
  line-height:10px;
}

.c-avatar--lg.is-active:after{
  padding:0 5px;
}

.c-avatar--lg.is-available:after{
  min-width:14px;
  height:14px;
  line-height:14px;
}

.c-avatar.is-rtl:after{
  right:auto;
  left:2px;
}

.c-avatar--lg.is-rtl:after{
  left:3px;
}

.c-avatar--sm.is-rtl:after{
  left:1px;
}

.c-avatar--xs.is-rtl:after{
  left:0;
}

.c-avatar.is-active.is-rtl:after,.c-avatar.is-available.is-rtl:after{
  left:-4px;
}

.c-avatar:not(.c-avatar--xs).is-active:after{
  max-width:2em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  content:attr(data-badge);
}

@-webkit-keyframes zd-avatar--active__badge{
  0%{
    -webkit-transform:scale(.1);
            transform:scale(.1);
  }
}

@keyframes zd-avatar--active__badge{
  0%{
    -webkit-transform:scale(.1);
            transform:scale(.1);
  }
}