.autocomplete {
  z-index: 999999;
  position: absolute;
  width: 240px;
  background-color: $secondary;
  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
  ul {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      .fa-users {
        color: lighten($primary, 40%);
        padding: 0 2px;
      }

      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);

      a {
        padding: 5px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        span.username {
          color: darken($primary, 40%);
        }
        span.name {
          font-size: 11px;
          vertical-align: middle;
        }
        &.selected {
          background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
        }
        @include hover {
          background-color: dark-light-diff($highlight, $secondary, 90%, -80%);
          text-decoration: none;
        }
      }
    }
  }
}

#reply-control {
  .d-editor-textarea-wrapper .spinner {
    z-index: 1000;
    margin-top: 5em;
  }

  .d-editor-button-bar {
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    margin: 0px;
    padding: 5px;
    border-bottom: 2px solid dark-light-diff($primary, $secondary, 90%, -60%);
    height: 33px;
  }

  textarea {
    box-shadow: none;
  }
}


.saving-text .spinner {
  display: inline-block;
  left: 5px;
  top: 4px;
}

div.ac-wrap.disabled {
  input {
    display:none;
  }
  .item a {
    display:none;
  }
}

div.ac-wrap div.item a.remove, .remove-link {
  margin-left: 4px;
  font-size: 11px;
  line-height: 10px;
  padding: 1.5px 1.5px 1.5px 2.5px;
  border-radius: 12px;
  width: 10px;
  display: inline-block;
  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
  &:hover {
    background-color: scale-color($danger, $lightness: 75%);
    border: 1px solid scale-color($danger, $lightness: 30%);
    text-decoration: none;
    color: $danger;
  }
}

div.ac-wrap {
  overflow: auto;
  max-height: 150px;
  background-color: $secondary;
  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
  padding: 5px 4px 1px 4px;
  div.item {
    float: left;
    margin-bottom: 4px;
    margin-right: 10px;
    span {
      height: 24px;
      display: inline-block;
      line-height: 20px;
    }
  }

  .ac-collapsed-button {
    float: left;
    border-radius: 20px;
    position: relative;
    top: -2px;
    margin-right: 10px;
  }

  input[type="text"] {
    float: left;
    margin-bottom: 4px;
    height: 24px;
    display: block;
    border: 0;
    padding: 0;
    box-shadow: none;
  }
}

.auto-close-fields {
  div:not(:first-child) {
    margin-top: 10px;
  }
  label {
    font-size: 1em;
  }
  input {
    width: 150px;
  }
  .examples {
    color: lighten($primary, 40%);
  }
}

#reply-control {
  .composer-loading {
    position: absolute;
    left: 48%;
    top: 20%;
  }
  .whisper {
    margin-left: 1em;
    font-style: italic;
  }
}

#reply-control.topic-featured-link-only.open {
  .wmd-controls { display: none; }
}

#cancel-file-upload {
  font-size: 1.6em;
}

#draft-status, #file-uploading {
  color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
}

.composer-bottom-right {
  .spinner.small {
    width: 6px;
    height: 6px;
  }
}

// this removes the topmost margin from the first element in the topic post
// if we don't do this, all posts would have extra space at the top
.d-editor-preview > *:first-child {
  margin-top: 0;
}
.cooked > *:first-child {
  margin-top: 0;
}