/*----------------------------------------------------------------*/
/*  Helpers
/*----------------------------------------------------------------*/
@import "mixins";

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.no-radius {
    @include border-radius(unquote("0 !important"));
}

.no-border {
    border: none !important;
}

.position-relative {
    position: relative;
}

.divider-vertical {
    background: rgba(0, 0, 0, 0.12);
    height: 24px;
    width: 1px;
    margin: 0 8px;
}

.hidden {
    display: none;
    visibility: hidden;
}

[fill-width] {
    min-width: 100%;
}

[fill-height] {
    min-height: 100%;
}

// Images in links
a {

    img {
        display: block;
        outline: none;
    }
}

// Responsive images
img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    border: none;
}

// Background Icon
.background-image-center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    @include transform(translate(-50%, -50%));
}

// Classic vertical align
.align-vertical {

    &:before {
        display: inline-block;
        height: 100%;
        content: '';
        vertical-align: middle;
    }

    .align-vertical-top,
    .align-vertical-middle,
    .align-vertical-bottom {
        display: inline-block;
    }

    .align-vertical-top {
        vertical-align: top;
    }

    .align-vertical-middle {
        vertical-align: middle;
    }

    .align-vertical-bottom {
        vertical-align: bottom;
    }
}

// Padding helpers
// Multiples of 4, Max: 48, Excluding 0 and multiples of 5 and 8
@for $i from 1 through 12 {
    @if ((($i * 4) % 5 != 0) OR (($i * 4) % 8 != 0)) {
        .p-#{$i * 4} {
            padding: #{($i * 4) + 'px'};
        }

        .pt-#{$i * 4} {
            padding-top: #{($i * 4) + 'px'};
        }

        .pr-#{$i * 4} {
            padding-right: #{($i * 4) + 'px'};
        }

        .pb-#{$i * 4} {
            padding-bottom: #{($i * 4) + 'px'};
        }

        .pl-#{$i * 4} {
            padding-left: #{($i * 4) + 'px'};
        }

        .ph-#{$i * 4} {
            padding-left: #{($i * 4) + 'px'};
            padding-right: #{($i * 4) + 'px'};
        }

        .pv-#{$i * 4} {
            padding-top: #{($i * 4) + 'px'};
            padding-bottom: #{($i * 4) + 'px'};
        }
    }
}

// Multiples of 5, max:100
@for $i from 0 through 20 {
    .p-#{$i * 5} {
        padding: #{($i * 5) + 'px'};
    }

    .pt-#{$i * 5} {
        padding-top: #{($i * 5) + 'px'};
    }

    .pr-#{$i * 5} {
        padding-right: #{($i * 5) + 'px'};
    }

    .pb-#{$i * 5} {
        padding-bottom: #{($i * 5) + 'px'};
    }

    .pl-#{$i * 5} {
        padding-left: #{($i * 5) + 'px'};
    }

    .ph-#{$i * 5} {
        padding-left: #{($i * 5) + 'px'};
        padding-right: #{($i * 5) + 'px'};
    }

    .pv-#{$i * 5} {
        padding-top: #{($i * 5) + 'px'};
        padding-bottom: #{($i * 5) + 'px'};
    }
}

// Multiples of 8, Max: 96, Excluding 0 and multiples of 5
@for $i from 1 through 12 {
    @if (($i * 8) % 5 != 0) {
        .p-#{$i * 8} {
            padding: #{($i * 8) + 'px'};
        }

        .pt-#{$i * 8} {
            padding-top: #{($i * 8) + 'px'};
        }

        .pr-#{$i * 8} {
            padding-right: #{($i * 8) + 'px'};
        }

        .pb-#{$i * 8} {
            padding-bottom: #{($i * 8) + 'px'};
        }

        .pl-#{$i * 8} {
            padding-left: #{($i * 8) + 'px'};
        }

        .ph-#{$i * 8} {
            padding-left: #{($i * 8) + 'px'};
            padding-right: #{($i * 8) + 'px'};
        }

        .pv-#{$i * 8} {
            padding-top: #{($i * 8) + 'px'};
            padding-bottom: #{($i * 8) + 'px'};
        }
    }
}

// Margin helpers
// Multiples of 4, Max: 48, Excluding 0 and multiples of 5
@for $i from 1 through 12 {
    @if ((($i * 4) % 5 != 0) OR (($i * 4) % 8 != 0)) {
        .m-#{$i * 4} {
            margin: #{($i * 4) + 'px'};
        }

        .mt-#{$i * 4} {
            margin-top: #{($i * 4) + 'px'};
        }

        .mr-#{$i * 4} {
            margin-right: #{($i * 4) + 'px'};
        }

        .mb-#{$i * 4} {
            margin-bottom: #{($i * 4) + 'px'};
        }

        .ml-#{$i * 4} {
            margin-left: #{($i * 4) + 'px'};
        }

        .mh-#{$i * 4} {
            margin-left: #{($i * 4) + 'px'};
            margin-right: #{($i * 4) + 'px'};
        }

        .mv-#{$i * 4} {
            margin-top: #{($i * 4) + 'px'};
            margin-bottom: #{($i * 4) + 'px'};
        }
    }
}

// Multiples of 5, max:100
@for $i from 0 through 20 {
    .m-#{$i * 5} {
        margin: #{($i * 5) + 'px'};
    }

    .mt-#{$i * 5} {
        margin-top: #{($i * 5) + 'px'};
    }

    .mr-#{$i * 5} {
        margin-right: #{($i * 5) + 'px'};
    }

    .mb-#{$i * 5} {
        margin-bottom: #{($i * 5) + 'px'};
    }

    .ml-#{$i * 5} {
        margin-left: #{($i * 5) + 'px'};
    }

    .mh-#{$i * 5} {
        margin-left: #{($i * 5) + 'px'};
        margin-right: #{($i * 5) + 'px'};
    }

    .mv-#{$i * 5} {
        margin-top: #{($i * 5) + 'px'};
        margin-bottom: #{($i * 5) + 'px'};
    }
}

// Multiples of 8, Max: 96, Excluding 0 and multiples of 5
@for $i from 1 through 12 {
    @if (($i * 8) % 5 != 0) {
        .m-#{$i * 8} {
            margin: #{($i * 8) + 'px'};
        }

        .mt-#{$i * 8} {
            margin-top: #{($i * 8) + 'px'};
        }

        .mr-#{$i * 8} {
            margin-right: #{($i * 8) + 'px'};
        }

        .mb-#{$i * 8} {
            margin-bottom: #{($i * 8) + 'px'};
        }

        .ml-#{$i * 8} {
            margin-left: #{($i * 8) + 'px'};
        }

        .mh-#{$i * 8} {
            margin-left: #{($i * 8) + 'px'};
            margin-right: #{($i * 8) + 'px'};
        }

        .mv-#{$i * 8} {
            margin-top: #{($i * 8) + 'px'};
            margin-bottom: #{($i * 8) + 'px'};
        }
    }
}