textarea.rich {
  margin-top: -32px;
  padding-top: 8px + 32px;
  width: 100%;
}

.rich-text-toolbar {
  @extend %clearfix;
  position: relative;
  display: block;
  list-style: none;
  border-top: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
  background-color: #fafafa;
  margin: 0px 1px 0px 1px;
  padding: 0px 10px 0px 0px;
  line-height: 30px;
  width: auto;
  box-shadow: 0px 1px 1px #fff;

  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .button {
    float: left;

    a {
      height: 30px;
      line-height: 30px;
      text-align: center;
      display: block;
      cursor: pointer;
      width: 35px;
      float: left;
      border-left: 1px solid #fff;
      border-right: 1px solid #d7d7d7;
      color: #555;
      font-size: 14px;
      background-color: #F6F6F6;
      &:focus,
      &:hover {
        color: #000;
        background: #fdfdfd;
      }

      // font-awesome doesn't have h1-h6, so we'll apply some tricks
      &.header {
        vertical-align: bottom;
        i {
          margin-left: -6px;
        }
        i:after {
          font-family: Helvetica, Georgia, serif;
          font-weight: bold;
          font-size: 13px;
          display: inline-block;
          position: absolute;
          bottom: 3px;
        }
        &.h1 i::after { content: "1" }
        &.h2 i::after { content: "2" }
        &.h3 i::after { content: "3" }
        &.h4 i::after { content: "4" }
        &.h5 i::after { content: "5" }
        &.h6 i::after { content: "6" }
      }
    }

    span {
      display: none;
    }
  }
}