/*
 * Enjin "element" styles shared by boxes and later pages: small title bars, progress bars,
 * avatars, usernames and the tiny "microtag" badge.
 */

/* Small title bar ("Plan Details", "Online users (0)") */
.element_smalltitle {
  position: relative;
  isolation: isolate;
  height: 30px;
  line-height: 29px;
  color: #fff;
}

.element_smalltitle::before,
.element_smalltitle::after {
  content: '';
  position: absolute;
  top: 0;
  z-index: -1;
  width: 50.004%;
  height: 100%;
  background-image: url('/img/theme/title-bar.png');
}

.element_smalltitle::before {
  left: 0;
  background-position: left top;
}

.element_smalltitle::after {
  right: 0;
  background-position: right top;
}

.element_smalltitle .title {
  position: relative;
  margin-right: 9px;
  margin-left: 9px;
}

.element_smalltitle .mask {
  overflow: hidden;
  white-space: nowrap;
}

/* Progress bar: track halves under the fill halves, label on top */
.element_progressbar {
  position: relative;
  isolation: isolate;
  height: 29px;
  border: 1px solid transparent;
  line-height: 29px;
}

.element_progressbar::before,
.element_progressbar::after,
.element_progressbar .current::before,
.element_progressbar .current::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50.004%;
  height: 100%;
}

.element_progressbar::before,
.element_progressbar::after {
  z-index: -1;
  background-image: url('/img/theme/progress-track.png');
}

.element_progressbar::before,
.element_progressbar .current::before {
  left: 0;
  background-position: left top;
}

.element_progressbar::after,
.element_progressbar .current::after {
  right: 0;
  background-position: right top;
}

.element_progressbar .current {
  position: relative;
  height: 100%;
}

.element_progressbar .current::before,
.element_progressbar .current::after {
  background-image: url('/img/theme/progress-fill.png');
}

.element_progressbar .clabel {
  position: absolute;
  top: 0;
  left: 9px;
  height: 100%;
  font-size: 14px;
}

/* "PXLPLZ Regular" was never archived, so the badge falls back to the browser's default font,
   exactly as in the 2018 capture. Don't add a fallback list: it would change the pixels. */
span.icon_microtag {
  display: inline-block;
  margin: -1px 2px 0 1px;
  padding: 1px 1px 1px 2px;
  border-radius: 2px;
  font-family: 'PXLPLZ Regular';
  font-size: 7.6px;
  font-weight: normal;
  line-height: 7px;
  vertical-align: middle;
  cursor: default;
  -webkit-font-smoothing: none;
}

.element_avatar {
  display: inline-block;
  line-height: 0;
}

.element_avatar.simple {
  padding: 1px;
  border: 1px solid #47423c;
  background-color: #000;
}

.element_avatar.simple:hover {
  border-color: #e9bd7f;
}

.element_avatar img {
  position: relative;
  display: block;
}

.element_avatar.small img {
  width: 23px;
  height: 23px;
}

.element_username {
  text-decoration: none;
  color: #e9bd7f;
}

.element_username:hover,
.element_username:focus {
  color: #e9bd7f;
}

/* Phones (below 768px; DECISIONS 84): a small title too long for its bar ends in "…" instead of
   being cut mid-letter, as the module titles do. */
@media (max-width: 767.98px) {
  .element_smalltitle .mask {
    text-overflow: ellipsis;
  }
}