@import "compass/layout/stretching";

// @category  utilities/styles

// this is a proxy for output-style
// we need this to prevent Sass from throwing an error as you currently can't use recursive mixins :/
// @mixin     _outputStyle
// @private
// @param     $property {String} the CSS property to output
// @param     $value {*} the CSS value to output
@mixin _outputStyle($property, $value: nil) {
  @if($value != nil) {
    @if($property == round-button-ie-support) {
      @include round-button-ie-support($value)
    }
    @else if($property == target-browser) {
      @include target-browser(nth($value,1), nth($value,2), nth($value,3));
    }
    @else if($property == font-family) {
      @include font-family($value);
    }
    @else if($property == font-style) {
      @include font-style($value);
    }
    @else if($property == hide-element) {
      @include hide-element();
    }
    @else {
      @include output-style($property, $value);
    }
  }
}

// Themes can override this function & custom-output-styler to add their own
// custom style includes.
@function has-custom-output-styler($property, $value, $method:pre){
  @return false;
}

// output a property or augment it to use a mixin
// @mixin     output-style
// @param     $property {String} the CSS property to output
// @param     $value {*} the CSS value to output
@mixin output-style($property, $value: nil) {

  @if($property != nil and length(-compass-list($value)) > 0 and first-value-of(-compass-list($value)) != nil and not index($CONFIG_DISABLED_CSS, $property)) {
    // for mixins, we need to do some custom work
    // check to see if we have a custom output styler (pre)
    @if has-custom-output-styler($property, $value, pre) == true {
      @include custom-output-styler($property, $value, $method: pre);
    }
    // border-radius
    @else if($property == border-radius)             { @include border-radius(rtl($value, border-radius)); }
    // box-sizing
    @else if($property == box-sizing)           { @include box-sizing($value); }
    // box-shadow
    @else if($property == box-shadow)           { @include box-shadow($value); }
    // text-shadow
    @else if($property == text-shadow)          { @include text-shadow($value); }
    // filter-gradient
    @else if($property == filter-gradient)      { @include filter-gradient(nth($value,1), nth($value,2), nth($value,3)); }
    // background
    @else if($property == background)           { @include background($value); }
    // background-image
    @else if($property == background-image or $property == gradient) { @include background-image($value); }
    // background-clip
    @else if($property == background-clip)      { @include background-clip($value); }
    // background-size
    @else if($property == background-size)      { @include background-size($value); }
    // background-origin
    @else if($property == background-origin)      { @include background-origin($value); }
    // IE filters
    @else if($property == ie-filter)            { @include ie-filter($value); }
    // hide-text
    @else if($property == hide-text)            { @include hide-text($direction: if($value == true, $hide-text-direction, $value)); }
    // inline-block
    @else if($property == inline-block)         { @include inline-block(); }
    // opacity
    @else if($property == opacity)              { @include opacity($value); }
    // min-width
    @else if($property == min-width)            { @include min-width($value); }
    // min-height
    @else if($property == min-height)           { @include min-height($value); }
    // max-width
    @else if($property == max-width)            { @include max-width($value); }
    // max-height
    @else if($property == max-height)           { @include max-height($value); }
    // stretch
    @else if($property == stretch)              { @include stretch(); }
    // appearance
    @else if($property == appearance)           { @include appearance($value); }
    // unhide-element
    @else if($property == unhide-element)       { @include unhide-element(); }
    // ellipsis
    @else if($property == ellipsis)             { @include ellipsis(); }
    // scale
    @else if($property == scale)                { @include scale($value); }
    @else if($property == glyph-icon)           { @include glyph-icon(nth($value, 1), nth($value, 2), nth($value, 3), nth($value, 4), nth($value, 5)); }
    @else if($property == extend)               { @extend #{$value}; }
    // animations
    @else if($property == animation) {
      @if archetype-version('compass >= 0.13') {
        @include animation($value);
      }
      @else {
        @if $experimental-support-for-webkit {
          -webkit-animation: $value;
        }
        @if $experimental-support-for-mozilla {
          -moz-animation: $value;
        }
        @if $experimental-support-for-microsoft {
          -ms-animation: $value;
        }
        @if $experimental-support-for-opera {
          -o-animation: $value;
        }
        animation: $value;
      }
    }
    // hasLayout
    @else if($property == has-layout) {
      // if value is true, don't pass it along
      @if($value == true) {
        @include has-layout();
      }
      @else {
        @include has-layout($value);
      }
    }
    // clearfix
    @else if($property == clearfix) {
      @if($value == legacy-pie-clearfix) {
        @include legacy-pie-clearfix();
      }
      @else if($value == pie-clearfix) {
        @include pie-clearfix();
      }
      @else {
        @include clearfix();
      }
    }
    // z-index
    @else if($property == z-index) {
      $value: -compass-list($value);
      @if(length($value) > 1) { @include z-index(nth($value, 1), nth($value, 2)); }
      @else { @include z-index($value); }
    }
    // :before/:after
    @else if($property == ie-pseudo-before or $property == ie-pseudo-after) {
      $value: -compass-list($value);
      $content: false;
      $tag: '';
      @if length($value) > 1 {
        $content: nth($value, 2);
        @if length($value) > 2 {
          $tag: nth($value, 3);
        }
      }
      @if $property == ie-pseudo-before {
        @include ie-pseudo-before(nth($value, 1), $content, $tag);
      }
      @else {
        @include ie-pseudo-after(nth($value, 1), $content, $tag);
      }
    }
    //ellipsis
    @else if($property == ellipsis)   { @include ellipsis(); }
    // check to see if we have a custom output styler (post)
    @else if has-custom-output-styler($property, $value, post) == true {
      @include custom-output-styler($property, $value, $method: post);
    }
    // otherwise just use a key-value pair
    @else { #{$property}: $value; }
  }
}

// convert a list of key-value pairs into CSS rules
// @mixin     to-styles
// @param     $list {List} a key-value paired list of ($property $value)
// @param     $states {Boolean|List} if true, output all states; if false, output no states; if a list, output only the states in the list
// @param     $exclude {List} a list of styles to exclude from output
@mixin to-styles($list: (), $states: true, $selectors: true, $exclude: ()) {
  $exclude: -compass-list($exclude);
  $states-data: ();
  $selectors-data: ();
  @each $item in $list {
    @if(length($item) > 1) {
      $property: nth($item, 1);
      $value: nth($item, 2);
      @if(not index($exclude, $property)) {
        // deal with the states
        @if($property == states and $states != false and length($value) > 0) {
          @each $state in $value {
            $val: nth($state, 2);
            $state: first-value-of($state);
            @if(index(-compass-list($states), $state) or $states == true) {
              #{_getStateSelector($state)} {
                @include to-styles($val, true, true, $exclude);
              }
            }
          }
        }
        // deal with the nested selectors
        @else if($property == selectors and $selectors != false and length($value) > 0) {
          @each $selector in $value {
            @if(index(-compass-list($selectors), $selector) or $selectors == true) {
              #{_getSelectorSelector($selector)} {
                @include to-styles(nth($selector, 2), true, true, $exclude);
              }
            }
          }
        }
        // otherwise, just output it
        @else if($selectors == true and $states == true ) {
          @include _outputStyle($property, unquote($value));

        }
      }
    }
  }
}

// helper function to compute the selector for various states
// @function  _getStateSelector
// @private
// @param     $state {String} the state to select
// @param     $prefix {String} the prefix to append to the state (for class names only)
@function _getStateSelector($state, $prefix: $CONFIG_STATE_PREFIX) {
  $selector: associative($CONFIG_STATE_MAPPINGS, $state, $strict: true);
  @if $selector == nil or length($selector) == 0 {
    $selector: '&.#{if(index(-compass-list($CONFIG_STATE_NO_PREFIX), $state), $prefix, "")}#{$state}';
  }
  @return $selector;
}

@function _getSelectorSelector($selector) {
  $selector: first-value-of(-compass-list($selector));
  @if $selector == $CORE_GLYPH_SELECTOR_VAR {
    $selector: $archetype-glyph-selector;
  }
  @elseif $selector == $CORE_GLYPH_SELECTOR_VAR {
    $selector: $archetype-pseudo-selector;
  }
  @return $selector;
}

// mixin for outputting filters in legacy IE
// @mixin     ie-filter
// @param     $value {String|List} a set of filters to output, sans `progid:DXImageTransform.Microsoft` prefix
@mixin ie-filter($value, $use-prefix: false) {
  $out: false;
  $value: -compass-list($value);
  $ms-filter-prefix: 'progid:DXImageTransform.Microsoft.';
  @each $item in $value {
    @if($item != none) {
      $item: #{$ms-filter-prefix}#{$item};
    }
    $out: if($out, '#{$out},#{$item}', '#{$item}');
  }
  @if($out) {
    @if $use-prefix != only {
      filter: unquote($out);
    }
    @if $use-prefix {
      -ms-filter: quote($out);
    }
  }
}

// mixin for generating a pseudo-element
// @mixin     pseudo-element
// @param     $width {String} width (default 0 for positioning in FF3)
// @param     $height {String} height
// @param     $content {String} content (this should be quoted)
// @param     $display {String} display [block|inline|etc]
// @param     $position {String} positioning [absolute|relative|etc]
@mixin pseudo-element($width: 0, $height: auto, $content: $CONTENT_PLACEHOLDER, $display: block, $position: false) {
  @include if-set(content, quote($content));
  @include if-set(display, $display);
  @include if-set(width, $width);
  @include if-set(height, $height);
  @include if-set(position, $position);
}

// this is a helper for simple gradients when a direction is desired in degrees,
// but we still want to support old webkit browsers
// @mixin     gradient-with-deg
// @param     $deg {Number} the direction degree
// @param     $start {Color} the start color
// @param     $end {Color} the end color
@mixin gradient-with-deg($deg, $start, $end) {
  // make sure it's a deg
  $deg: if(unitless($deg), $deg * 1deg, $deg);
  // we'll divide the circle into sections
  $sector: (360deg / 8);
  // offset it for calculations
  $tmp: $deg - ($sector / 2);
  $map: (
    (right top),
    (right),
    (right bottom),
    (bottom),
    (left bottom),
    (left),
    (left top),
    (top)
  );
  // compute the region it falls in
  $region: nth($map, ceil(if($tmp < 0deg, 360 - $tmp, $tmp) / $sector));
  // NOTE: we temporarily disable old webkit gradients as they don't support degrees
  // this is a fallback for old webkit
  @if($support-for-original-webkit-gradients) {
    background-image: -owg(linear-gradient($region, $start, $end));
  }
  $tmp: $support-for-original-webkit-gradients;
  $support-for-original-webkit-gradients: false;
  // now the others
  @include background-image(linear-gradient($deg, $start, $end));
  // restore the old webkit value
  $support-for-original-webkit-gradients: $tmp;
}

// abstract common issues and generate safe styles
@mixin safe($property: nil, $value: nil) {
  @if($property != nil and $value != nil) {
    // os friendly font stacks
    @if($property == font-family) {
      $stack: associative($CONFIG_SAFE_FONTS, $value, $strict: true);
      @if($stack != nil and length($stack) > 0) {
        // first, step through the list of os safe fonts
        @each $collection in $stack {
          @if(length($collection) > 1) {
            $default: nil;
            $os: nth($collection, 1);
            $fonts: nth($collection, 2);
            $family: nil;
            // next, step through the list of lang safe fonts
            @each $item in $fonts {
              @if($item != nil) {
                $lang: nth($item, 1);
                $font: nth($item, 2);
                // check if the language matches or it's the default
                @if($lang == default or lang($lang)) {
                  $family: $font;
                }
                // if it's the default, keep track of it
                @if($lang == default) {
                  $default: $font;
                }
                // if the keyword `default` is in the font-stack, substitute it with the default font-stack
                $family: list-replace($family, index(-compass-list($family), default), $default, comma);
              }
            }
            @include target-os($os, font-family, $family);
          }
        }
        $value: nil;
      }
    }
    // text-transform: uppercase isn't friendly to turkish
    @else if($property == text-transform and $value == uppercase and lang(tr_TR)) {
      // TODO - more investigation, this may affect other locales as well
      // @link http://www.w3.org/International/tests/html-css/text-transform/results-text-transform
      // @link https://developer.mozilla.org/en/CSS/text-transform
      $value: nil;
    }
    @else if($property == font-variant and $value == small-caps and lang(tr_TR)) {
      // TODO - more investigation, this may affect other locales as well
      // @link https://developer.mozilla.org/en/CSS/font-variant
      $value: nil;
    }
    // italics aren't pretty in CJK
    @else if($property == font-style and $value == italic and lang(CJK)) {
      $value: nil;
    }
    // if $value was set to `nil`, this does nothing
    @include output-style($property, $value);
  }
}

// web-safe font stacks, if no safe fonts are found, use the raw `$family` as output
// @mixin     font-family
// @param     $family {String} the font stack to output
@mixin font-family($family: nil) {
  @include safe(font-family, $family);
}

// safely use text-transform:uppercase without localization issues
// @mixin     uppercase
@mixin uppercase() {
  @include safe(text-transform, uppercase);
}

// safely use font-variant:small-caps without localization issues
// @mixin     small-caps
@mixin small-caps() {
  @include safe(font-variant, small-caps);
}

// safely use font-style without localization issues
// @mixin     font-style
// @param     $style {String} the style
@mixin font-style($style: nil) {
  @include safe(font-style, $style);
}

// a method for maintaining z-index order
// @mixin    z-index
// @param    $value {Number} the z-index offset
// @param    $layer {String|Number} the initial z-index layer to start from
@mixin z-index($value: 0, $layer: 0) {
  @if(type-of($layer) == string) {
    $layer: index($CONFIG_Z_LAYERS, $layer);
    $layer: if($layer, $layer - 1, 0) * $CONFIG_Z_LAYERS_OFFSET;
  }
  z-index: ($value + $layer);
}

// generate a tag name with a prefix
// @function  prefixed-tag
// @param     $tag {String} the tag to prefix
// @param     $prefix {String} the prefix to prepend to the tag
// @return    {String} the prefix joined with the tag
@function prefixed-tag($tag: '', $prefix: $CONFIG_GENERATED_TAG_PREFIX) {
  @if $tag != '' {
    $tag: '-#{$tag}';
  }
  @return '#{$prefix}#{$tag}';
}