.grayscale(@activate : @grayscale) when (@activate){
    img{
        filter         : url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter     id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); // Firefox 3.5+
        filter         : gray; // IE6-9
        -webkit-filter : grayscale(1); // Google Chrome, Safari 6+ & Opera 15+
        .transition;
    }

    &:hover img{
        filter         : none;
        -webkit-filter : grayscale(0);
    }
}

.reset-style(
    @float          : none;
    @width          : auto;
    @height         : auto;
    @background     : transparent;
    @border         : 0 none;
    @color          : inherit;
    @font-family    : inherit;
    @font-size      : medium;
    @font-style     : inherit;
    @font-weight    : inherit;
    @margin         : 0;
    @position       : static;
    @padding        : 0;
    @vertical-align : baseline;
    @box-shadow     : none;
    @box-shadow     : none;
    @border-radius  : 0;
    @transition     : none;
) {
    float          : @float;
    width          : @width;
    height         : @height;
    background     : @background;
    border         : @border;
    color          : @color;
    font-family    : @font-family;
    font-size      : @font-size;
    font-style     : @font-style;
    font-weight    : @font-weight;
    margin         : @margin;
    padding        : @padding;
    position       : @position;
    vertical-align : @vertical-align;
    .box-shadow(@box-shadow);
    .border-radius(@border-radius, true);
    .transition(@transition);
}
.reset-this(
    @animation             : none;
    @animation-fill-mode   : none;
    @animation-play-state  : running;
    @backface-visibility   : visible;
    @background            : 0;
    @background-clip       : border-box;
    @background-origin     : padding-box;
    @background-size       : ~'auto auto';
    @border                : 0;
    @border-collapse       : separate;
    @border-image          : none;
    @border-radius         : 0;
    @border-spacing        : 0;
    @bottom                : auto;
    @box-shadow            : none;
    @box-sizing            : content-box;
    @caption-side          : top;
    @clear                 : none;
    @clip                  : auto;
    @color                 : inherit;
    @columns               : auto;
    @column-gap            : normal;
    @column-rule           : ~'medium none currentColor';
    @content               : normal;
    @counter-increment     : none;
    @counter-reset         : none;
    @cursor                : auto;
    @direction             : ltr;
    @display               : inline;
    @empty-cells           : show;
    @float                 : none;
    @font                  : normal;
    @font-family           : inherit;
    @font-size             : medium;
    @font-style            : normal;
    @font-variant          : normal;
    @font-weight           : normal;
    @height                : auto;
    @hyphens               : none;
    @left                  : auto;
    @letter-spacing        : normal;
    @line-height           : normal;
    @list-style            : none;
    @margin                : 0;
    @max-height            : none;
    @max-width             : none;
    @min-height            : 0;
    @min-width             : 0;
    @opacity               : 1;
    @outline               : 0;
    @overflow              : visible;
    @padding               : 0;
    @page-break-after      : auto;
    @page-break-before     : auto;
    @page-break-inside     : auto;
    @perspective           : none;
    @perspective-origin    : ~'50% 50%';
    @position              : static;
    @quotes                : ~"'\201C' '\201D' '\2018' '\2019'";
    @right                 : auto;
    @table-layout          : auto;
    @text-align            : inherit;
    @text-decoration       : none;
    @text-indent           : 0;
    @text-shadow           : none;
    @text-transform        : none;
    @top                   : auto;
    @transform             : none;
    @transform-style       : flat;
    @transition            : none;
    @unicode-bidi          : normal;
    @vertical-align        : baseline;
    @visibility            : visible;
    @white-space           : normal;
    @width                 : auto;
    @word-spacing          : normal;
    @z-index               : auto;
) {
    animation             : @animation;
    animation-fill-mode   : @animation-fill-mode;
    animation-play-state  : @animation-play-state;
    backface-visibility   : @backface-visibility;
    background            : @background;
    background-clip       : @background-clip;
    background-origin     : @background-origin;
    background-size       : @background-size;
    border                : @border;
    border-collapse       : @border-collapse;
    border-image          : @border-image;
    .border-radius(@border-radius);
    border-spacing        : @border-spacing;
    bottom                : @bottom;
    .box-shadow(@box-shadow);
    .box-sizing(@box-sizing);
    caption-side          : @caption-side;
    clear                 : @clear;
    clip                  : @clip;
    color                 : @color;
    .columns(@columns);
    .column-gap(@column-gap);
    .column-rule(@column-rule);
    content               : @content;
    counter-increment     : @counter-increment;
    counter-reset         : @counter-reset;
    cursor                : @cursor;
    direction             : @direction;
    display               : @display;
    empty-cells           : @empty-cells;
    float                 : @float;
    font                  : @font;
    font-family           : @font-family;
    font-size             : @font-size;
    font-style            : @font-style;
    font-variant          : @font-variant;
    font-weight           : @font-weight;
    height                : @height;
    hyphens               : @hyphens;
    left                  : @left;
    letter-spacing        : @letter-spacing;
    line-height           : @line-height;
    list-style            : @list-style;
    margin                : @margin;
    max-height            : @max-height;
    max-width             : @max-width;
    min-height            : @min-height;
    min-width             : @min-width;
    .opacity(@opacity);
    outline               : @outline;
    overflow              : @overflow;
    padding               : @padding;
    page-break-after      : @page-break-after;
    page-break-before     : @page-break-before;
    page-break-inside     : @page-break-inside;
    perspective           : @perspective;
    perspective-origin    : @perspective-origin;
    position              : @position;
    quotes                : @quotes;
    right                 : @right;
    table-layout          : @table-layout;
    text-align            : @text-align;
    text-decoration       : @text-decoration;
    text-indent           : @text-indent;
    text-shadow           : @text-shadow;
    text-transform        : @text-transform;
    top                   : @top;
    .transform(@transform);
    transform-style       : @transform-style;
    .transition(@transition);
    unicode-bidi          : @unicode-bidi;
    vertical-align        : @vertical-align;
    visibility            : @visibility;
    white-space           : @white-space;
    width                 : @width;
    word-spacing          : @word-spacing;
    z-index               : @z-index;
}

// Less Long Shadow v1.0
// Open sourced under MIT license by @zensimilia.
// Long shadow for text
.longShadow(@color; @size; @spread: 100; @flag: 1; @tmp: '') when (@size > 0){
    @percent: round(@flag / @size * 100) * @spread;
    @shadowColor: fade(@color, @percent);
    @shadow: ~"@{size}px @{size}px 0px @{shadowColor}";
    @ends: ~"@{shadow}, @{tmp}";
    @shadowString: ~"@{ends} 0px 0px 0px #000";

    .longShadowLoop(@string; @index) when (@index < 1){
        text-shadow : @string;
    }

    .longShadowLoop(@shadowString; @size - 1);
    .longShadow(@color; @size - 1; @spread; @flag + 1; @ends);
}

// Long shadow
.longShadowBox(@color; @size; @spread: 1; @flag: 1; @tmp: '') when (@size > 0){
    @percent: round(@flag / @size * 100) * @spread;
    @shadowColor: fade(@color, @percent);
    @shadow: ~"@{size}px @{size}px 0 0 @{shadowColor}";
    @ends: ~"@{shadow}, @{tmp}";
    @shadowString: ~"@{ends} 0px 0px 0 0 #000";

    .longShadowLoop(@string; @index) when (@index < 1){
        -webkit-box-shadow : @string;
        -moz-box-shadow    : @string;
        box-shadow         : @string;
    }

    .longShadowLoop(@shadowString; @size - 1);
    .longShadowBox(@color; @size - 1; @spread; @flag + 1; @ends);
}

// Arrow
.arrow-border(@side : bottom; @position : center; @color : @brand-primary; @size : 10px; @indent:0) {
    position : relative;

    &:after{
        content      : '';
        position     : absolute;
        border-width : @size;
        border-style : solid;
        border-color : transparent;
        margin       : auto;
        width        : 0;
        height       : 0;

        & when (@side = right){
            border-left-color : @color;
            left              : 100%;
            right             : auto;
        }

        & when (@side = left){
            border-right-color : @color;
            right              : 100%;
            left               : auto;
        }

        & when (@side = top), (@side = top-right), (@side = top-left){
            border-bottom-color : @color;
            bottom              : 100%;
            top                 : auto;
        }

        & when (@side = bottom), (@side = bottom-left), (@side = bottom-right){
            border-top-color : @color;
            top              : 100%;
            bottom           : auto;
        }
        & when (@side = top-left), (@side = bottom-left){
            border-left-color : @color;
        }
        & when (@side = top-right), (@side = bottom-right){
            border-right-color : @color;
        }

        .position() when (@position = center) and (@side = left), (@side = right){
            bottom : 0;
            top    : 0;
        }
        .position() when (@position = center) and (@side = top), (@side = bottom), (@side = top-right), (@side = top-left), (@side = bottom-right), (@side = bottom-left){
            left  : 0;
            right : 0;
        }
        .position() when (@position = left){
            right : auto;
            left  : 0 + @indent;
        }
        .position() when (@position = right){
            left  : auto;
            right : 0 + @indent;
        }
        .position() when (@position = top){
            bottom : auto;
            top    : 0 + @indent;
        }
        .position() when (@position = bottom){
            top    : auto;
            bottom : 0 + @indent;
        }
        .position();
    }
}

//Scroll bar
.scroll-bar(
    @scroll-bar-size: 5px;
    @scroll-bar-frontground-color: #ccc;
    @scroll-bar-background-color: #666;
    @scroll-bar-border-radius:10px;

) when (@custom-scroll-bar = true ){
    // ie
    scrollbar-base-color: #C0C0C0;
    scrollbar-3dlight-color: #C0C0C0;
    scrollbar-highlight-color: #C0C0C0;
    scrollbar-track-color: #EBEBEB;
    scrollbar-arrow-color: black;
    scrollbar-shadow-color: #C0C0C0;
    scrollbar-dark-shadow-color: #C0C0C0;

    // chrome
    //====== scroll line width
    &::-webkit-scrollbar {
        width: @scroll-bar-size;
    }

    //==== scroll line background
    &::-webkit-scrollbar-track {
        background: @scroll-bar-background-color;
        .border-radius(@scroll-bar-border-radius);
    }

    //==== scroll thumb background
    &::-webkit-scrollbar-thumb {
        .border-radius(@scroll-bar-border-radius);
        background: @scroll-bar-frontground-color;
    }
}