.grayscale(@activate : @grayscale) when (@activate = true){
    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    : @font-family-text;
    font-size      : 100%;
    font-style     : inherit;
    font-weight    : inherit;
    margin         : 0;
    position       : static;
    padding        : 0;
    vertical-align : baseline;
    .box-shadow(none);
    .border-radius(0, true);
    .transition(none);

    &:hover, &:focus, {
        .box-shadow(none);
    }
}

// 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();
    }
}

.background(@padding: 10px; @background: @gray-lighter) {
    background : @background;
    padding    : @padding;
    border-top : 1px solid #eee;
    .box-shadow(0 1px 1px #BBB);
    .clearfix-mixin();
}