/*-------------- Posts (Thread View) Layout -------------- */
.thread-controls-wrap {
  background-color: $sub-header-color;
  margin: -$header-bottom-margin -100% $header-bottom-margin;
  padding: $header-bottom-margin 100% 0;
  .inverted-button {
    color: $secondary-font-color;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    text-align: center;
    &:hover {
      background-color: $secondary-font-color-light;
      border-color: $secondary-font-color;
      color: $secondary-font-color-dark;
    }
  }
  button, .button {
    float: right;
    color: $button-text-color;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    border: 1px solid transparent;
    line-height: unset;
    text-align: center;
  }
  .controls.two-thirds-column {
    text-align: right;
    .control:last-child {
      margin-right: 0.5rem;
    }
  }
  a {
    color: $secondary-font-color;
  }
}

.thread-data {
  @include pad(0 0 1rem 0);
  clear: both;
  .post-block {
    @include row;
    @include clearfix;
    @include pad(1.25rem 0.5rem);
    @include transition(background-color 250ms ease-in);
    position: relative;
    min-height: 11rem;
    border-bottom: 1px solid $border-color;
    &:first-child {
      border-top: 1px solid $border-color;
    }
    &.highlighted {
      background-color: $color-highlighted;
    }
    &.editing {
      background-color: RGBA(235, 200, 120, 0.5);
    }
    &.hidden {
      background-color: $sub-header-color;
    }
    &.deleted {
      min-height: 0;
      padding: 0.5rem 0.5rem;
      color: $secondary-font-color;
      text-align: center;
    }
    .post-user {
      width: 5rem;
      padding-right: 1.25rem;
      display: inline-block;
      position: absolute;
      a {
        display: block;
      }
      .user-avatar {
        @include bg-cover;
        background: no-repeat center center;
        height: 3.75rem;
        width: 3.75rem;
        img {
          @include border-radius(100px);
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .user-role, .user-activity, .original-poster {
        padding-top: 0.5rem;
        line-height: 0.625rem;
        color: $secondary-font-color;
        font-size: 0.625em;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
        text-transform: uppercase;
        text-overflow: ellipsis;
        width: 100%;
      }
      .original-poster {
        color: #f04124;
      }
    }
    .post-content {
      display: block;
      margin-left: 5rem;
      .bbcode-column {
        img.image-loader.loaded {
          max-width: 350px;
          margin: 5px auto;
          display: inline;
        }
      }
      .post-title {
        color: $secondary-font-color;
        margin-bottom: 0.5rem;
        width: 100%;
        .online {
          float: left;
          margin-right: 0.5rem;
        }
        a.username {
          float: left;
          margin-right: 0.75rem;
          color: $base-font-color;
          font-weight: 900;
          &:hover {
            color: $color-primary;
          }
        }
        .timestamp, .display-name {
          display: inline-block;
          color: $secondary-font-color;
          line-height: 1.3rem;
          font-size: 0.8125rem;
          font-weight: 400;
          float: left;
        }
        .display-name {
          color: $secondary-font-color-dark;
        }
        .post-action {
          @include list-clean;
          float: right;
          line-height: 1.3rem;
          color: $secondary-font-color;
          li {
            @include list-flat;
            a {
              color: $secondary-font-color-light;
              &:hover {
                color: $color-primary;
              }
            }
            .clicked {
              color: $color-primary;
            }
          }
          &:hover a {
            color: $secondary-font-color;
          }
        }
        &:hover .post-action a {
          color: $secondary-font-color;
        }
        .clear {
          @include clearfix;
        }
      }
      .post-sig-border {
        clear: both;
        width: 250px;
        border-top: 1px solid $border-color;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
      }
      .post-signature {
        @include truncate-ellipsis;
        clear: both;
        color: $secondary-font-color;
        font-size: 13px;
        max-height: 50px;
        word-wrap: break-word;
        white-space: pre-wrap;
        a {
          color: $secondary-font-color;
          &:hover {
            color: $color-primary;
          }
        }
      }
    }
  }
}

#post-spacer {
  min-height: 175px;
}

#post-tools-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 3rem;
  z-index: 900;
  border-top: 1px solid $border-color;
  background-color: rgba($base-background-color, 0.9);
  .tool-wrap {
    max-width: $max-width;
    margin: 0 auto;
    .tool-container {
      line-height: 3rem;
      .button {
        margin: 0;
        padding: 0.35rem 1rem;
      }
      .left-col {
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .right-col {
        text-align: right;
      }
    }
  }
}

#post-tools-fixed .tool-wrap .tool-container, .thread-controls-wrap .two-thirds-column {
  .control {
    display: inline-block;
    text-align: center;
    line-height: 2.25rem;
    margin-right: 1.5rem;
    a {
      color: $secondary-font-color;
      &.clicked {
        color: $color-primary;
      }
    }
  }
}

// Posts Layout Mobile

@include media($desktop-small) {
  .thread-controls-wrap {
    .controls.two-thirds-column {
      text-align: center;
      @include span-columns(6);
      .control:last-child {
        margin-right: 1rem;
      }
    }
    .controls.one-third-column {
      @include span-columns(6);
      .button {
        @include span-columns(12);
      }
    }
  }
}

@include media($mobile-portrait) {
  .thread-data .post-block .post-content .display-name {
    float: none;
    width: 100%;
  }
  .thread-controls-wrap {
    .controls.one-third-column {
      @include span-columns(8);
    }
    .controls.two-thirds-column {
      text-align: center;
      @include span-columns(8);
      .control:last-child {
        margin-right: 0;
      }
    }
  }
  #post-tools-fixed .tool-wrap {
    .right-col .button {
      width: 100%;
      .hide-post {
        display: none;
      }
    }
  }
}

@include media($mobile) {
  .thread-data .post-block .post-user {
    display: none;
  }
  .thread-data .post-block .post-content {
    margin-left: 0;
  }
  .thread-data .post-block .post-content .post-title {
    position: relative;
  }
  .thread-data .post-block .post-content .timestamp {
    float: none;
    width: 100%;
  }
  .thread-data .post-block .post-content .post-action {
    position: absolute;
    top: 0;
    right: 0;
  }
  #post-tools-fixed {
    height: 2.5rem;
    .tool-wrap .tool-container {
      line-height: 2.5rem;
      padding: 0 $base-grid-padding;
      .left-col {
        @include span-columns(5);
      }
      .right-col {
        @include span-columns(3);
        .button {
          padding: 0.15rem 0.76rem;
          display: inline-block;
        }
      }
    }
  }
}
