@import 'variables';
@mixin active-border() {
    border: 1px solid white;
}

@mixin generate-x-position($n) {
    @for $i from 0 through $n {
        &.x-#{$i} {
            left: $grid-size * $i;
        }
    }
}

@mixin generate-y-position($n) {
    @for $i from 0 through $n {
        &.y-#{$i} {
            top: $grid-size * $i;
        }
    }
}
@mixin generate-rows($n) {
    @for $i from 1 through $n {
        &.rows-#{$i} {
            min-height: $grid-size * $i;
            max-height: $grid-size * $i;
            height: $grid-size * $i;
        }
    }
}
@mixin generate-cols($n) {
    @for $i from 1 through $n {
        &.cols-#{$i} {
            width: $grid-size * $i;
        }
    }
}


@mixin generate-racks($n) {
    @for $i from 1 through $n {
        &.rack-u-#{$i} .wrapper {
            height: $u-height * $i;
        }
    }
}

@mixin generate-u($n) {
    @for $i from 1 through $n {
        &.height-u-#{$i} {
            height: $u-height * $i;
        }
    }
}

@mixin generate-position($n, $reverse: false) {
    $attr: 'bottom';
    @if $reverse == true {
        $attr: 'top';
    }
    @for $i from 0 through $n {
        &.position-u-#{$i} {
            #{$attr}: $u-height * ($i - 1);
        }
    }
}

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

@mixin box-sizing($box-sizing) {
    -webkit-box-sizing: $box-sizing;
    -moz-box-sizing: $box-sizing;
    box-sizing: $box-sizing;
}
@mixin display-flex() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
