@import "variables";

@mixin networkPrimaryBG($property) {
    .network-btc & {
        #{$property}: $networkBTCBtnPrimaryBG;
    }

    .network-bcc & {
        #{$property}: $networkBCCBtnPrimaryBG;
    }
}

@mixin networkPrimaryBGActive($property) {
    .network-btc & {
        #{$property}: $networkBTCBtnPrimaryBGActive;
    }

    .network-bcc & {
        #{$property}: $networkBCCBtnPrimaryBGActive;
    }
}

@mixin networkPrimaryDark($property) {
    .network-btc & {
        #{$property}: $networkBTCPrimaryDark;
    }

    .network-bcc & {
        #{$property}: $networkBCCPrimaryDark;
    }
}

@mixin circleButton($size: 100%, $color: #ccc, $bg: #fff, $borderStyle: 2px solid $color, $shadow: 0 3px 5px rgba(0, 0, 0, 0.15)) {
    width: $size;
    height: $size;
    border-radius: $size;
    border: $borderStyle;
    background: $bg;
    box-shadow: $shadow;

    transition: background-color 0.15s ease-in-out;
    &.activated {
        color: $bg;
        background: rgba($color, 0.9);
    }
}

@mixin squareButton($color: #999, $bg: #fff, $borderStyle: 2px solid $color, $shadow: $app-default-shadow) {
    width: 10rem;
    font-size: 17px;
    border: $borderStyle;
    box-shadow: $shadow;
    color: darken($color, 5%);
    background: rgba($bg, 0.9);

    transition: background-color 0.15s ease-in-out;
    &.activated {
        color: $bg;
        background: rgba($color, 0.9);
    }
}

@mixin transform($transforms) {
    -moz-transform: $transforms;
    -o-transform: $transforms;
    -ms-transform: $transforms;
    -webkit-transform: $transforms;
    transform: $transforms;
}

// Flexbox Mixins
// --------------------------------------------------
// http://philipwalton.github.io/solved-by-flexbox/
// https://github.com/philipwalton/solved-by-flexbox

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

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

@mixin flex-direction($value: row) {
    @if $value == row-reverse {
        -webkit-box-direction: reverse;
        -webkit-box-orient: horizontal;
    } @else if $value == column {
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
    } @else if $value == column-reverse {
        -webkit-box-direction: reverse;
        -webkit-box-orient: vertical;
    } @else {
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
    }
    -webkit-flex-direction: $value;
    -moz-flex-direction: $value;
    -ms-flex-direction: $value;
    flex-direction: $value;
}

@mixin flex-wrap($value: nowrap) {
    // No Webkit Box fallback.
    -webkit-flex-wrap: $value;
    -moz-flex-wrap: $value;
    @if $value == nowrap {
        -ms-flex-wrap: none;
    } @else {
        -ms-flex-wrap: $value;
    }
    flex-wrap: $value;
}

@mixin flex($fg: 1, $fs: null, $fb: null) {
    -webkit-box-flex: $fg;
    -webkit-flex: $fg $fs $fb;
    -moz-box-flex: $fg;
    -moz-flex: $fg $fs $fb;
    -ms-flex: $fg $fs $fb;
    flex: $fg $fs $fb;
}

@mixin flex-flow($values: (row nowrap)) {
    // No Webkit Box fallback.
    -webkit-flex-flow: $values;
    -moz-flex-flow: $values;
    -ms-flex-flow: $values;
    flex-flow: $values;
}

@mixin align-items($value: stretch) {
    @if $value == flex-start {
        -webkit-box-align: start;
        -ms-flex-align: start;
    } @else if $value == flex-end {
        -webkit-box-align: end;
        -ms-flex-align: end;
    } @else {
        -webkit-box-align: $value;
        -ms-flex-align: $value;
    }
    -webkit-align-items: $value;
    -moz-align-items: $value;
    align-items: $value;
}

@mixin align-self($value: auto) {
    -webkit-align-self: $value;
    -moz-align-self: $value;
    @if $value == flex-start {
        -ms-flex-item-align: start;
    } @else if $value == flex-end {
        -ms-flex-item-align: end;
    } @else {
        -ms-flex-item-align: $value;
    }
    align-self: $value;
}

@mixin align-content($value: stretch) {
    -webkit-align-content: $value;
    -moz-align-content: $value;
    @if $value == flex-start {
        -ms-flex-line-pack: start;
    } @else if $value == flex-end {
        -ms-flex-line-pack: end;
    } @else {
        -ms-flex-line-pack: $value;
    }
    align-content: $value;
}

@mixin justify-content($value: stretch) {
    @if $value == flex-start {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
    } @else if $value == flex-end {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
    } @else if $value == space-between {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
    } @else {
        -webkit-box-pack: $value;
        -ms-flex-pack: $value;
    }
    -webkit-justify-content: $value;
    -moz-justify-content: $value;
    justify-content: $value;
}

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

// Indents
@mixin make-inner-indents() {
    @for $i from 1 through $indent-amount-of-steps {
        @include inner-indent($i);
    }
}

@mixin inner-indent($i) {
    @include inner-indent-top($i, $indent-step);
    @include inner-indent-right($i, $indent-step);
    @include inner-indent-bottom($i, $indent-step);
    @include inner-indent-left($i, $indent-step);
}

@mixin inner-indent-top($i, $indent) {
    .iit-#{$i * $indent} { padding-top: $i * $indent * 1px; }
}

@mixin inner-indent-right($i, $indent) {
    .iir-#{$i * $indent} { padding-right: $i * $indent * 1px; }
}

@mixin inner-indent-bottom($i, $indent) {
    .iib-#{$i * $indent} { padding-bottom: $i * $indent * 1px; }
}

@mixin inner-indent-left($i, $indent) {
    .iil-#{$i * $indent} { padding-left: $i * $indent * 1px; }
}
