%toolbar {
  @include horizontal-list;

  line-height: 2em;

  li {
    @include background(linear-gradient(#f9f9f9, #e0e0e0));

    margin: 0;
    padding: 0;
    text-align: center;
    overflow: hidden;

    border-right: inherit;

    &:last-child {
      border-right: none;
      margin-left: 0;
    }

    i.fa {
      @include text-shadow(rgba(white, 0.7) 1px 1px);
      i.fa { color: $link-color; }
    }

    &.active {
      @include background(linear-gradient(lightGrey, #ECECEC));
      i.fa { color: #636363; }
      color: #636363;
    }

    &:hover {
      i.fa { color: $link-color; }
      color: $link-color;
    }
  }

  [data-filter-type], [data-filter-origin] {
    cursor: pointer;
  }
}

@mixin cms-sidebar-toolbar {
  @extend %toolbar;
}

#cms-filter {
  input {
    width: 100%;
    // makes it not round
    -webkit-appearance: textfield;
    font-size: 13px;
    line-height: 1.5;
  }
}

#cms-sidebar-filter-origin {
  @include cms-sidebar-toolbar;
  border-bottom: none;

  li {
   height: 3em;
   vertical-align: middle;
   padding-top: 0.6em;
   $items: 3;
   width: 100% / $items;

   & > i.fa {
     font-size: 1.8em;
   }

   &.active {
    font-weight: bolder;
   }
  }
}


#cms-sidebar-filter-type {
  @include cms-sidebar-toolbar;

  li {
    $items: 7;
    width: 100% / $items;
  }
}
