/*
 * Copyright (c) 2015-2016 Kaj Magnus Lindberg
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

$tinyAvatarSize = 28px;   // [7UKWQ1] (2EPZKG0)
$smallAvatarSize = 50px;  // [7UKWQ1]

.edAvtr // avatar
  &:hover,
  &:active,
  &:focus
    text-decoration: none !important;
  &:hover:not(.esAv-IgnoreClicks)
    opacity: 0.6;
    cursor: pointer;
  img
    border-radius: 50%;
    width: $smallAvatarSize;
    height: $smallAvatarSize;
    max-width: none; // otherwise usually 100%, might make it too narrow.
    max-height: none;
    padding: 0 !important;

  float: left;
  position: absolute;
  left: -1px; // makes the avatar circle seem more aligned with the metabar (5JUWKQS0)
  width: $smallAvatarSize;
  height: $smallAvatarSize;

.s_InIframe .edAvtr
  left: 0; // not -1, because would then be cropped by the iframe (5JUWKQS0)


.esAvtr-ltr  // avatar with a letter, no image uploaded
  padding: 0 !important;
  font-size: 28px;
  width: $smallAvatarSize;
  height: $smallAvatarSize;
  line-height: $smallAvatarSize;
  color: white !important;
  border-radius: 50%;
  font-style: normal;
  text-align: center;
  noUserSelect();

.edAvtr-manyLetters
  letter-spacing: 0.1ex;
  font-size: 21px;

.esAvtr-gst
  background: hsl(0, 0%, 92%);
  color: hsl(0, 0%, 57%) !important;
  font-weight: normal;

// w-avtr = "with avatar"
.ed-w-avtr > .dw-p,
.ed-w-avtr > .dw-single-and-multireplies
  margin-left: $avatarSpace;


.esAvtr-sys
  background-color: hsl(0, 0%, 51%);

.dw-p-hd .esAvtr-tny
  top: -6px;
  left: -2px;

.esAvtr-tny
  position: relative;
  width: $tinyAvatarSize;
  height: $tinyAvatarSize;
  line-height: 30px;  // looks better than $tinyAvatarSize = 28px  (2EPZKG0)
  margin-right: 8px;
  &.esAvtr-ltr
    font-size: 16px;
    font-weight: bold; // small low contrast font, otherwise hard to read
  &.edAvtr-manyLetters
    width: 31px; // now it's an eclipse, why not
    font-size: 14px;
  &.esAvtr-gst
    color: hsl(0, 0%, 50%); // -tny = smaller font -> increase contrast

  img
    width: $tinyAvatarSize;
    height: $tinyAvatarSize;
    cursor: pointer;

.dw-topic-list
  .esAvtr-gst // dupl code 3 lines:
    background: hsl(0, 0%, 92%);
    color: hsl(0, 0%, 57%);
    font-weight: normal;
  .esAvtr-tny
    margin: 1px 0 0 4px;
    vertical-align: middle;
    // Oh well
    display: inline-block;
    float: none;


.esAvtrName
  white-space: nowrap;
  .esAvtr
    float: none;
    display: inline-block;

.esAvtrName_username,
.esAvtrName_fullName
  vertical-align: middle;

.esAvtr
  .n_Me
    font-size: 13px;
    color: black;
    line-height: 14px;
    display: block;

// vim: fdm=marker et ts=2 sw=2 tw=0 list
