/* MISC */
.ut-clearListOnly{
    list-style: none !important;
    padding: 0 !important;
}

.ut-clearList{
    @extend .ut-clearListOnly;
    
    & > li{
        display: inline-block;
    }
}

.ut-overflowHidden{
    overflow: hidden !important;
}

.ut-noWrap{
    white-space: nowrap !important;
}

.ut-borderBox{
    box-sizing: border-box !important;
}

.ut-newContext{
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ut-inlineBlock{
    display: inline-block !important;
}

.ut-block{
    display: block !important;
}

@for $i from 1 through length($breakpoints) {
    $keys: map-keys($breakpoints); $key: nth($keys, $i); $break: map-get($breakpoints, $key);

    @include breakpoint(max-width $break){
        .ut-inlineBlock#{$key}{
            display: inline-block !important;
        }

        .ut-block#{$key}{
            display: block !important;
        }
    }
}

/* WIDTH */
@mixin fullWidth(){
    width: 100% !important;
}

.ut-fullWidth{ @include fullWidth(); }

@for $i from 1 through length($breakpoints) {
    $keys: map-keys($breakpoints); $key: nth($keys, $i); $break: map-get($breakpoints, $key);

    @include breakpoint(max-width $break){
        .ut-fullWidth#{$key}{ @include fullWidth(); }
    }
}

/* HEIGHT */
@mixin fullHeight(){
    height: 100% !important;
}

.ut-fullHeight{ @include fullHeight(); }

@for $i from 1 through length($breakpoints) {
    $keys: map-keys($breakpoints); $key: nth($keys, $i); $break: map-get($breakpoints, $key);

    @include breakpoint(max-width $break){
        .ut-fullHeight#{$key}{ @include fullHeight(); }
    }
}

/* VERTICAL ALIGNMENT */
@mixin vertAlign($key){
    vertical-align: #{to-lower-case($key)} !important;
}

@each $vert in $vertz{
    .ut-vertAlign#{$vert}{
        @include vertAlign($vert);
    }
    .ut-vertAlignChildren#{$vert}{
        & > *{
            @include vertAlign($vert);
        }
    }
}

@for $i from 1 through length($breakpoints) {
    $keys: map-keys($breakpoints); $key: nth($keys, $i); $break: map-get($breakpoints, $key);

    @each $vert in $vertz{
        @include breakpoint(max-width $break){
            .ut-vertAlign#{$vert}#{$key}{
                @include vertAlign($vert);
            }
            .ut-vertAlignChildren#{$vert}#{$key}{
                & > *{
                    @include vertAlign($vert);
                }
            }
        }
    }
}

/* HORIZONTAL ALIGNMENT */
@mixin textAlign($key){
    text-align: #{to-lower-case($key)} !important;
}

@each $hor in $horz{
    .ut-textAlign#{$hor}{
        @include textAlign($hor);
    }
}

@for $i from 1 through length($breakpoints) {
    $keys: map-keys($breakpoints); $key: nth($keys, $i); $break: map-get($breakpoints, $key);

    @each $hor in $horz{
        @include breakpoint(max-width $break){
            .ut-textAlign#{$hor}#{$key}{
                @include textAlign($hor);
            }
        }
    }
}

/* TABLE */
.ut-tableChildren{
    display: table !important;

    & > *{
        display: table-cell;
    }
}

.ut-tableRowChildren{
    display: table !important;

    & > *{
        display: table-row;
    }
}

.ut-tableFixed{
    table-layout: fixed !important;
}

.ut-tableCell{
    display: table-cell !important;
}

/* MARGIN/PADDING */
$rules: 'padding' 'margin';

@mixin spacing($rule, $break){
    @for $i from 1 through length($spaces) {
        $keys: map-keys($spaces); $key: nth($keys, $i); $size: map-get($spaces, $key);

        .ut-#{$rule}#{$key}#{$break}{
            #{$rule}: $size !important;
        }

        .ut-#{$rule}Vert#{$key}#{$break}{
            #{$rule}-bottom: $size !important;
            #{$rule}-top: $size !important;
        }

        .ut-#{$rule}Horz#{$key}#{$break}{
            #{$rule}-right: $size !important;
            #{$rule}-left: $size !important;
        }

        @each $direction in $directions{
            .ut-#{$rule}#{$direction}#{$key}#{$break}{
                #{$rule}-#{to-lower-case($direction)}: $size !important;
            }
        }
    }
}

@each $rule in $rules{
    @include spacing($rule, null);

    @for $i from 1 through length($breakpoints) {
        $keys: map-keys($breakpoints); $key: nth($keys, $i); $break: map-get($breakpoints, $key);

        @include breakpoint(max-width $break){
            @include spacing($rule, $key);
        }
    }
}

/* SHOW/HIDE */
$rules: 'show' 'hide';

@each $rule in $rules{
    @for $i from 1 through length($breakpoints) {
        $keys: map-keys($breakpoints); $key: nth($keys, $i); $break: map-get($breakpoints, $key);

        @if $rule == 'show'{
            $break: min-width $break + 1;
        } @else {
            $break: max-width $break;
        }

        @include breakpoint($break){
            .ut-#{$rule}#{$key}{
                display: none !important;
            }
        }
    }
}

/* PIN */
@mixin pinMixin($break){
    .ut-relative#{$break}{
        position: relative !important;
    }

    .ut-static#{$break}{
        position: static !important;
    }

    .ut-pin#{$break}, .ut-absolute#{$break}{
        position: absolute !important;
    }

    @for $i from 1 through length($spaces) {
        $keys: map-keys($spaces); $key: nth($keys, $i); $size: map-get($spaces, $key);

        @each $direction in $directions{
            .ut-#{to-lower-case($direction)}#{$key}#{$break}{
                #{to-lower-case($direction)}: $size !important;
            }
        }
    }
}

@include pinMixin(null);

@for $i from 1 through length($breakpoints) {
    $keys: map-keys($breakpoints); $key: nth($keys, $i); $break: map-get($breakpoints, $key);

    @include breakpoint(max-width $break){
        @include pinMixin($key);
    }
}