// ================================================
// ================  Mixins =======================
// ================================================

// Utilities
// ------------------------------------------------------------------

@mixin o-position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto){
    position: absolute;
    top: $top;
    left: $left;
    bottom: $bottom;
    right: $right;
}

@mixin o-transform-origin($x: 50%, $y: 50%, $z: 0){
    -ms-transform-origin: $x $y $z;
    -webkit-transform-origin: $x $y $z;
    -moz-transform-origin: $x $y $z;
    transform-origin: $x $y $z;
}

@mixin o-transition($property: all, $duration: 0s, $timing-function: ease, $transition-delay: 0s){
    -webkit-transition: $property $duration $timing-function $transition-delay;
    -moz-transition: $property $duration $timing-function $transition-delay;
    -o-transition: $property $duration $timing-function $transition-delay;
    transition: $property $duration $timing-function $transition-delay;
}

// Backgrounds
// ------------------------------------------------------------------

@mixin o-gradient($deg: 99deg , $startColor: $o-violet, $endColor: #62495B, $startOffset: 10%, $endOffset: 90%){
    background: mix($startColor, $endColor);
    background: -webkit-linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
    background: -moz-linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
    background: -ms-linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
    background: -o-linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
    background: linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
}

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

//-- add icon

@mixin o-inline-icon($icon-content, $margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $fw_regular) {
    content: '#{$icon-content}';
    font-family: 'icomoon' !important;
    @include font-size($font-size);
    font-weight: $font-weight;
    vertical-align: $v-align;
    margin: $margin;
}

//-- fix scroll issue

@mixin o-scroll-padding() {
    content: '';
    display: block;
    width: 0;
    height: 0;
    padding-top:  calc(#{$o-headers-height} + 10px);
    margin-top:  -$o-headers-height - 10px;
}

@mixin o-easter-egg($width: 100%, $height: 100%, $img: 'img/poule.svg' ){
    position: relative;
        // Easter Egg on hover 5s
        &:after {
            content: '';
            display: block;
            width: $width;
            height: $height;
            @include o-position-absolute(auto, 0, 0, 0);
            background-image: url('#{$img}');
            background-color: $white;
            background-repeat: no-repeat;
            opacity: 0;
            visibility: hidden;
            @include o-transition(all, .5s, ease-out, .5s);
        }
        &:hover:after {
                opacity: 1;
                visibility: visible;
                @include o-transition(all, .5s, ease-in, 5s);
        }
}

@mixin o-content-tab-selected {
    font-weight: $fw_bold;
    background: $doc-paper;
    border-bottom: 1px solid $doc-paper;
    border-left: 1px solid $gray-light;
    border-right: 1px solid $gray-light;
}