.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;
    @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-top-color   : transparent !important;
            border-right-color : transparent !important;
        }
        & when (@side = top-right), (@side = bottom) {
            border-top-color  : transparent !important;
            border-left-color : transparent !important;
        }
        & when (@side = bottom-left), (@side = top) {
            border-bottom-color : transparent !important;
            border-right-color  : transparent !important;
        }
        & when (@side = bottom-right), (@side = right) {
            border-bottom-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: 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;
        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;
    }
}