// ========================================================
//   Mixins
// ========================================================
//   All global mixin functions go here.
// 
//   You can use variables from atk-variables.less here,
// but try to avoid using variables from jui-variables.less
// (custom JUI theme) directly.
// ========================================================



// UTILITY MIXINS
// --------------------------------------------------------

// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
.clearfix() {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

// Miscelaneous helpers
// --------------------
.small() { font-size: 0.85em; }
.big() { font-size: 1.25em; }




// CSS3 PROPERTIES
// --------------------------------------------------------

// Border Radius (webkit and moz prefixes are no more needed for newest FireFox and Chrome versions)
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Single Corner Border Radius
.border-top-left-radius(@radius) {
  -webkit-border-top-left-radius: @radius;
     -moz-border-top-left-radius: @radius;
          border-top-left-radius: @radius;
}
.border-top-right-radius(@radius) {
  -webkit-border-top-right-radius: @radius;
     -moz-border-top-right-radius: @radius;
          border-top-right-radius: @radius;
}
.border-bottom-left-radius(@radius) {
  -webkit-border-bottom-left-radius: @radius;
     -moz-border-bottom-left-radius: @radius;
          border-bottom-left-radius: @radius;
}
.border-bottom-right-radius(@radius) {
  -webkit-border-bottom-right-radius: @radius;
     -moz-border-bottom-right-radius: @radius;
          border-bottom-right-radius: @radius;
}

// Single Side Border Radius
.border-top-radius(@radius) {
    .border-top-left-radius(@radius);
    .border-top-right-radius(@radius);
}
.border-bottom-radius(@radius) {
    .border-bottom-left-radius(@radius);
    .border-bottom-right-radius(@radius);
}
.border-left-radius(@radius) {
    .border-top-left-radius(@radius);
    .border-bottom-left-radius(@radius);
}
.border-right-radius(@radius) {
    .border-top-right-radius(@radius);
    .border-bottom-right-radius(@radius);
}

// Drop shadows
.box-shadow(@shadow: 0 1px 3px fadeout(@shadowColor,25%)) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

// Transitions
.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
      -ms-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
     -moz-transition-delay: @transition-delay;
       -o-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
     -moz-transition-duration: @transition-duration;
       -o-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}

// 2D Transformations
.transform(@arguments) {
  -webkit-transform: @arguments;
     -moz-transform: @arguments;
      -ms-transform: @arguments;
       -o-transform: @arguments;
          transform: @arguments;
}
.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
     -moz-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees);
       -o-transform: rotate(@degrees);
          transform: rotate(@degrees);
}
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
     -moz-transform: scale(@ratio);
      -ms-transform: scale(@ratio);
       -o-transform: scale(@ratio);
          transform: scale(@ratio);
}
.translate(@x, @y) {
  -webkit-transform: translate(@x, @y);
     -moz-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y);
       -o-transform: translate(@x, @y);
          transform: translate(@x, @y);
}
.skew(@x, @y) {
  -webkit-transform: skew(@x, @y);
     -moz-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
       -o-transform: skew(@x, @y);
          transform: skew(@x, @y);
  -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
}
.translate3d(@x, @y, @z) {
  -webkit-transform: translate3d(@x, @y, @z);
     -moz-transform: translate3d(@x, @y, @z);
       -o-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}
// http://radiatingstar.com/css-keyframes-animations-with-less
#rotate {
  .clockwise () {
    from { .rotate(0deg); }
    to { .rotate(360deg); }
  }
  .anti-clockwise () {
    from { .rotate(0deg); }
    to { .rotate(-360deg); }
  }
}


// Animations
.animation(@arguments) {
  -webkit-animation: @arguments;
     -moz-animation: @arguments;
      -ms-animation: @arguments;
       -o-animation: @arguments;
          animation: @arguments;
}

// Box sizing
.box-sizing(@boxmodel: border-box) {
  -webkit-box-sizing: @boxmodel;
     -moz-box-sizing: @boxmodel;
          box-sizing: @boxmodel;
}

// Opacity
.opacity(@opacity) {
  opacity: @opacity / 100;
  filter: ~"alpha(opacity=@{opacity})";
}



// BACKGROUNDS
// --------------------------------------------------------
.base64DataUriBackground (@encode, @type: ~"image/svg+xml") {
    @dataUriPrefix: ~"url(data:@{type};base64,";
    @dataUriSuffix: ~")";
    @b64DataUri: ~`(function(a,b,c){function e(a){a=a.replace(/\r\n/g,'\n');var b='';for(var c=0;c<a.length;c++){var d=a.charCodeAt(c);if(d<128){b+=String.fromCharCode(d)}else if(d>127&&d<2048){b+=String.fromCharCode(d>>6|192);b+=String.fromCharCode(d&63|128)}else{b+=String.fromCharCode(d>>12|224);b+=String.fromCharCode(d>>6&63|128);b+=String.fromCharCode(d&63|128)}}return b}function f(a){var b='';var c,f,g,h,i,j,l;var m=0;a=e(a);while(m<a.length){c=a.charCodeAt(m++);f=a.charCodeAt(m++);g=a.charCodeAt(m++);h=c>>2;i=(c&3)<<4|f>>4;j=(f&15)<<2|g>>6;l=g&63;if(isNaN(f)){j=l=64}else if(isNaN(g)){l=64}b=b+d.charAt(h)+d.charAt(i)+d.charAt(j)+d.charAt(l)}return b}var d='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';return a+f(b)+c})('@{dataUriPrefix}','@{encode}','@{dataUriSuffix}')`;
    background: @b64DataUri;
}
#gradient {
  // useful info: http://stackoverflow.com/questions/7546638/css3-cross-browser-linear-gradient/7546655#7546655
  .vertical (@startColor: #555, @endColor: #333) {
    @svg: ~'<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:@{startColor};stop-opacity=1" /><stop offset="100%" style="stop-color:@{endColor};stop-opacity:1" /></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /></svg>';
    .base64DataUriBackground(@svg);
    background: -moz-linear-gradient(top, @startColor 0%, @endColor 100%); // FF3.6+
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@startColor), color-stop(100%,@endColor)); // Chrome,Safari4+
    background: -webkit-linear-gradient(top, @startColor 0%,@endColor 100%); // Chrome10+,Safari5.1+
    background: -o-linear-gradient(top, @startColor 0%,@endColor 100%); // Opera 11.10+
    background: -ms-linear-gradient(top, @startColor 0%,@endColor 100%); // IE10+
    background: linear-gradient(to bottom, @startColor 0%,@endColor 100%); // W3C
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{startColor}', endColorstr='@{endColor}',GradientType=0 )"; // IE6-8
    :root & {filter:none;}
  }
  .horizontal(@startColor: #555, @endColor: #333) {
    @svg: ~'<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:@{startColor};stop-opacity=1" /><stop offset="100%" style="stop-color:@{endColor};stop-opacity:1" /></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /></svg>';
    .base64DataUriBackground(@svg);
    background: -moz-linear-gradient(left, @startColor 0%, @endColor 100%); // FF3.6+
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,@startColor), color-stop(100%,@endColor)); // Chrome,Safari4+
    background: -webkit-linear-gradient(left, @startColor 0%,@endColor 100%); // Chrome10+,Safari5.1+
    background: -o-linear-gradient(left, @startColor 0%,@endColor 100%); // Opera 11.10+
    background: -ms-linear-gradient(left, @startColor 0%,@endColor 100%); // IE10+
    background: linear-gradient(to right, @startColor 0%,@endColor 100%); // W3C
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{startColor}', endColorstr='@{endColor}',GradientType=1 )"; // IE6-8
    :root & {filter:none;}
  }
}

// Reset filters for IE
.reset-filter() {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}



// CUSTOM JQUERY UI STYLES
// --------------------------------------------------------
#jui {
    .defaultBg(@color1,@color2) {
        .ui-state-default,
        .ui-widget-content .ui-state-default,
        .ui-widget-header .ui-state-default {
            #gradient > .vertical(@color1,@color2);
        }
    }
    .hoverBg(@color1,@color2) {
        .ui-state-hover,
        .ui-widget-content .ui-state-hover,
        .ui-state-focus,
        .ui-widget-content .ui-state-focus {
            #gradient > .vertical(@color1,@color2);
        }
    }
    .activeBg(@color1,@color2) {
        .ui-state-active,
        .ui-widget-content .ui-state-active,
        .ui-widget-header .ui-state-active {
            #gradient > .vertical(@color1,@color2);
        }
    }
    .headerBg(@color1,@color2) {
        .ui-widget-header {
            #gradient > .vertical(@color1,@color2);
        }
    }
}


// COMPONENT MIXINS
// --------------------------------------------------------

// Grid
// ----
@extraSpace: (@gridGutterWidth * 2);
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

.fixed-container() {
  width: @siteWidth;
  margin-left: auto;
  margin-right: auto;
  .clearfix();
}

.columns(@columnSpan: 1) {
  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}

.offset(@columnOffset: 1) {
  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
}

.gridColumn() {
  display: inline;
  float: left;
  margin-left: @gridGutterWidth;
}

// makeColumn can be used to mark any element (e.g., .content-primary)
// as a column without changing markup to .span something
.makeColumn(@columnSpan: 1) {
  .gridColumn();
  .columns(@columnSpan);
}


/* ==============================================
    ATK unsorted styles
   ============================================== */

/* Default columns */
.span1  { .columns(1); }
.span2  { .columns(2); }
.span3  { .columns(3); }
.span4  { .columns(4); }
.span5  { .columns(5); }
.span6  { .columns(6); }
.span7  { .columns(7); }
.span8  { .columns(8); }
.span9  { .columns(9); }
.span10 { .columns(10); }
.span11 { .columns(11); }
.span12 { .columns(12); }
.span13 { .columns(13); }
.span14 { .columns(14); }
.span15 { .columns(15); }
.span16 { .columns(16); }

/* For optional 24-column grid */
.span17 { .columns(17); }
.span18 { .columns(18); }
.span19 { .columns(19); }
.span20 { .columns(20); }
.span21 { .columns(21); }
.span22 { .columns(22); }
.span23 { .columns(23); }
.span24 { .columns(24); }

/* Offset column options */
.atk-row {
  > .offset1  { .offset(1); }
  > .offset2  { .offset(2); }
  > .offset3  { .offset(3); }
  > .offset4  { .offset(4); }
  > .offset5  { .offset(5); }
  > .offset6  { .offset(6); }
  > .offset7  { .offset(7); }
  > .offset8  { .offset(8); }
  > .offset9  { .offset(9); }
  > .offset10 { .offset(10); }
  > .offset11 { .offset(11); }
  > .offset12 { .offset(12); }
}


/* ==============================================
    Features
   ============================================== */
.layout() when(ispercentage(@gridColumnWidth)) {
    .atk-wrapper {.box-sizing();min-width:980px;padding-left:@gridGutterWidth;padding-right:@gridGutterWidth;}
}
.layout() {}
.layout();

.footerSticky() when (@footerSticky = true) {
    html {height:100%;}
    body {min-height:100%;height:100%;}
    body #atk-layout {height:auto !important;height:100%;min-height:100%;}
    body #atk-layout #atk-footer-guard {clear:both;}
    #footer {height:@footerHeight;margin-top:-@footerHeight;}
    #atk-footer-guard {height:@footerHeight+@margin;}
}
.footerSticky() when (@footerSticky = false) { }
.footerSticky();


/* ==============================================
   Loader
   ============================================== */
@-webkit-keyframes rotate-i1 {#rotate > .clockwise;}
   @-moz-keyframes rotate-i1 {#rotate > .clockwise;}
    @-ms-keyframes rotate-i1 {#rotate > .clockwise;}
     @-o-keyframes rotate-i1 {#rotate > .clockwise;}
        @keyframes rotate-i1 {#rotate > .clockwise;}

@-webkit-keyframes rotate-i2 {#rotate > .anti-clockwise;}
   @-moz-keyframes rotate-i2 {#rotate > .anti-clockwise;}
    @-ms-keyframes rotate-i2 {#rotate > .anti-clockwise;}
     @-o-keyframes rotate-i2 {#rotate > .anti-clockwise;}
        @keyframes rotate-i2 {#rotate > .anti-clockwise;}

.loading {
  position: absolute;
  margin: auto;
  z-index: 9999;
  .opacity(70);
  i {
    position: absolute;
    background: url(../images/gear-32x32.png);
    width: 32px;
    height: 32px;
    .transition(linear);
    margin: 35px 27px;
    .animation(rotate-i2 5s infinite);
    &:first-child {
      margin: 10px 10px;
      .animation(rotate-i1 5s infinite);
    }
  }
}

/* ==============================================
    Various ATK Objects
   ============================================== */

/* Wrapper container */
.atk-wrapper { .fixed-container(); }

/* Paginator */
.atk-paginator {
    a, span {font-size:0.9em;text-decoration:none;padding:@padding/4 @padding/2;margin:0;display:inline-block;}
    a.disabled {color:@lightGray;cursor:default;}
    a:hover {color:;}
}
// Paginator (tweaks for grid)
.atk-grid > .atk-paginator { text-align: center; padding-top: @margin; }

/* Growl */
.atk-growl {
    font-weight:bold;
    position:fixed;
    top:@margin*2;
    right:@margin*2;
    z-index:9999;
    .opacity(80);
    >div {
        width:180px;
        margin-top:@margin;
        position:relative;
        &:first-child {margin-top:0;}
        .ui-icon-closethick {.opacity(0);@transition: opacity .2s;.transition(@transition);}
        &:hover {.ui-icon-closethick {.opacity(100);}}
    }
}

/* Notification */
.atk-notification {
    padding:@padding/2;
    position:relative;
    .atk-notification-text {
        padding:0 20px;
        >.ui-icon {position:absolute;top:@padding/1.8;left:@padding/2;}
    }
    >a.ui-icon-closethick {position:absolute;top:@padding/4;right:@padding/4;}
}
.atk-notification {.box-shadow(0 10px 20px @white inset);}
.atk-growl>.atk-notification {
    @shadow: 0 5px 10px fadeout(@shadowColor,60%),0 10px 20px @white inset;
    .box-shadow(@shadow);
}

/* Misc */
.atk-flexy {
    display:table;
    > div {display:table-cell;vertical-align:top;.box-sizing();}
}

.atk-box {
    padding:@padding;
    +.atk-box {margin-top:@margin;}
}
.atk-block {margin-bottom:@margin;}

.atk-buttons>* {margin-left:0.4em;}
.atk-buttons>*:first-child {margin-left:0;}
.atk-sep {color:@lightGray;margin:0 1em;}

