/**
 * Note Form
 */
.comment-btn {
  @extend .btn-create;
}

.diff-file .diff-content {
  tr.line_holder:hover > td .line_note_link {
    opacity: 1.0;
    filter: alpha(opacity=100);
  }
}
.diff-file,
.discussion {
  .new-note {
    margin: 0;
    border: none;
  }
}

.new-note {
  display: none;
}

.new-note, .note-edit-form {
  .note-form-actions {
    margin-top: $gl-padding;
  }

  .note-preview-holder {
    > p {
      overflow-x: auto;
    }
  }

  img {
    max-width: 100%;
  }
}

.note-textarea {
  padding: 10px 0;
  font-family: $regular_font;
  border: 0;

  &:focus {
    outline: 0;
  }
}

.note-image-attach {
  @extend .col-md-4;
  margin-left: 45px;
  float: none;
}

.common-note-form {
  .md-area {
    padding: $gl-padding-top $gl-padding;
    border: 1px solid $note-form-border-color;
    border-radius: $border-radius-base;

    &.is-focused {
      border-color: $focus-border-color;
      box-shadow: 0 0 2px rgba(#000, .2),
                  0 0 4px rgba($focus-border-color, .4);

      .comment-toolbar,
      .nav-links {
        border-color: $focus-border-color;
      }
    }

    p {
      code {
        white-space: normal;
      }

      pre {
        code {
          white-space: pre;
        }
      }
    }
  }
}

.discussion-form {
  padding: $gl-padding-top $gl-padding;
  background-color: $white-light;
}

.note-edit-form {
  display: none;
  font-size: 15px;

  .form-actions {
    padding-left: 20px;

    .btn-save {
      float: left;
    }

    .note-form-option {
      float: left;
      padding: 2px 0 0 25px;
    }
  }
}

.js-note-attachment-delete {
  display: none;
}

.parallel-comment {
  padding: 6px;
}

.error-alert > .alert {
  margin-top: 5px;
  margin-bottom: 5px;
}

.discussion-body,
.diff-file {
  .notes .note {
    padding: 10px 15px;
  }

  .discussion-reply-holder {
    background-color: $white-light;
    padding: 10px 16px;
  }
}

.discussion-notes-count {
  font-size: 16px;
}

.edit_note {
  .markdown-area {
    min-height: 140px;
    max-height: 500px;
  }
  .note-form-actions {
    background: transparent;
  }
}

.comment-toolbar {
  padding-top: $gl-padding-top;
  color: $note-toolbar-color;
  border-top: 1px solid $border-color;
}

.toolbar-button {
  padding: 0;
  background: none;
  border: 0;
  font-size: 14px;
  line-height: 16px;

  &:hover,
  &:focus {
    color: $gl-link-color;
    outline: 0;
  }

  @media (min-width: $screen-md-min) {
    float: left;
    margin-right: $gl-padding;

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

.toolbar-button-icon {
  position: relative;
  top: 1px;
  margin-right: 3px;
  color: inherit;
  font-size: 16px;
}

.toolbar-text {
  font-size: 14px;
  line-height: 16px;

  @media (min-width: $screen-md-min) {
    float: left;
  }
}