// Name:            Transition
// Description:     Utilities for transitions
//
// Component:       `uk-transition-*`
//
// Modifiers:       `uk-transition-fade`
//                  `uk-transition-scale-up`
//                  `uk-transition-scale-down`
//                  `uk-transition-slide-top-*`
//                  `uk-transition-slide-bottom-*`
//                  `uk-transition-slide-left-*`
//                  `uk-transition-slide-right-*`
//                  `uk-transition-opaque`
//                  `uk-transition-slow`
//
// Sub-objects:     `uk-transition-toggle`
//
// States:          `uk-hover`
//                  `uk-active`
//
// ========================================================================


// Variables
// ========================================================================

@transition-duration:                           0.3s;

@transition-scale:                              1.1;

@transition-slide-small-translate:              10px;
@transition-slide-medium-translate:             50px;

@transition-slow-duration:                      0.7s;


/* ========================================================================
   Component: Transition
 ========================================================================== */

/*
 * Using multiple selectors to exclude `uk-transition-toggle`
 * Note: Transitions don't work with `uk-postion-center-*` classes because they also use `transform`
 *       Just put the transition in an extra `div`
 */

.uk-transition-fade,
[class*='uk-transition-scale'],
[class*='uk-transition-slide'] {
    -webkit-transition: @transition-duration ease-out;
    transition: @transition-duration ease-out;
    -webkit-transition-property: opacity, transform, filter;
    transition-property: opacity, transform, filter;
}

/*
 * Fade
 */

.uk-transition-fade { opacity: 0; }

.uk-transition-toggle:hover [class*='uk-transition-fade'],
.uk-transition-toggle.uk-hover [class*='uk-transition-fade'] { opacity: 1; }

/*
 * Scale
 * Note: Using `scale3d` for better image rendering
 */

[class*='uk-transition-scale'] { opacity: 0; }

.uk-transition-scale-up {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

.uk-transition-toggle:hover .uk-transition-scale-up,
.uk-transition-toggle.uk-hover .uk-transition-scale-up {
    opacity: 1;
    -webkit-transform: scale3d(@transition-scale,@transition-scale,1);
    transform: scale3d(@transition-scale,@transition-scale,1);
}

.uk-transition-scale-down {
    -webkit-transform: scale3d(@transition-scale,@transition-scale,1);
    transform: scale3d(@transition-scale,@transition-scale,1);
}

.uk-transition-toggle:hover .uk-transition-scale-down,
.uk-transition-toggle.uk-hover .uk-transition-scale-down {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

/*
 * Slide
 */

[class*='uk-transition-slide'] { opacity: 0; }

.uk-transition-slide-top {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

.uk-transition-slide-bottom {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.uk-transition-slide-left {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.uk-transition-slide-right {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.uk-transition-slide-top-small {
    -webkit-transform: translateY(-@transition-slide-small-translate);
    transform: translateY(-@transition-slide-small-translate);
}

.uk-transition-slide-bottom-small {
    -webkit-transform: translateY(@transition-slide-small-translate);
    transform: translateY(@transition-slide-small-translate);
}

.uk-transition-slide-left-small {
    -webkit-transform: translateX(-@transition-slide-small-translate);
    transform: translateX(-@transition-slide-small-translate);
}

.uk-transition-slide-right-small {
    -webkit-transform: translateX(@transition-slide-small-translate);
    transform: translateX(@transition-slide-small-translate);
}

.uk-transition-slide-top-medium {
    -webkit-transform: translateY(-@transition-slide-medium-translate);
    transform: translateY(-@transition-slide-medium-translate);
}

.uk-transition-slide-bottom-medium {
    -webkit-transform: translateY(@transition-slide-medium-translate);
    transform: translateY(@transition-slide-medium-translate);
}

.uk-transition-slide-left-medium {
    -webkit-transform: translateX(-@transition-slide-medium-translate);
    transform: translateX(-@transition-slide-medium-translate);
}

.uk-transition-slide-right-medium {
    -webkit-transform: translateX(@transition-slide-medium-translate);
    transform: translateX(@transition-slide-medium-translate);
}

/* Hover */
.uk-transition-toggle:hover [class*='uk-transition-slide'],
.uk-transition-toggle.uk-hover [class*='uk-transition-slide'] {
    opacity: 1;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
}


/* Opacity modifier
========================================================================== */

.uk-transition-opaque { opacity: 1; }


/* Duration modifiers
========================================================================== */

.uk-transition-slow { transition-duration: @transition-slow-duration; }


// Hooks
// ========================================================================

.hook-transition-misc;

.hook-transition-misc() {}