/**
 * LATEST
 *
 * @author      tedem <tedemdev@gmail.com>
 * @copyright   2020 [@author]
 */

:root {
  --bg-color: #fff;
  --latest-radius: 0.5rem;
}

.icon--bi {
  height: auto !important;
  vertical-align: middle !important;
}

.latest {
  margin-bottom: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  background-color: var(--bg-color);
  border-radius: var(--latest-radius);
}

/* __head */
.latest__head {
  display: flex;
  align-items: stretch;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 3rem;
  color: #fff;
  background-color: #7d57c2;
  border-top-left-radius: var(--latest-radius);
  border-top-right-radius: var(--latest-radius);
}

/* __title */
.latest__title {
  display: flex;
  align-items: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.latest__title-heading {
  display: flex;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: normal;
}

.latest__title-icon {
  margin-right: 0.5rem;
  opacity: 0.96;
}

/* __nav */
.latest__nav {
  display: flex;
}

.latest__nav:not(.latest__nav--vertical) {
  align-items: center;
}

.latest__nav--vertical {
  flex-direction: column;
}

.latest__head .latest__nav--latest {
  margin-left: 2rem;
}

.latest__head .latest__nav--tools {
  margin-left: auto;
}

.latest__main-item--head .latest__nav {
  height: 2.5rem;
}

.latest__main-item--head .latest__nav--hot {
  margin-left: auto;
}

.latest__nav-item {
  display: flex;
  align-items: center;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

a.latest__nav-item {
  text-decoration: none !important;
}

.latest__head .latest__nav-item {
  height: 2rem;
  min-width: 3rem;
  font-size: 0.875rem;
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.24);
  transition: background-color 0.2s ease-in-out;
  border-radius: 1rem;
}

.latest__head .latest__nav-item:hover,
.latest__head .latest__nav-item:focus {
  background-color: rgba(0, 0, 0, 0.32);
}

.latest__head .latest__nav-item.is-active {
  color: #212121 !important;
  background-color: #d1c4e9;
}

.latest__head .latest__nav-item:not(:first-child) {
  margin-left: 0.5rem;
}

.latest__main-item--head .latest__nav-item {
  height: 1.5rem;
  font-size: 0.875rem;
  color: #212121 !important;
}

.latest__main-item--head .latest__nav-item:not(:first-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.latest__main-item--head .latest__nav-item.is-active {
  height: 2.5rem;
  background-color: #fff;
}

.latest__main-item--head .latest__nav-item.is-active:not(:first-child) {
  border-left: 0;
}

.latest__main-item--head
.latest__nav-item.is-active:not(:last-child) + .latest__nav-item {
  border-left: 0;
}

.latest__main-item--head .latest__nav--toggle .latest__nav-item.is-active {
  height: 2.5rem;
  background-color: #d1c4e9;
}

.latest__main-item--toggle .latest__nav-item {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  color: #212121 !important;
  border-left: .125rem solid transparent;
}

.latest__main-item--toggle .latest__nav-item.is-active {
  border-left-color: #7d57c2;
}

.latest__nav-icon,
.latest__nav-label {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.latest__nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.latest__main-item--head .latest__nav-label {
  max-width: 10rem;
}

.latest__main-item--head .latest__nav--hot .latest__nav-label {
  display: none;
}

/* __main */
.latest__main-item--head {
  display: flex;
  align-items: center;
  height: 2.5rem;
  background-color: #ede7f6;
}

.latest__main-item--toggle {
  /* FIX jQuery toggle() animatin */
  width: 100% !important;
  background-color: #d1c4e9;
}

.latest__main-item--main {
  padding: 1rem;
}

/* __list */
.latest__list {
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-size: 0.875rem;
}

/* __list-item */
.latest__list-item {
  padding: 0.5rem 1rem;
}

.latest__list-item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.latest__list-item--w\/column {
  display: grid;
  grid-template-columns: 1.25rem 8rem auto 10rem 10rem 9rem 4rem 7rem;
  grid-gap: 1rem;
  align-items: center;
}

/* __list-column */
.latest__list-column {
  display: flex;
  align-items: center;
}

.latest__list-column--kind,
.latest__list-column--replies,
.latest__list-column--views {
  justify-content: center;
}

.latest__list-column--main {
  overflow: hidden;
}

/* __list-label */
.latest__list-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none !important;
  text-overflow: ellipsis;
  letter-spacing: .0142857143em;
  white-space: nowrap;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.64);
}

.latest__list-label--short {
  display: none;
}

/* __alert */
.latest__alert {
  font-size: 0.875rem;
}

/* __link */
.latest__link--user {
  margin-left: .5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.latest__link--subject,
.latest__link--forum {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* __text */
.latest__text--time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* __avatar */
.latest__avatar {
  display: block;
  height: calc(1.25rem + 2px);
  width: calc(1.25rem + 2px);
  background-color: #eceff1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid white;
  border-radius: 50%;
}

/* __post-kind */
.latest__kind--thread {
  color: #0d47a1;
}

.latest__kind--post {
  color: #1b5e20;
}

/* __post-icon|prefix */
.latest__post-icon,
.latest__post-prefix {
  margin-right: .5rem;
}

/* __last-poster */
.latest__last-poster {
  display: flex;
  flex-flow: row-reverse wrap;
  align-items: center;
  max-width: 100%;
}

.latest__last-poster-item {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.latest__last-poster-item:nth-child(1) {
  z-index: 3;
  flex: 1 1 calc(100% - 777px);
}

.latest__last-poster-item:nth-child(2) {
  z-index: 2;
}

.latest__last-poster-item:nth-child(3) {
  z-index: 1;
}

.latest__last-poster-item:hover {
  z-index: 3;
}

.latest__last-poster-item:not(:last-child) {
  margin-left: -9px;
}

.latest__last-poster-item:not(:first-child) .latest__link--user {
  display: none;
}

@media (max-width: 1439.98px) {
  .latest__list-item--w\/column {
    grid-template-columns: 1.25rem 8rem auto 10rem 9rem 4rem 4rem;
  }

  .latest__list-column--forum {
    display: none;
  }
}

@media (min-width: 1024px) {
  .latest__main-item--head .latest__nav--toggle,
  .latest__main-item--toggle {
    display: none;
  }
}

@media (max-width: 1023.98px) {
  .latest__head .latest__nav--latest {
    margin-left: auto;
  }

  .latest__head .latest__nav--tools {
    display: none;
  }

  .latest__main-item--head .latest__nav--cat {
    display: none;
  }

  .latest__list-column--author,
  .latest__list-column--latest {
    justify-content: center;
  }

  .latest__list-label--main {
    display: none;
  }

  .latest__list-label--short {
    display: block;
  }

  .latest__list-item--w\/column {
    grid-template-columns: 1.25rem calc(1.25rem + 2px) auto 3rem 9rem 4rem 4rem;
  }

  .latest__link--user {
    display: none;
  }
}

@media (max-width: 839.98px) {
  .latest__head .latest__nav--latest .latest__nav-label {
    display: none;
  }

  .latest__list-item--w\/column {
    grid-template-columns: calc(1.25rem + 2px) auto 3rem 9rem;
  }

  .latest__list-column--kind {
    display: none;
  }

  .latest__list-column--replies,
  .latest__list-column--views {
    display: none;
  }
}

@media (max-width: 599.98px) {
  .latest__list-item--w\/column {
    grid-template-columns: calc(1.25rem + 2px) auto calc(1.25rem + 2px);
  }

  .latest__list-column--time {
    display: none;
  }

  .latest__last-poster-item:not(:first-child) {
    display: none;
  }

  .latest__last-poster-item:not(:last-child) {
    margin-left: 0;
  }
}