@import "ultimate/mixins/routines";

$support-ie: true !default;

//  example:
//    @include complex-padding(10px 20px none);
//  same:
//    padding: {
//      top: 10px;
//      right: 20px;
//      left: 20px;
//    }
//  produce:
//    padding-top: 10px;
//    padding-right: 20px;
//    padding-left: 20px;
@mixin complex-padding($params) {
  $params: complex-list($params);
  @include complex-property(padding, $params);
}

//  Provide complex box metrics.
//    example:
//      @include box(400px, none, 10px 20px none, 0 auto);
//    produce:
//      padding-top: 10px;
//      padding-right: 20px;
//      padding-left: 20px;
//      margin: 0 auto;
//      width: 360px;
@mixin box($width,
           $height          : false,
           $padding         : false,
           $margin          : false,
           $border          : false,
           $include-padding : true,
           $include-margin  : false,
           $include-border  : true) {
  @if length($width) == 2 {
    $height: nth($width, 2);
    $width:  nth($width, 1);
  }
  $properties: $padding $margin nth($border, 1);
  $include-properties: $include-padding $include-margin $include-border;
  $i: 0;
  @each $property-name in padding, margin, border-width {
    $i: $i + 1;
    $property: nth($properties, $i);
    @if $property {
      $complex: false;
      @if nth($include-properties, $i) and $property {
        $complex: complex-list($property);
        @if isset($width) {
          $width: _dec-size($width, nth($complex, 2), nth($complex, 4));
        }
        @if isset($height) {
          $height: _dec-size($height, nth($complex, 1), nth($complex, 3));
        }
      }
      @if $property-name == border-width and length($property) == 1 {
        border: $border;
      } @else {
        @include complex-property($property-name, $property, $complex);
        @if $property-name == border-width {
          border-style: nth($border, 2);
          border-color: nth($border, 3);
        }
      }
    }
  }
  @if isset($width) {
    width: $width;
  }
  @if isset($height) {
    height: $height;
  }
}

@mixin position($top: false, $right: false, $bottom: false, $left: false, $position: absolute) {
  @if length($top) == 4 {
    $left   : nth($top, 4);
    $bottom : nth($top, 3);
    $right  : nth($top, 2);
    $top    : nth($top, 1);
  }
  @if isset($position) { position: $position; }
  @if isset($top)    { top:     $top; }
  @if isset($right)  { right:   $right; }
  @if isset($bottom) { bottom:  $bottom; }
  @if isset($left)   { left:    $left; }
}

@mixin before($display: block, $content: '') {
  &:before {
    display: $display;
    content: $content;
    @content;
  }
}

@mixin after($display: block, $content: '') {
  &:after {
    display: $display;
    content: $content;
    @content;
  }
}

@mixin both($display: block, $content: '') {
  &:before, &:after {
    display: $display;
    content: $content;
    @content;
  }
}

// Adapted from: [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/)
@mixin clearfix($clear: both) {
  @include both(table) {
    clear: $clear;
  }
}

//  Provides a cross-browser method to implement `display: inline-block;`
//    example:
//      @include inline-block(80px, 20px);
//    produce:
//      display: inline-block;
//      *display: inline;
//      *zoom: 1;
//      width: 80px;
//      height: 20px;
//      vertical-align: middle;
@mixin inline-block($width: false, $height: false, $vertical-align: middle) {
  display: inline-block;
  @if $support-ie {
    *display: inline;
    *zoom: 1;
  }
  @if isset($width) {
    width: $width;
  }
  @if isset($height) {
    height: $height;
  }
  @if isset($vertical-align) {
    vertical-align: $vertical-align;
  }
}

// TODO: rename to "justify"
@mixin g-justify($item: ".item") {
  text-align: justify;
  @if $support-ie {
    text-justify: newspaper;
    text-align-last: justify;
  }
  font-size: 2px;
  line-height: 0;
  > #{$item}, &:after {
    @include inline-block;
    text-align: left;
  }
  &:after {
    content: "";
    height: 0;
    width: 99%;
  }
}

@mixin inline-block-list($item: "li") {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  #{$item} {
    @include inline-block;
  }
}

@mixin block-list($item: "li") {
  overflow: hidden;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  #{$item} {
    display: block;
    position: relative;
    float: left;
  }
}

@mixin simple-block-list($item: "li") {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  #{$item} {
    display: block;
    position: relative;
  }
}

@mixin sticky-footer($layout-padding-bottom, $footer-selector: ".l-page__footer", $layout-selector: ".l-page") {
  html {
    height: 100%;
  }
  body {
    position: relative;
    min-height: 100%;
  }
  #{$layout-selector} {
    position: static;
    padding-bottom: $layout-padding-bottom;
    #{$footer-selector} {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
  }
}