.composer {
  .composer-ctrls {
    .elevation-1;
    background: #fff;
    font-weight: 300;
    margin: 1px 0;
    
    .btn {
      padding: 10px 20px;
      white-space: pre;
      border-radius: 0;
      background: none;
      box-shadow: none;
      &:hover {
        .elevation-btn-raised;
        background: #fff;
      }   
      &.highlighted {
        color: #fff;
        background: #4880F1;
        &:hover {
          background: #2967E2;
        }
      }
      &.disabled {
        cursor: default;
        color: #aaa !important;
        background: none !important;
        box-shadow: none !important;
      }
    }
  }
  .composer-recps {
    .fa-hashtag, .fa-user {
      color: #666;
    }
    input {
      border: 0;
      margin-left: 5px;
      background: transparent;
      &:focus, &:active {
        outline: 0;
      }
    }
    .recps-inputs {
      padding: 10px;
      border-left: 1px solid #ddd;
    }
    .recp {
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 2px;
      padding: 0px 5px 1px;
      margin-left: 5px;
      box-shadow: 1px 1px 2px rgba(0,0,0,0.05);

      a {
        margin-left: 5px;
        color: gray;
      }
    }
  }
  .composer-content {
    .elevation-1;
    font-family: @content-font;
    font-weight: 300;
    color: #555555;
    line-height: 1.4;
    background: #fff;
    margin: 1px 0;

    textarea {
      display: block;
      box-sizing: border-box;
      width: 100%;
      resize: vertical;
      border: 0;
      min-height: 140px;
      padding: 10px;
      margin: 0;

      &:active, &:focus {
        outline: 0;
      }
    }
    & > div {
      padding: 10px;
      min-height: 140px;
      font-weight: 300;
      color: #555;
    }
  }
  .warning {
    color: rgb(178, 26, 26);
    margin: 5px 0;
  }
  .preview {
    .elevation-1;
    background: #fff;
    margin: 1px 0;
    padding: 14px 20px 20px;
    color: #555;
    font-weight: 300;
    font-family: @content-font;
    line-height: 1.4;
    word-break: break-word;
  }
}