.toolbar {
  position: relative;
  display: block;
  list-style: none;
  margin: 0px;
  border: 1px solid var(--border-color);
  background-color: #fafafa;
  padding: 0px 10px 0px 0px;
  line-height: 30px;
  width: auto;

  &:after {
    content: "";
    display: table;
    clear: both;
  }

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

  & .info {
    float: right;
    color: var(--text-lighter-color);
    padding: 0px 10px;
  }

  & .label {
    float: left;
    padding: 0px 10px;
    color: var(--text-light-color);
    border-right: 1px solid var(--border-color);
  }

  & .button,
  & button {
    float: left;
    display: inline;
    margin: 0px;
    padding: 0px 7px;
    height: 30px;
    vertical-align: middle;
    line-height: 30px;
    text-align: center;
    display: block;
    cursor: pointer;
    min-width: 35px;
    border: 0px;
    border-left: 1px solid #fff;
    border-right: 1px solid var(--border-color);
    color: var(--text-light-color);
    font-size: 12px;
    background-color: #f8f8f8;
    transition: all 200ms ease-out;

    & i.fa {
      font-size: 14px;
    }

    &:focus,
    &:hover {
      color: var(--text-color);
      background: #fdfdfd;
    }

    &[disabled] {
      opacity: 0.33;
      cursor: default;

      &:focus,
      &:hover {
        color: var(--text-light-color);
        background: inherit;
      }
    }

    &.active {
      color: var(--text-invert-color);
      background: #666;
      border-left: 1px solid #555;
      border-right: 1px solid #888;
    }

    /* 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: var(--font-os-sans);
        font-weight: bold;
        font-size: 13px;
        display: inline-block;
        position: absolute;
        bottom: 5px;
      }

      &.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";
      }
    }
  }

  &.rich-text {
    margin: 0px 1px 0px 1px;
    border-left: none;
    border-right: none;
    box-shadow: 0px 1px 1px #fff;
  }
}