.conversation-list-item {
  @include outer-container;
  border-top: 1px solid $gray--lightest;
  padding: .7em 1em;
  position: relative;

  @include media($sm-screen) {
    padding: .7em 0;
  }

  display: block;

  &:first-child {
    border-top: none;
  }

  &:hover {
    background: $blue--background;

    .conversation-list-item__close-link,
    .conversation-list-item__reopen-link {
      display: block;
    }
  }

  &:last-child {
    border-bottom: 1px solid $gray--lightest;
  }

  &.active {
    background: $blue;
    border-bottom-color: $blue;
    border-top-color: $blue;

    .conversation-list-item__name,
    .conversation-list-item__username,
    .conversation-list-item__timestamp,
    .conversation-list-item__close-link,
    .conversation-list-item__reopen-link {
      color: white;
    }
  }

  @include span-columns(12);

  .icon {
    height: 35px;
    width: 35px;
  }

  &__avatar {
    float: left;
  }

  &__info {
    padding: 0 0 0 45px;

    strong {
      font-weight: 700;
    }
  }

  &__name {
    color: $text--dark;
    font-size: $body-font-size-normal;
    margin: 0;
  }

  &__username {
    color: $text--light;
    font-size: $body-font-size-small;
    margin: 0 0 5px 0;
  }

  &__timestamp {
    color: $text--lightest;
    font-size: $body-font-size-tiny;
    margin: 0;
  }

  &__close-link, &__reopen-link {
    display: none;
    font-size: $body-font-size-normal;
    padding: 0.5em;
    position: absolute;
    bottom: 0; right: 0;

    &:hover {
      span {
        text-decoration: underline;
      }
    }
  }
}
