@import "../css/colors"
@import "../css/vars"

:local(.avatar)
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 16px;
  font-family: $sansserif
  line-height: 52px;
  cursor: default;
  font-style: normal;
  color: $white

  img
    width: 100%

:local(.avatar.nav)
  width: 80px;
  height: 80px;
  line-height: 82px;
  font-size: 16px;


:local(.avatar.smallFont)
  font-size: 15px;

:local(.avatar.circle)
  border-radius: 50%
  overflow: hidden

  img
    border-radius: 50%

:local(.avatar.small)
  width: 36px;
  height: 36px;
  font-size: 14px;
  line-height: 38px;

:local(.avatar.large)
  width: 77px;
  height: 77px;
  font-size: 21px;
  line-height: 76px;


:local(.avatar.small.smallFont)
  font-size: 10px;

:local(.avatar.xsmall)
  width: 32px;
  height: 32px;
  font-size: 12px;
  line-height: 33px;

:local(.avatar.small.smallFont)
  font-size: 8px;

// If this editable behavior is needed in other places as well, consider moving it to a separate .styl file.
:local(.editable)
  cursor: pointer

:local(.editable::before)
  content: ''
  position: absolute
  top: 0
  bottom: 0
  left: 0
  right: 0
  background-color: rgba(0,0,0,.5)

:local(.editable:hover::before)
  background-color: rgba(0,0,0,.7)

:local(.editable::after)
  content: $doka-icon-edit
  font-family: $iconfont
  position: absolute
  top: 0
  left: 0
  right: 0
  color: rgba(255,255,255,.7)
  font-size: 40px
  line-height: 48px

:local(.large.editable::after)
  font-size: 50px
  line-height: 72px

:local(.small.editable::after)
  font-size: 30px
  line-height: 35px

:local(.editable:hover::after)
  transform: rotate(-15deg)