fix(bem): Make scss mixins actually follow BEM

The mixins and internal variable where misnamed. We use the BEM naming
with the following pattern: `.ais-block--element__modifier`.

Mixins where usin `component` instead of `block` and where swapping
`element` and `modifier`. I've reverted to something more readable.

css/_base.scss

@@ -1,26 +1,26 @@
-@mixin component($component) {
-  .ais-#{$component} {
+@mixin block($block) {
+  .ais-#{$block} {
     @content
   }
 }
 
-@mixin modifier($modifier) {
-  &--#{$modifier} {
+@mixin element($element) {
+  &--#{$element} {
     @content
   }
 }
 
-@mixin element($element) {
-  &__#{$element} {
+@mixin modifier($modifier) {
+  &__#{$modifier} {
     @content
   }
 }
 
-@mixin bem($component, $modifier, $element: "") {
-  @include component($component) {
-    @include modifier($modifier) {
+@mixin bem($block, $element, $modifier: "") {
+  @include block($block) {
+    @include element($element) {
       @if $element != "" {
-        @include element($element) {
+        @include modifier($modifier) {
           @content;
         }
       } @else {

css/default/_hierarchical-menu.scss

@@ -1,42 +1,42 @@
 @import "../base";
 @import "variables";
 
-@include component(hierarchical-menu) {
-  @include modifier(header) {
+@include block(hierarchical-menu) {
+  @include element(header) {
     /* widget header */
   }
-  @include modifier(body) {
+  @include element(body) {
     /* widget body */
   }
-  @include modifier(list) {
+  @include element(list) {
     /* item list */
-    @include element(lvl0) {
+    @include modifier(lvl0) {
       /* item list level 0 */
     }
-    @include element(lvl1) {
+    @include modifier(lvl1) {
       /* item list level 1 */
       margin-left: 10px;
     }
-    @include element(lvl2) {
+    @include modifier(lvl2) {
       /* item list level 0 */
       margin-left: 10px;
     }
   }
 
-  @include modifier(item) {
+  @include element(item) {
     /* list item */
-    @include element(active) {
+    @include modifier(active) {
       /* active list item */
     }
   }
 
-  @include modifier(link) {
+  @include element(link) {
     /* item link */
   }
-  @include modifier(count) {
+  @include element(count) {
     /* item count */
   }
-  @include modifier(footer) {
+  @include element(footer) {
     /* widget footer */
   }
 }

css/default/_hits.scss

@@ -1,11 +1,11 @@
 @import "../base";
 @import "variables";
 
-@include component(hits) {
-  @include element(empty) {
+@include block(hits) {
+  @include modifier(empty) {
     /* empty container */
   }
-  @include modifier(item) {
+  @include element(item) {
     /* hit item */
   }
 }

css/default/_index-selector.scss

@@ -1,8 +1,8 @@
 @import "../base";
 @import "variables";
 
-@include component(index-selector) {
-  @include modifier(item) {
+@include block(index-selector) {
+  @include element(item) {
     /* selector item */
   }
 }

css/default/_menu.scss

@@ -1,29 +1,29 @@
 @import "../base";
 @import "variables";
 
-@include component(menu) {
-  @include modifier(header) {
+@include block(menu) {
+  @include element(header) {
     /* widget header */
   }
-  @include modifier(body) {
+  @include element(body) {
     /* widget body */
   }
-  @include modifier(list) {
+  @include element(list) {
     /* item list */
   }
-  @include modifier(item) {
+  @include element(item) {
     /* list item */
-    @include element(active) {
+    @include modifier(active) {
       /* active list item */
     }
   }
-  @include modifier(link) {
+  @include element(link) {
     /* item link */
   }
-  @include modifier(count) {
+  @include element(count) {
     /* item count */
   }
-  @include modifier(footer) {
+  @include element(footer) {
     /* widget footer */
   }
 }

css/default/_pagination.scss

@@ -1,30 +1,30 @@
 @import "../base";
 @import "variables";
 
-@include component(pagination) {
-  @include modifier(item) {
+@include block(pagination) {
+  @include element(item) {
     /* pagination item */
-    @include element(disabled) {
+    @include modifier(disabled) {
       /* disabled pagination item */
       visibility: hidden;
     }
   }
-  @include modifier(item-first) {
+  @include element(item-first) {
     /* first pagination item */
   }
-  @include modifier(item-previous) {
+  @include element(item-previous) {
     /* previous pagination item */
   }
-  @include modifier(item-page) {
+  @include element(item-page) {
     /* page */
-    @include element(active) {
+    @include modifier(active) {
       /* active page */
     }
   }
-  @include modifier(item-next) {
+  @include element(item-next) {
     /* next pagination item */
   }
-  @include modifier(item-last) {
+  @include element(item-last) {
     /* last pagination item */
   }
 }

css/default/_price-ranges.scss

@@ -1,45 +1,45 @@
 @import "../base";
 @import "variables";
 
-@include component(price-ranges) {
-  @include modifier(header) {
+@include block(price-ranges) {
+  @include element(header) {
     /* widget header */
   }
-  @include modifier(body) {
+  @include element(body) {
     /* widget body */
   }
-  @include modifier(footer) {
+  @include element(footer) {
     /* widget footer */
   }
-  @include modifier(list) {
+  @include element(list) {
     /* item list */
   }
-  @include modifier(item) {
+  @include element(item) {
     /* list item */
-    @include element(active) {
+    @include modifier(active) {
       /* active list item */
     }
   }
 
-  @include modifier(link) {
+  @include element(link) {
     /* item link */
   }
-  @include modifier(form) {
+  @include element(form) {
     /* custom form */
   }
-  @include modifier(label) {
+  @include element(label) {
     /* custom form label */
   }
-  @include modifier(currency) {
+  @include element(currency) {
     /* currency */
   }
-  @include modifier(input) {
+  @include element(input) {
     /* custom form input */
   }
-  @include modifier(separator) {
+  @include element(separator) {
     /* custom form separator */
   }
-  @include modifier(button) {
+  @include element(button) {
     /* custom form button */
   }
 }

css/default/_range-slider.scss

@@ -8,8 +8,8 @@ $range-slider-marker-bg: #DDD;
 $range-slider-bar-color: $blue-light;
 $range-slider-handle-bg: $white;
 
-@include component(range-slider) {
-  @include modifier(target) {
+@include block(range-slider) {
+  @include element(target) {
     position: relative;
     direction: ltr;
     background: $range-slider-bg;
@@ -18,7 +18,7 @@ $range-slider-handle-bg: $white;
     margin-bottom: 4em;
   }
 
-  @include modifier(base) {
+  @include element(base) {
     width: 100%;
     height: 100%;
     position: relative;
@@ -29,23 +29,23 @@ $range-slider-handle-bg: $white;
     border-right: 2px solid $range-slider-marker-bg;
   }
 
-  @include modifier(origin) {
+  @include element(origin) {
     position: absolute;
     right: 0;
     top: 0;
     left: 0;
     bottom: 0;
   }
 
-  @include modifier(connect) {
+  @include element(connect) {
     background: $range-slider-bar-color;
   }
 
-  @include modifier(background) {
+  @include element(background) {
     background: $range-slider-bg;
   }
 
-  @include modifier(handle) {
+  @include element(handle) {
     width: $range-slider-handle-size;
     height: $range-slider-handle-size;
     position: relative;
@@ -56,24 +56,24 @@ $range-slider-handle-bg: $white;
     cursor: pointer;
   }
 
-  @include modifier(handle-lower) {
+  @include element(handle-lower) {
     left: -($range-slider-handle-size / 2);
     bottom: ($range-slider-handle-size / 2 - $range-slider-target-height / 2);
   }
 
-  @include modifier(handle-upper) {
+  @include element(handle-upper) {
     right: $range-slider-handle-size / 2;
     bottom: ($range-slider-handle-size / 2 - $range-slider-target-height / 2);
   }
 
-  @include modifier(tooltip) {
+  @include element(tooltip) {
     position: absolute;
     background: $white;
     top: -2em;
     font-size: .8em;
   }
 
-  @include modifier(pips) {
+  @include element(pips) {
     box-sizing: border-box;
     position: absolute;
     height: 3em;
@@ -82,33 +82,33 @@ $range-slider-handle-bg: $white;
     width: 100%;
   }
 
-  @include modifier(value) {
+  @include element(value) {
     width: $range-slider-handle-size * 2;
     position: absolute;
     text-align: center;
     margin-left: -$range-slider-handle-size;
     padding-top: 15px;
     font-size: .8em;
   }
-  @include modifier(value-sub) {
+  @include element(value-sub) {
     font-size: .8em;
     padding-top: 15px;
   }
 
-  @include modifier(marker) {
+  @include element(marker) {
     position: absolute;
     background: $range-slider-marker-bg;
     margin-left: -1px;
     width: 1px;
     height: 5px;
   }
-  @include modifier(marker-sub) {
+  @include element(marker-sub) {
     background: $range-slider-marker-bg;
     width: 2px;
     margin-left: -2px;
     height: 7px + $range-slider-target-height;
   }
-  @include modifier(marker-large) {
+  @include element(marker-large) {
     background: $range-slider-marker-bg;
     width: 2px;
     margin-left: -2px;