@import "./variable.scss";
@import "./function.scss";

@mixin flex($space:space-between,$direction:row, $align: center){
  display: flex;
  align-items: $align;
  flex-direction: $direction;
  justify-content: $space;
}

@mixin book-cover($width){
  box-shadow: $--book-shadow;
  border-radius: $--book-radius;
  display: block;
  @if $width {  
    width: $width;
    height: $width / 3 * 4; 
  }
}

@mixin book-name($font-size: $--font-size-big,$line-height: inherit){
  color: $--font-color-dark;
  font-size: $font-size;
  @include single-line($line-height)
}
@mixin book-intro($font-size:$--font-size-small,$line: 3,$line-height:1.6){
  color: $--font-color-medium;
  font-size: $font-size;
  line-height: $line-height;
  @include multi-line($line)
}

@mixin multi-line($line){
  -webkit-line-clamp: $line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@mixin single-line($line-height: 1.5){
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: $line-height;
}

/*-------   bem    ---------*/
@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 + ","};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

@mixin m($modifier) {
  $selector: &;
  $currentSelector: "";
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

@mixin meb($modifier: false, $element: $E, $block: $B) {
  $selector: &;
  $modifierCombo: '';

  @if $modifier {
    $modifierCombo: $modifier-separator + $modifier;
  }

  @at-root {
    #{$selector} {
      .#{$block+$element-separator+$element+$modifierCombo} {
        @content
      }
    }
  }
}

@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}
