/*-------------------------------------------------------------------------------------------------------------

                    Title:          SASS library and Style Guide for Akvo Flow dashboard.
                    Author:         Loic Sans, loic@akvo.org


-------------------------------------------------------------------------------------------------------------*/

/*  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  PLEASE NEVER EDIT main.css directly  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!  */

$bodyFont: "Helvetica Neue", Helvetica, Arial, sans-serif;
$titleFont: "Helvetica Neue", Helvetica, Arial, sans-serif;

$akvoFlow: rgb(226, 124, 0);
$akvoRsr: rgb(39, 170, 225);
$akvoLumen: rgb(39, 170, 225);

$primaryColor: $akvoFlow;

$akvoPurple: rgb(44, 42, 116);
$akvoBlack: rgb(32, 32, 36);
$akvoFlowOrange: rgb(226, 124, 0);

$akvoLightBlue: rgb(39, 170, 225);
$flowAnchorLink: rgb(74, 177, 207);
$flowAnchorLinkHover: rgb(226, 124, 0);

$midGrey: rgb(153, 153, 153);
$akvoDarkBlue: rgb(57, 102, 128);
$linkColor: rgb(107, 134, 141);
$akvoRed: #C81600;
$akvoRed2: #ef4136;

$akvoGolden: #c49a6c;
$yellowTableHead: rgb(245, 200, 43);

$projectBackground: rgb(56, 69, 74);
$projectTopBackground: rgb(55, 67, 72);
$projectTopBackgroundLighter: rgb(53, 78, 90);

$monitorGreen: rgb(0, 167, 157);

$lightGrey: rgb(232, 232, 232);
$darkGrey: rgb(58, 58, 58);
$tableHeaderGrey: rgb(84, 83, 85);

$navCurrent: #F7F2E5;

$blackOpac: rgba(0, 0, 0, 0.1);
$green: #8DC63F;

@mixin offSet($marginLeft, $marginRight) {
    margin-left: $marginLeft;
    margin-right: $marginRight;
}

@mixin border-radius($property) {
    -moz-border-radius: $property;
    -o-border-radius: $property;
    -webkit-border-radius: $property;
    border-radius: $property;
}

@mixin box-shadow($boxshadow...) {
    -moz-box-shadow: $boxshadow;
    -o-box-shadow: $boxshadow;
    -webkit-box-shadow: $boxshadow;
    box-shadow: $boxshadow;
}

@mixin background-size($backgroundSize...) {
    -moz-background-size: $backgroundSize;
    -o-background-size: $backgroundSize;
    -webkit-background-size: $backgroundSize;
    background-size: $backgroundSize;
}

@mixin transition($transitonProperties) {
    -moz-transition: $transitonProperties;
    -o-transition: $transitonProperties;
    -webkit-transition: $transitonProperties;
    transition: $transitonProperties;
}

@mixin noWrapTxt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin opacity($opacity) {
    opacity: $opacity;

    $opacity-ie: $opacity * 100;

    filter: alpha(opacity = $opacity-ie);

    //IE8
}

$width-small: 768px;
$width-medium: 992px;
$width-large: 1200px;

@mixin responsive($width) {
    @if $width == wide-screens {
        @media only screen and (min-width: $width-large) {
            @content;
        }
    }
    @else if $width == medium-screens {
        @media only screen and (min-width: $width-medium) {
            @content;
        }
    }
    @else if $width == small-screens {
        @media only screen and (min-width: $width-small) {
            @content;
        }
    }
    @else if $width == wide-max-screens {
        @media only screen and (max-width: $width-large) {
            @content;
        }
    }
    @else if $width == medium-max-screens {
        @media only screen and (max-width: $width-medium) {
            @content;
        }
    }
    @else if $width == small-max-screens {
        @media only screen and (max-width: $width-small) {
            @content;
        }
    }
}

@mixin placeholder-color($color) {
    &.placeholder {
        color: $color;
    }

    &:-moz-placeholder {
        color: $color;
    }

    &::-webkit-input-placeholder {
        color: $color;
    }

    &:-ms-input-placeholder {
        color: $color;
    }

    &::-moz-placeholder {
        color: $color;
    }

    &::-moz-placeholder {
        /* Firefox 19+ */
        color: $color;
    }
}

@mixin flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

@mixin flex($values) {
    -webkit-box-flex: $values;
    -moz-box-flex: $values;
    -webkit-flex: $values;
    -ms-flex: $values;
    flex: $values;
}

@mixin order($val) {
    -webkit-box-ordinal-group: $val;
    -moz-box-ordinal-group: $val;
    -ms-flex-order: $val;
    -webkit-order: $val;
    order: $val;
}

@mixin button($btnColor) {
    /* use @extend .button on any element ( a or button) or use directly in markup class="button" */
    display: inline-block;
    padding: 5px 8px;
    background-color: $btnColor;
    color: white !important;
    font-size: 0.95em;

    @include border-radius(3px);

    border: 1px solid transparent;
    text-align: center;

    &:hover {
        background: darken($btnColor, 10%);
        color: white;
    }

    &.disabled {
        cursor: not-allowed;
        background-color: rgba(128, 128, 128, 0.1) !important;
        color: rgba(128, 128, 128, 0.4) !important;
        border: 1px solid transparent;

        &:hover {
            cursor: not-allowed;
            background-color: rgba(128, 128, 128, 0.1) !important;
            color: rgba(128, 128, 128, 0.4) !important;
            border: 1px solid transparent;
        }
    }
}

@mixin smallButton($btnColor) {
    @include button($btnColor);

    font-size: 0.8em;
    padding: 3px 6px;
}

@mixin btnOutline($btnColor) {
    @include button($btnColor);

    background-color: transparent;
    color: $flowAnchorLink !important;
    border: 1px solid $flowAnchorLink;

    &:hover {
        color: white !important;
        border: none;
        border: 1px solid $flowAnchorLink;
        cursor: pointer;
    }

    &.disabled {
        background-color: transparent;
        cursor: not-allowed;
        pointer-events: none;
        color: rgba(74, 177, 207, 0.2) !important;
        border: 1px solid rgba(74, 177, 207, 0.2);
        border-radius: 3px;

        &:hover {
            cursor: not-allowed;
            color: rgba(74, 177, 207, 0.2) !important;
            border: 1px solid rgba(74, 177, 207, 0.2);
        }
    }
}