/*----------------------------------------------------------------*/
/*  Mixins
/*----------------------------------------------------------------*/

// Maintain aspect ratio
@mixin maintain-aspect-ratio($widthRatio, $heightRatio, $padding, $contentClass) {
    position: relative;

    &:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: ($heightRatio / $widthRatio) * 100%;
    }

    > .#{$contentClass} {
        position: absolute;
        top: $padding;
        left: $padding;
        right: $padding;
        bottom: $padding;
    }
}

// Custom scrollbar
@mixin custom-scrollbar {
    &::-webkit-scrollbar {
        height: 6px;
        width: 10px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #a9a9a9;
        outline: 1px solid #999;

        &:hover {
            background-color: #6e6e6e;
            outline: 1px solid #333;
        }
    }

    &::-webkit-scrollbar-track {
        @include box-shadow(inset 0 0 6px rgba(0,0,0,.3));        
    }
}

// border-radius browser compatibility
@mixin border-radius($value) {
    -webkit-border-radius: #{$value};
    -moz-border-radius: #{$value};
    border-radius: #{$value};
}

// transition browser compatibility
@mixin transition($value) {
    -webkit-transition: #{$value};
    -moz-transition: #{$value};
    -o-transition: #{$value};
    transition: #{$value};
}

// transform browser compatibility
@mixin transform($value) {
    -webkit-transform: #{$value};
    -moz-transform: #{$value};
    -ms-transform: #{$value};
    -o-transform: #{$value};
    transform: #{$value};
}

// transform-style browser compatibility
@mixin transform-style($value) {
    -webkit-transform-style: #{$value};
    transform-style: #{$value};
}

// box-shadow browser compatibility
@mixin box-shadow($value) {
    -webkit-box-shadow: #{$value};
    box-shadow: #{$value};
}

// backface-visibility browser compatibility
@mixin backface-visibility($value) {
    -webkit-backface-visibility: #{$value};
    -moz-backface-visibility: #{$value};
    -o-backface-visibility: #{$value};
    backface-visibility: #{$value};
}

// appearance browser compatibility
@mixin appearance($value) {
    -webkit-appearance: #{$value};
    -moz-appearance: #{$value};
    appearance: #{$value};
}

// align-items browser compatibility
@mixin align-items($value) {
    -webkit-align-items: #{$value};
    -webkit-box-align: #{$value};
    align-items: #{$value};
}

// user-select browser compatibility
@mixin user-select($value) {
    -webkit-user-select: #{$value};
    -moz-user-select: #{$value};
    -ms-user-select: #{$value};
    user-select: #{$value};
}

// animation browser compatibility
@mixin animation($value) {
    -webkit-animation: #{$value};
    -moz-animation: #{$value};
    -o-animation: #{$value};
    animation: #{$value};
}

// animation-delay browser compatibility
@mixin animation-delay($value) {
    -webkit-animation-delay: #{$value};
    -moz-animation-delay: #{$value};
    -o-animation-delay: #{$value};
    animation-delay: #{$value};
}