// @category  hacks
@import "util";

// hack to support negative margins in legacy IE
// @mixin     hack-negative-margin
@mixin hack-negative-margin() {
  @if($legacy-support-for-ie6 or $legacy-support-for-ie7) {
    @include has-layout();
    position: relative;
  }
}

// max-height hack
// @mixin     max-height
// @param     $value {String} the height
@mixin max-height($value) {
  @include hacked-maximum(height, $value);
}

// max-width hack
// @mixin     max-width
// @param     $value {String} the width
@mixin max-width($value) {
  @include hacked-maximum(width, $value);
}

// generic max-* hack wrapper
// @mixin     hacked-maximum
// @param     $property {String} property [height|width]
// @param     $value {String} the value
@mixin hacked-maximum($property, $value) {
  max-#{$property}: $value;
  @include bang-hack($property, auto, $value);
}

// proxy for ie-pseudo
// @mixin    ie-pseudo-before
// @param    $styles {String} the styles to apply to the pseudo-element
// @param    $content {String} the content to insert into the element (similar to css `content` attribute)
// @param    $name {String} the name of the element
@mixin ie-pseudo-before($styles: false, $content: false, $name: '') {
  @include ie-pseudo($styles, $content, before, $name);
}

// proxy for ie-pseudo
// @mixin    ie-pseudo-after
// @param    $styles {String} the styles to apply to the pseudo-element
// @param    $content {String} the content to insert into the element (similar to css `content` attribute)
// @param    $name {String} the name of the element
@mixin ie-pseudo-after($styles: false, $content: false, $name: '') {
  @include ie-pseudo($styles, $content, after, $name);
}

// this creates a one-type executing expression that inserts an element relative to `this` element.
// this allows some level of support for :before/:after in IE6/7
// inspired by http://nicolasgallagher.com/better-float-containment-in-ie/
// @mixin    ie-pseudo
// @param    $styles {String} the styles to apply to the pseudo-element
// @param    $content {String} the content to insert into the element (similar to css `content` attribute)
// @param    $placement {String} [before|after] simulate :before or :after behavior
// @param    $name {String} the name of the element
@mixin ie-pseudo($styles: false, $content: false, $placement: before, $name: '') {
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    $this: 't';
    $cmd: (unquote('#{$this}.el=document.createElement("#{prefixed-tag($name)}")'));
    $method: if($placement == before, insertBefore, appendChild);
    @if $content and $content != nil {
      $cmd: append($cmd, unquote('#{$this}.el.innerHTML="#{-ie-pseudo-content($content)}"'), comma);
    }
    @if $CONFIG_GENERATED_TAG_CSS {
      $styles: if($styles and $styles != nil, #{$CONFIG_GENERATED_TAG_CSS}#{$styles}, $CONFIG_GENERATED_TAG_CSS);
    }
    @if $styles and $styles != nil {
      // sets the icon styles on the node
      $cmd: append($cmd, unquote('#{$this}.el.style.cssText="#{$styles}"'), comma);
    }
    // if we're using the insertBefore method, we need to specify the node reference to the first childNode
    $reference-node: if($placement == before, ',#{$this}.childNodes[0]||null', '');
    $cmd: append($cmd, unquote('#{$this}.#{$method}(#{$this}.el#{$reference-node})'), comma);
    $runOnce: unquote('this.runtimeStyle.zoom="1"'); // this ensures the expression is only invoked once

    // we execute in a setTimeout to decouple from the current UI thread
    //  this prevents an edge case in IE crashing with an `Operation Aborted` if the node hasn't finished rendering yet
    //  http://www.nczonline.net/blog/2008/03/17/the-dreaded-operation-aborted-error/
    *zoom: expression(#{$runOnce},(function(#{$this}){setTimeout(function(){#{$cmd}})}(this)));
  }
}