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

@mixin fit-content {
    width: -moz-fit-content;
    width: fit-content;
}

@mixin transition($type) {
    transition: $type;
    -webkit-transition: $type;
    -moz-transition: $type;
    -ms-transition: $type;
}

@mixin flex-direction($direction) {
    -ms-flex-direction: $direction;
    flex-direction: $direction;
}

@mixin align-items($align) {
    -webkit-box-align: $align;
    -ms-flex-align: $align;
    align-items: $align;
}

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

// rotate
@mixin rotate ($deg) {
    @include transform(rotate(#{$deg}deg));
}

// scale
@mixin scale($scale) {
    @include transform(scale($scale));
}

// translate
@mixin translate ($x, $y) {
    @include transform(translate($x, $y));
}

// skew
@mixin skew ($x, $y) {
    @include transform(skew(#{$x}deg, #{$y}deg));
}

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

//col
@mixin own-col {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: ($grid-gutter-width * 0.5);
    padding-left: ($grid-gutter-width * 0.5);
}

//col-xx-xx
@mixin own-col-width($infix, $size) {
    @include media-breakpoint-up($infix) {
        flex: 0 0 percentage(($size / 12));
        max-width: percentage(($size / 12));
    }
}

//no-select
@mixin no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}