// Name:            Transition
// Description:     Utilities for transitions
//
// Component:       `ui-transition-*`
//
// Modifiers:       `ui-transition-fade`
//                  `ui-transition-scale-up`
//                  `ui-transition-scale-down`
//                  `ui-transition-slide-top-*`
//                  `ui-transition-slide-bottom-*`
//                  `ui-transition-slide-left-*`
//                  `ui-transition-slide-right-*`
//                  `ui-transition-opaque`
//                  `ui-transition-slow`
//
// Sub-objects:     `ui-transition-toggle`,
//                  `ui-transition-active`
//
// States:          `ui-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
 ========================================================================== */


/* Toggle (Hover + Focus)
 ========================================================================== */

/*
 * 1. Prevent tab highlighting on iOS.
 */

.ui-transition-toggle {
  /* 1 */
  -webkit-tap-highlight-color: transparent;
}

/*
 * Remove outline for `tabindex`
 */

.ui-transition-toggle:focus { outline: none; }


/* Transitions
 ========================================================================== */

/*
 * The toggle is triggered on touch devices by two methods:
 * 1. Using `:focus` and tabindex
 * 2. Using `:hover` and a `touchstart` event listener registered on the document
 *    (Doesn't work on Surface touch devices)
 *
 * Note: Transitions don't work with `ui-postion-center-*` classes because they also use `transform`,
 *       therefore it's recommended to use an extra `div` for the transition.
 */

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

/*
 * Fade
 */

.ui-transition-toggle:hover .ui-transition-fade,
.ui-transition-toggle:focus .ui-transition-fade,
.ui-transition-active.ui-active .ui-transition-fade { opacity: 1; }

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

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

/* Show */
.ui-transition-toggle:hover .ui-transition-scale-up,
.ui-transition-toggle:focus .ui-transition-scale-up,
.ui-transition-active.ui-active .ui-transition-scale-up {
  opacity: 1;
  transform: scale3d(@transition-scale,@transition-scale,1);
}

.ui-transition-toggle:hover .ui-transition-scale-down,
.ui-transition-toggle:focus .ui-transition-scale-down,
.ui-transition-active.ui-active .ui-transition-scale-down {
  opacity: 1;
  transform: scale3d(1,1,1);
}

/*
 * Slide
 */

.ui-transition-slide-top { transform: translateY(-100%); }
.ui-transition-slide-bottom { transform: translateY(100%); }
.ui-transition-slide-left { transform: translateX(-100%); }
.ui-transition-slide-right { transform: translateX(100%); }

.ui-transition-slide-top-small { transform: translateY(-@transition-slide-small-translate); }
.ui-transition-slide-bottom-small { transform: translateY(@transition-slide-small-translate); }
.ui-transition-slide-left-small { transform: translateX(-@transition-slide-small-translate); }
.ui-transition-slide-right-small { transform: translateX(@transition-slide-small-translate); }

.ui-transition-slide-top-medium { transform: translateY(-@transition-slide-medium-translate); }
.ui-transition-slide-bottom-medium { transform: translateY(@transition-slide-medium-translate); }
.ui-transition-slide-left-medium { transform: translateX(-@transition-slide-medium-translate); }
.ui-transition-slide-right-medium { transform: translateX(@transition-slide-medium-translate); }

/* Show */
.ui-transition-toggle:hover [class*='ui-transition-slide'],
.ui-transition-toggle:focus [class*='ui-transition-slide'],
.ui-transition-active.ui-active [class*='ui-transition-slide'] {
  opacity: 1;
  transform: translate(0,0);
}


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

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


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

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


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

.hook-transition-misc;

.hook-transition-misc() {}