/*
comment-write.scss
==========================================================================
Preamble Write Mode
*/

#preamble-write,
#preamble-read .node {
  position: relative;
}

#preamble-write {
  padding-left: 25px;
  width: 70%;

  // Write your comment - style wrapper
  .comment-wrapper {
    @include sans-font-regular;
    padding-left: 15px;

    // You are writing about
    .comment-header {
      margin: 0.6em 0;

      .comment-header-link a {
        color: $black;
        border-bottom: 2px solid $action_color;
      }
    }

    // Show more toggle wrapper
    .comment-context-wrapper {
      border-radius: 2px;
      box-shadow: 0 0 1px 1px $text_area_border;
      margin: 30px 0;
      position: relative;
    }

    // Show toggle box
    a.comment-context-toggle {
      background-color: $panel_background_color;
      border-radius: 2px;
      color: $panel_text_color;
      cursor: pointer;
      display: block;
      font-size: 16px;
      padding: 10px 15px;

      .comment-context-text {
        color: $action_color;
      }

      .fa-minus-circle,
      .comment-context-text-hide {
        display: none;
      }

      .fa {
        margin-right: 3px;
      }

      .comment-context-label {
        font-weight: bold;
      }
    }

    // Show toggle comment context
    .comment-context {
      border-top: 1px solid $text_area_border;
      display: none;
      margin: 0 0 25px 0;
      max-height: 400px;
      overflow: auto;
      padding: 0 20px;

      ul {
        padding-left: 0;
      }
    }

    .comment {
      font-size: 14px;
      padding-bottom: 10px;

      textarea, .ProseMirror {
        border: 1px solid transparent;
        box-shadow: 0 0 1px 1px $text_area_border;
        border-radius: 2px;
        margin: 10px 0;
        width: 100%;

        p {
          @include sans-font-regular;
          font-size: 16px;
          line-height: 20px;
        }
      }

      .footnote-jump-link {
        display: none;
      }

      .ProseMirror-content {
        height: 200px;
        resize: vertical;
        outline: none;
        overflow-y: auto;
        padding: 12px 15px;
      }

      .ProseMirror-menubar {
        min-height: 28px;
        padding: 3px 6px;
        color: $panel_text_color;
        border-bottom: 1px solid $gray_light;
      }

      .comment-content,
      .ProseMirror-content {
        li {
          list-style-type: inherit;
        }
        ol {
          list-style-type: decimal;
        }
      }

      .ProseMirror-content {
        ol,
        ul {
          padding-left: 20px;
        }
      }

      .show-more-context {
        display: none;
      }
    }

    .comment-clear {
      clear: both;
      cursor: pointer;
      display: inline-block;
      margin: 8px 13px 0 0;
      float: right;
      text-align: right;

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

    .status {
      float: right;
      font-weight: bold;
      padding: 5px 0 0 0;
      text-align: right;
      width: 200px;
    }
  }

  .comment-button,
  a.comment-index-review {
    background-color: $action_color;
    border-radius: 2px;
    color: $white;
    @include sans-font-regular;
    font-weight: 500;
    letter-spacing: 0.03em;
    height: auto;
    padding: 8px 20px;
    float: right;

    -webkit-transition: .1s;
    -moz-transition: .1s;
    transition: .1s;

    &:hover {
      background-color: $action_color_dark;
    }
  }

  .comment-controls {
    padding-bottom: 35px;
  }

  .comment-attachments-wrapper {
    float: left;
    width: 50%;
  }

  .comment-upload-button {
    background-color: $gray_lighter;
    color: $black;
    cursor: pointer;
    border-radius: 2px;
    @include sans-font-regular;
    font-weight: 500;
    letter-spacing: 0.03em;
    height: auto;
    padding: 8px 20px;

    &:hover {
      background-color: $gray_light;
    }
  }

  .comment-attachments,
  .comment-upload-button,
  .comment-attachment-count,
  .comment-attachment-limit {
    float: left;
    clear: both;
  }

  .comment-attachment-count,
  .comment-attachment-limit {
    color: $gray_dark;
  }

  .comment-upload-button {
    text-align: center;
    width: 165px;
  }

  .comment-attachment-count {
    margin-top: 10px;
  }

  .comment-attachments {
    display: inline-block;
    margin-bottom: 5px;
  }

  .comment-attachment {
    background: $gray_lighter;
    padding: 3px 10px;
    margin: 5px 5px 0 0;
    word-break: break-all;

    span {
      padding: 0 1px;
    }

    .attachment-filename {
      @include sans-font-bold;
    }

    .attachment-remove {
      padding-left: 9px;
      color: $gray;

      &:hover {
        color: $black;
        cursor: pointer;
      }
    }

    &:last-child {
      margin-right: 0;
    }
  }

  .comment-delete-response {
    color: $red;
    display: block;
    @include sans-font-bold;
    float: right;
    padding: 12px 15px 0 0;
  }

  .comment-submission {
    float: right;
    margin-top: 5px;
    width: 165px;
  }

  $icon_width: 48px;
  .write-warning {
    background-color: $blue_lightest;
    padding: $icon_width/2 $icon_width/4 $icon_width/4 2*$icon_width;
    margin: $icon_width/2 0;

    .fa-info-circle {
      position: absolute;
      left: $icon_width;    // aligns to the middle of the icon
      top: $icon_width/2;   // aligns to the top of the icon
      width: $icon_width;
      text-align: center;
    }

    p {
      @include sans-font-regular;
    }
    h3 {
      margin: 0;
    }
  }
  .warning-explanation {
    margin: $icon_width/2 0;
  }
  .back-to-proposal {
    @include sans-font-bold;
    padding-left: 5px;
  }
}

.comment-index {
  @include sans-font-regular;
  position: absolute;
  right: -290px;
  top: -15px;
  width: 250px;

  .comment-index-items {
    margin: 0 0 15px 0;

    & > h4 {
      margin: 0.6em 0 0 0;
      text-transform: none;
    }

    p {
      @include sans-font-regular;
      font-size: 16px;
      line-height: 22px;
      margin: 3px 2px 15px;
    }

    .comment-count {
      @include sans-font-bold;
    }
  }

  li {
    background: $gray_light;
    color: $black;
    cursor: default;
    font-weight: 500;
    padding: 10px 15px;
    margin-top: 7px;

    .comment-index-section {
      float: left;
      width: 150px;
    }

    .comment-index-modify {
      font-size: 15px;
      float: right;
      width: 40px;

      a:focus .fa {
        color: $black_dark;
        display: inline-block;
      }

      .fa {
        vertical-align: middle;
        display: none;
        margin-left: 5px;
        color: $gray_darker;

        &:hover {
          color: $black_dark;
        }
      }
    }

    .comment-index-edit,
    .comment-index-clear {
      cursor: pointer;

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

    &:hover {
      background: $gray_light;

      .fa {
        display: inline-block;
      }
    }
  }
}
