discourse/app/assets/stylesheets/common/base/compose.scss

#reply-control {
  background-color: $primary-low;
  border-top: 1px solid $primary-low;
  bottom: 0;
  height: 0;
  position: fixed;
  display: flex;
  flex-direction: column;
  transition: height 250ms ease;
  width: 100%;
  z-index: 999;

  .toggler,
  .toggle-toolbar {
    position: absolute;
    color: $primary-medium;
  }

  .toggler {
    right: 1px;
  }

  .toggle-toolbar {
    right: 30px;
  }

  .saving-text,
  .draft-text {
    display: none;
    padding-left: 10px;
    .spinner {
      margin-left: 5px;
    }
    i {
      color: $primary-medium;
    }
  }

  &.open {
    height: 300px;
    &.edit-title {
      height: 400px; // more room when editing the title
    }
  }

  &.closed {
    height: 0 !important;
  }

  &.draft,
  &.saving {
    height: 40px !important;
    justify-content: center;
  }

  &.draft {
    cursor: pointer;
    display: flex;
    .draft-text {
      display: block;
    }
    .grippie, .saving-text {
      display: none;
    }
    .toggler {
      right: 10px;
    }
  }

  &.saving .saving-text {
    display: flex;
  }

  input[type="text"] {
    border: 0;
  }

  .reply-to {
    color: $tertiary;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    i {
      color: $primary-medium;
    }
  }

  .whisper,
  .display-edit-reason {
    font-style: italic;
    color: $primary-medium !important;
  }

  #edit-reason {
    margin: 4px;
  }

  .user-selector,
  .title-and-category {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
  }

  .title-input {
    position: relative;
    .popup-tip {margin-top: -30px;}
  }

  .add-warning {
    margin-left: 1em;
  }

  #reply-title {
    width: 400px;
    padding: 6px 10px;
    margin: 0 10px 0 0;
  }

  .tag-chooser {
    margin: 5px 0 0 0;
    flex-basis: 30%;
  }

  .wmd-controls {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
  }

  .d-editor-button-bar .btn {
    padding: 0 6px;
  }

  .save-or-cancel {
    margin-top: 5px;
    flex-basis: 50%;
    display: flex;
    align-items: center;
    #draft-status,
    #file-uploading {
      margin-left: 25px;
    }
    #file-uploading {
      display: flex;
      .spinner {
        margin-right: 5px;
      }
    }
  }

  .composer-bottom-right {
    flex-basis: 50%;
    display: flex;
    flex-direction: row-reverse;
    .toggle-preview {
      order: 2;
    }
  }

  .with-tags {
    .composer-bottom-right {
      flex-basis: 60%;
      margin-left: auto;
    }
    .save-or-cancel {
      order: 3;
    }
  }

  .create {
    margin-right: 5px;
  }

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

.cooked > *:first-child {
  margin-top: 0;
}

.autocomplete {
  z-index: 999999;
  position: absolute;
  width: 240px;
  background-color: $secondary;
  border: 1px solid $primary-low;
  ul {
    list-style: none;
    padding: 0;
    margin: 0;

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

      border-bottom: 1px solid $primary-low;

      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: $tertiary-low;
        }
        @include hover {
          background-color: $highlight-low;
          text-decoration: none;
        }
      }
    }
  }
}

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 $primary-low;
  &:hover {
    background-color: $danger-low;
    border: 1px solid $danger-medium;
    text-decoration: none;
    color: $danger;
  }
}

div.ac-wrap {
  overflow: auto;
  max-height: 150px;
  background-color: $secondary;
  border: 1px solid $primary-low;
  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;
  }
}

.future-date-input {
  .examples {
    color: lighten($primary, 40%);
  }
}