$primary-color: #4285f4;
$secondary-color: #e6a23c;
$disabled-color: #a8abb2;
$element-separator: '__' !default;
$state-prefix: 'is-' !default;
$modifier-separator: '--' !default;
$namespace: 'ER';
@mixin b($block) {
  $B: $namespace + '-' + $block !global;
  .#{$B} {
    @content;
  }
}
@mixin e($element) {
  $E: $element !global;
  $selector: &;
  $currentSelector: '';
  @each $unit in $element {
    $currentSelector: #{$currentSelector +
      '.' +
      $B +
      $element-separator +
      $unit +
      ','};
  }
  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}
@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}
