@import "vars";

.app-forum {
  //Content
  .page-content {
    .table {
      table-layout: fixed;

      .content {
        position: relative;

        > * {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .flags {
        display: inline-block;
      }

      a {
         text-decoration: none;
      }

      .title {
        line-height: 25px;

        > * {
          margin-right: 10px;
        }

        .locked {
          color: $gray-400;
        }
      }

      .sticky-top {
        font-size: 90%;
        .icon {
          margin-right: 4px;
        }
      }

      .metas {
        color: $gray-400;

        > span {
          position: relative;
          margin-right: 10px;
          + span {
            &:before {
              content: "";
              position: absolute;
              width: 2px;
              height: 2px;
              top: 50%;
              left: -8px;
              background-color: #a7b0b8;
            }
          }
        }
      }

      .forum-posts {
        text-align: right;
      }
    }
  }

  //slidepanel
  .slidePanel {
    &-header {
      background-color: $color-light-green-600;
      @include clearfix();
    }

    .actions-top {
      position: absolute;
      top: 30px;
      right: 20px;
    }

    .actions-bottom {
      position: absolute;
      bottom: 30px;
      right: 20px;
    }

    .avatar, .name {
      margin-right: 6px;
    }

    .time {
      color: $gray-400;
    }

    .forum {
      &-header, &-content, &-metas {
        margin-bottom: 20px;
        @include clearfix();
      }

      &-content {
        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .tags {
      margin-bottom: 15px;
    }
  }

  @include media-breakpoint-down(lg) {
    .page-content {
      .table {
        .content {
          padding-right: 100px;
        }

        .flags {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
  }

  @include media-breakpoint-down(xs) {
    .nav-tabs-line {
      > li > a {
        padding: 10px;
      }
    }

    .responsive-hide {
      display: none !important;
    }

    .page-content {
      .table {
        .content {
          padding-right: 0;
        }
      }
    }
  }
}