// Cover all
// Cover the entire parent element

@mixin coverall(
  $margin: 0,
  $top: true,
  $right: true,
  $bottom: true,
  $left: true,
  $reset: false,
  $position: true) {

  @if $position == true {
    position: absolute;
  }

  @if $top == true {
    top: $margin;
  } @else if $top != false {
    top: $top;
  }

  @if $right == true {
    right: $margin;
  } @else if $right != false {
    right: $right;
  }

  @if $bottom == true {
    bottom: $margin;
  } @else if $bottom != false {
    bottom: $bottom;
  }

  @if $left == true {
    left: $margin;
  } @else if $left != false {
    left: $left;
  }

  @if $reset == true {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
}


// Aspect ratio blocks
// Works best when it has a coverall mixin child
// Default ratio is 16:9

// Aspect ratio blocks
// Probably needs a coverall @mixin as a child
@mixin ratio-block($ratio: 16 to 9) {

  // Variables
  $width: nth($ratio, 1);
  $height: nth($ratio, 3);
  $percent: (($height / $width) * 100%);

  position: relative;

  &:before {
    display: block;
    content: " ";
    padding-top: $percent;
  }
}


// Graphical psuedo element
// Set element to position relative and add a psuedo element with position absolute and a "content"

@mixin psuedo(
  $psuedo: after,
  $parentposition: true,
  $display: true,
  $position: true,
  $content: true) {

  @if $parentposition == true {
    position: relative;
  }

  &:#{$psuedo} {

    @if $display == true {
      display: block;
    }

    @if $position == true {
      position: absolute;
    }

    @if $content == true {
      content: " ";
    }

    @content;
  }
}


// Transition
// Set a default transition to be used in the whole project
// 1. No 1 pixel jumps on smooth transitons

@mixin transition(
  $properties: all,
  $duration: $transition-duration,
  $easing: $transition-easing) {

  transition: $properties $duration $easing;
  -webkit-backface-visibility:hidden; // 1
}


// Reset elements
// Reset an elements default styling
// Mostly useful for <ul> etc. where default element shave multiple styling rules

@mixin reset(
  $margin: true,
  $padding: true,
  $list-style: true,
  $border: true,
  $background: true) {

  @if $margin == true {
    margin: 0;
  }

  @if $padding == true {
    padding: 0;
  }

  @if $list-style == true {
    list-style: none;
  }

  @if $border == true {
    border: none;
  }

  @if $background == true {
    background: transparent;
  }
}


// Breakpoint
// Mobile first media query mixin

@mixin breakpoint(
  $width,
  $type: min,
  $width--max: false) {

  @if $type == min {
    @media screen and (min-width: $width) {
      @content;
    }
  } @else if $type == max {
    @media screen and (max-width: $width) {
      @content;
    }
  } @else if $type == range {
    @media screen and (min-width: $width) and (max-width: $width--max) {
      @content;
    }
  }
}


// Clearfix
// Micro clearfix using display: table and a space for "content" to make it work on Opera
// Also using ":before" to clear top-margins as well

@mixin clearfix {
  &:before,
  &:after {
    display: table;
    content: " ";
  }

  &:after {
    clear: both;
  }
}


// Retina
// Only apply styling on retina screens

@mixin retina {
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    @content;
  }
}


// Arrows
// CSS only arrows using borders

@mixin arrow(
  $direction: right,
  $size: 4px,
  $color: false) {

  // Top and bottom arrows

  @if $direction == top or $direction == bottom {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
  }


  // Left and right arrows

  @if $direction == left or $direction == right {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
  }


  // Top

  @if $direction == top {
    border-bottom: $size solid;

    @if $color {
      border-bottom-color: $color;
    }
  }


  // Right

  @if $direction == right {
    border-left: $size solid;

    @if $color {
      border-left-color: $color;
    }
  }


  // Bottom

  @if $direction == bottom {
    border-top: $size solid;

    @if $color {
      border-top-color: $color;
    }
  }


  // Left

  @if $direction == left {
    border-right: $size solid;

    @if $color {
      border-right-color: $color;
    }
  }
}


// Width mixin
// Set all CSS width values to 'X'

@mixin allwidth($width) {
  min-width: $width;
  width: $width;
  max-width: $width;
}


// Height mixin
// Set all CSS height values to 'X'

@mixin allheight($height) {
  min-height: $height;
  height: $height;
  max-height: $height;
}


// Flexbox
// 1. Is flexbox variable set to true?
// 2. Make sure to place selector at root since we use modernizr (add classes to html tag)
// 3. Check for modernizr classes
// 4. Set media query
//
// Because we're adding .flexbox and .flexboxlegacy classes flexbox will only work when JS is enabled
// This is a good thing since we're not sure what we're showing / hiding with JS that might mess with flexbox

@mixin flexbox(
  $horizontal: $flexbox-horizontal,
  $vertical: $flexbox-vertical) {

  @if $flexbox == true { // 1
    @at-root { // 2
      .k-flexbox &, // 3
      .k-flexboxlegacy & { // 3
        @media (min-width: $horizontal) and (min-height: $vertical) { // 4
          @content
        }
      }
    }
  }
}


// Border
// Sets a border to defined side
// Only sets a border if $borders is set to true in variables

@mixin border($position, $border-color) {
  @if $borders != false and $border-color != false {
    @if $position == 'all' {
      border: $border-width $border-style $border-color;
    } @else {
      border-#{$position}: $border-width $border-style $border-color;
    }
  }
}


// JS enabled

@mixin js-enabled {
  @at-root .k-js-enabled & {
    @content;
  }
}


// Modernizr
// Use: @include modernizr('.k-appearance.k-checked') { ... }

@mixin modernizr($classes) {
  @at-root {
    #{$classes} & {
      @content
    }
  }
}


// Koowa RTL
//
// Three mixins for RTL
// - `@include rtl` to use inside the Koowa namespace but outside the Modernizr namespace
// - `@include modernizr-rtl` to use outside Modernizr otherwise the mixin will fail
// - `@include rtl-outside-koowa` to be used for @imports outside the k-ui-namespace namespace
//
// What to watch out for when styling RTL in Nooku UI:
// ===================================================
//
// 1. Namespacing
// --------------
// Use the `rtl-outside-koowa` Mixin outside k-ui-namespace namspace
//
//
// 2. Modernizr
// ------------
// Use the `modernnizr-rtl` Mixin when inside a `modernizr` Mixin
//
//
// 3. Specificity
// --------------
// Be sure to check specificity. Since we are using a lot of mixins we are adding some complexity to rtl. For example:
//
// ```
// .foo {
//   padding-left: 10px;
//
//   @include rtl {
//     padding-left: 0;
//     padding-right: 10px;
//   }
//
//   @include breakpoint($beta) {
//     padding-left: 20px;
//   }
// }
// ```
//
// Will result in:
//
// ```
// .k-ui-namespace .foo {
//   padding-left: 10px;
// }
//
// .k-ui-rtl.koowa .foo {
//   padding-left: 0;
//   padding-right: 10px;
// }
//
// @media (min-width: 600px) {
//   .k-ui-namespace .foo {
//     padding-left: 20px;
//   }
// }
// ```
//
// Since the `.k-ui-rtl.koowa` .foo has a higher specificity than the media querie, the RTL styling will be there for non-rtl as well. So watch out for specificity and do this:
//
// ```
// .foo {
//   padding-left: 10px;
//
//   @include rtl {
//     padding-left: 0;
//     padding-right: 10px;
//   }
//
//   @include breakpoint($beta) {
//     @include rtl {
//       padding-left: 0;
//       padding-right: 20px;
//     }
//   }
// }
// ```
//
//
// 4. JS-enabled
// -------------
// You can't use `@include rtl` inside `@include js-enabled` but you can use it the other way around.
//
//
// 5. Multiple selectors
// ---------------------
// It is impossible to use the rtl mixin inside multiple selectors like so:
//
// ```
// .foo,
// .bar {
//   text-align: right;
//
//   @include rtl {
//     text-align: left;
//   }
// }
// ```
//
// The other way around is possible tho:
//
// ```
// .foo,
// .bar {
//   text-align: right;
// }
//
// @include rtl {
//   .foo,
//   .bar {
//     text-align: right;
//   }
// }
// ```


@mixin rtl {
  @at-root .k-ui-rtl#{&} {
    @content;
  }
}

@mixin rtl-outside-koowa {
  @at-root {
    [dir="rtl"] #{&} {
      @content
    }
  }
}

@mixin modernizr-rtl($classes) {
  @at-root {
    #{$classes} .k-ui-rtl#{&} {
      @content
    }
  }
}



// Resize event
//
// Special styling fro when window is resizing

@mixin resizing {
  @at-root .k-is-resizing & {
    @content;
  }
}



// Wrapping words
@mixin wrap_words() {
  // Breaking
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;

  // do not hyphenate
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}


@mixin koowa_icon_font {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Styling the span element */
  vertical-align: middle;
  display: inline-block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;

  /* Styling the before element */
  &:before {
    display: block;
    overflow: visible;
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    background-size: cover; // For customer image background overrides
  }

  /* Hiding the i element */
  i {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
  }
}