.image-grayscale(){
    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+
        & when (@ie) and (@ie9){
            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;
}

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

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

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

        & when (@side = top-left), (@side = left){
            border-bottom-color : transparent !important;
            border-right-color  : transparent !important;
        }
        & when (@side = top-right), (@side = bottom){
            border-bottom-color : transparent !important;
            border-left-color   : transparent !important;
        }
        & when (@side = bottom-left), (@side = top){
            border-top-color   : transparent !important;
            border-right-color : transparent !important;
        }
        & when (@side = bottom-right), (@side = right){
            border-top-color  : transparent !important;
            border-left-color : transparent !important;
        }

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

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

//Scroll bar
.scroll-bar(
    @scroll-bar-size: 15px;
    @scroll-bar-frontground-color: #c1c1c1;
    @scroll-bar-background-color: #f1f1f1;
    @scroll-bar-border-radius: 0;

) 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;
        // height: @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;
        border: 1px solid @scroll-bar-background-color;
    }
}