/* styles that apply when viewing a topic/topic */

@import "foundation/variables";
@import "foundation/mixins";

// Topic title
// --------------------------------------------------

#topic-title,
.extra-info-wrapper {
  h1 {
    display: inline-block;
    max-width: 850px;
    margin-top: 5px;
    font-size: 22px;
    line-height: 28px;
  }
  @include medium-width {
    h1 {
      max-width: 735px;
    }
  }
  @include small-width {
    h1 {
      max-width: 690px;
    }
  }
  .star {
    height: 40px;
    font-size: 20px !important;
    line-height: 40px !important;
    vertical-align: top;
  }
  .topic-statuses {
    &:empty {
      display: none;
    }
  }
  .topic-status {
    margin: 0 4px 0 0;
    padding: 0;
    &:last-of-type {
      margin-right: 0;
    }
    > .icon {
      display: inline-block;
      margin-top: 8px;
      vertical-align: top;
    }
  }
  .badge-category {
    margin-top: 5px;
    vertical-align: top;
  }
  .edit-topic {
    i {
      font-size: 12px;
      line-height: 28px;
      vertical-align: top;
    }
    .discourse-no-touch & {
      visibility: hidden;
    }
  }
  @include hover {
    .edit-topic {
      visibility: visible;
    }
  }
  #edit-title,
  .chzn-container {
    margin: 6px 0;
  }
  button {
    margin: 8px 0;
    vertical-align: top;
  }
  .btn-primary {
    margin-left: 5px;
  }
}

// Page header

#topic-title {
  margin-bottom: 14px;
}

// App header

.extra-info-wrapper {
  display: none;
  float: left;
  margin-left: 10px;
  &.show-extra-info {
    display: block;
  }
}

#multi-select-options {
  button {
    margin-bottom: 5px;
    width: 150px;
  }
}

#topic-filter {
  background-color: $highlight_light;
  padding: 8px;
  bottom: 0;
  position: fixed;
  width: 100%;
  font-size: 15px;
}

#main {
  // used in topic onebox
  .topic-info {
    margin-top: 20px;
    .info-line {
      float: left;
      color: lighten($black, 40%);
    }
    .posters {
      margin-right: 10px;
      float: right;
    }
  }
  section.divider {
    background-color: $dark_gray;
    height: 3px;
    margin: 10px 0 20px 0;
    opacity: 1;
    @include transition(opacity 3s);
    &.fade {
      opacity: 0;
    }
  }
  a.mention, .ac-wrap .item span {
    @include border-radius-all(5px);
    @include linear-gradient(lighten($light_gray, 10%), $light_gray);
    border: 1px solid $gray;
    color: $darkish_gray;
    padding: 1px 2px;
  }
  a.mention {
    cursor: pointer;
    .clicks {
      display:none;
    }
  }
  span.spoiler {
    background-color: $black;
    color: $black;
    @include hover {
      color: $white;
    }
  }

  // When we are quoting something
  aside.quote {
    margin-top: 14px;
    border: 1px solid #eee;
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
    @include border-radius-all(4px);
    &:nth-of-type(1) {
      margin: 0;
    }
    .title {
      padding: 8px;
      background-color: #f1f1f1;
      a,
      .avatar {
        margin-right: 4px;
        vertical-align: top;
      }
    }
    .quote-controls {
      float: right;
      color: #323232;
      @include fades-in(0.25s);
      a {
        margin: 0;
      }
      .back:before,
      .quote-other-topic:before {
        display: inline-block;
        margin-left: 8px;
        color: #323232;
        font-family: "FontAwesome";
      }
      .back:before {
        content: "\f062";
      }
      .quote-other-topic:before {
        content: "\f061";
      }
    }
    .discourse-touch & {
      .quote-controls {
        @include visible;
        i,
        a {
          opacity: 0.5;
        }
      }
    }
    @include hover {
      .quote-controls {
        @include visible;
      }
    }
    blockquote {
      margin: 0;
      border: 0;
      padding: 8px;
      color: #333;
      background-color: $white;
      *:last-child {
        margin-bottom: 0;
      }
      .highlighted {
        display: inline;
        padding: 3px 5px 3px 8px;
        background-color: $highlight;
      }
    }
  }
  .quote-button {
    background-color: $blue;
    z-index: 500;
    color: $white;
    font-weight: bold;
    font-size: 14px;
    padding: 2px 9px 5px 9px;
    text-decoration: none;
    border: 5px solid rgba(0, 0, 0, 0.75);
    top: 10px;
    left: 10px;
    z-index: 99999;
    position: absolute;
    display: none;
    @include border-radius-all(4px);
    @include hover {
      cursor: pointer;
      background-color: lighten($blue, 10%);
    }
    &.visible {
      display: block;
    }
  }
  #topic-bottom {
    height: 20px;
  }


  #suggested-topics {
    margin: 40px 0 40px 20px;
    width: 1110px;
    @include medium-width { width: 970px; }
    @include small-width { width: 870px; }
    h3 {
      font-size: 15px;
      margin-left: 6px;
      color: darken($darkish_gray, 20%);
      margin-bottom: 10px;
    }
  }

  #topic-footer-buttons {
    margin: 20px 0 0 103px;

    width: 1027px;
    @include medium-width { width: 887px; }
    @include small-width { width: 787px; }

    .btn-group {
      margin-top: 20px;
      p {
        line-height: 32px;
        float: left;
        margin: 0 10px;
        color: #7f7f7f;
      }
      h4.title {
        line-height: 32px;
        font-weight: normal;
        float: left;
        display: inline;
        margin-right: 10px;
      }
    }
    ul.dropdown-menu {
      top: auto;
      bottom: 115%;
      left: 0px;
    }
    ul li a {
      span {
        display: block;
        font-size: 11px;
      }
      span.title {
        font-weight: bold;
        font-size: 14px;
      }
    }
    button {
      margin-right: 5px;
      span.caret {
        margin-left: 10px;
      }
      i {
        margin-right: 5px;
      }
    }
  }
}

kbd {
  white-space: nowrap;
  border-style: solid;
  border-color: #cccccc #aaaaaa #888888 #bbbbbb;
  padding: 0px 6px;
  @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.2) 0 0 0 1px white inset);
  border-radius: 4px;
  background-color: #fafafa;
  border-width: 1px 1px 2px;
  color: #444444;
  font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  display: inline-block;
  margin-bottom: 5px;
}

.post-text img {
  max-width: 640px;
}

#topic-progress-wrapper {
  position: fixed;
  width: 0;
  bottom: 0px;
  right: 50%;
  z-index: 1;
  outline: 1px solid transparent;
}

.posts .spinner {
  width: 100px;
  margin: 0 auto 30px 375px;
}

.posts-wrapper {
  position: relative;
}

#topic-progress-wrapper.docked {
  #topic-progress {
    border-bottom: 1px solid $gray;
  }
  position: absolute;
}

#topic-progress {
  position: relative;
  left: 275px;
  &.hidden {
    display: none;
  }
  border-left: 1px solid $gray;
  border-right: 1px solid $gray;
  border-top: 1px solid $gray;
  background-color: $white;
  color: $darkish_gray;
  width: 130px;
  height: 34px;
  .nums {
    position: relative;
    top: 9px;
    width: 100%;
    text-align: center;
    z-index: 1;
  }
  button {
    padding: 0;
    cursor: pointer;
    z-index: 1000;
    position: absolute;
    top: 8px;
    left: 4px;
    border: 0;
    background: none;
    color: $darkish_gray;
    i {
      font-size: 18px;
    }
    &:nth-of-type(2) {
      right: 4px;
      left: auto;
    }
    @include hover {
      color: darken($darkish_gray, 10%);
      &:disabled {
        cursor: default;
        color: lighten($darkish_gray, 30%);
      }
    }

    &:disabled {
      cursor: default;
      color: lighten($darkish_gray, 30%);
    }
  }
  h4 {
    display: inline;
    font-size: 18px;
    line-height: 15px;
  }
  .bg {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 0px;
    border-right: 1px solid $white;
    background-color: #e6f7ef;
  }
}

#edit-title {
  vertical-align: top;
}

.private_message .participants .user {
  float: left;
  display: block;
  margin-right: 15px;
}

.posts-wrapper .spinner {
  margin-left: 390px;
}


@include medium-width {
  .posts-wrapper .spinner {
    margin-left: 380px;
  }
  #topic-progress {
    left: 325px;
  }
}


@include small-width {
  .posts-wrapper .spinner {
    margin-left: 360px;
  }
  #topic-progress {
    left: 0;
  }
  #topic-progress-wrapper {
    right: 180px;
  }
}