// Name:            Animation
// Description:     Utilities for keyframe animations
//
// Component:       `ui-animation-*`
//
// Modifiers:       `ui-animation-fade`
//                  `ui-animation-scale-up`
//                  `ui-animation-scale-down`
//                  `ui-animation-slide-top-*`
//                  `ui-animation-slide-bottom-*`
//                  `ui-animation-slide-left-*`
//                  `ui-animation-slide-right-*`
//                  `ui-animation-kenburns`
//                  `ui-animation-shake`
//                  `ui-animation-stroke`
//                  `ui-animation-reverse`
//                  `ui-animation-fast`
//
// Sub-objects:     `ui-animation-toggle`
//                  `ui-animation-active
//
// States:          `ui-active`
//
// ========================================================================


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

@animation-duration:                            0.5s;
@animation-fade-duration:                       0.8s;
@animation-stroke-duration:                     2s;
@animation-kenburns-duration:                   15s;
@animation-fast-duration:                       0.1s;

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


/* ========================================================================
   Component: Animation
 ========================================================================== */

[class*='ui-animation-'] {
  animation-duration: @animation-duration;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}


/* Animations
 ========================================================================== */

/*
 * Fade
 */

.ui-animation-fade {
  animation-name: ui-fade;
  animation-duration: @animation-fade-duration;
  animation-timing-function: linear;
}

/*
 * Scale
 */

.ui-animation-scale-up { animation-name: ui-fade-scale-02; }
.ui-animation-scale-down { animation-name: ui-fade-scale-18; }

/*
 * Slide
 */

.ui-animation-slide-top { animation-name: ui-fade-top; }
.ui-animation-slide-bottom { animation-name: ui-fade-bottom; }
.ui-animation-slide-left { animation-name: ui-fade-left; }
.ui-animation-slide-right { animation-name: ui-fade-right; }

/*
 * Slide Small
 */

.ui-animation-slide-top-small { animation-name: ui-fade-top-small; }
.ui-animation-slide-bottom-small { animation-name: ui-fade-bottom-small; }
.ui-animation-slide-left-small { animation-name: ui-fade-left-small; }
.ui-animation-slide-right-small { animation-name: ui-fade-right-small; }

/*
 * Slide Medium
 */

.ui-animation-slide-top-medium { animation-name: ui-fade-top-medium; }
.ui-animation-slide-bottom-medium { animation-name: ui-fade-bottom-medium; }
.ui-animation-slide-left-medium { animation-name: ui-fade-left-medium; }
.ui-animation-slide-right-medium { animation-name: ui-fade-right-medium; }

/*
 * Kenburns
 */

.ui-animation-kenburns {
  animation-name: ui-scale-kenburns;
  animation-duration: @animation-kenburns-duration;
}

/*
 * Shake
 */

.ui-animation-shake { animation-name: ui-shake; }

/*
 * SVG Stroke
 * This class is set by `ui-svg="stroke-animation: true"`.
 * Unique animation names and keyfames are defined for each SVG because of different stroke lengths.
 */

.ui-animation-stroke { animation-duration: @animation-stroke-duration; }


/* Direction modifier
 ========================================================================== */

.ui-animation-reverse {
  animation-direction: reverse;
  animation-timing-function: ease-in;
}


/* Duration modifier
 ========================================================================== */

.ui-animation-fast { animation-duration: @animation-fast-duration; }


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

/*
 * The toggle is triggered on touch devices using `:focus` and tabindex
 * `!important` needed to override inline style for SVG stroke animations.
 */

.ui-animation-toggle:not(:hover):not(:focus) [class*='ui-animation-'] { animation-name: none !important; }

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

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

/*
 * Remove outline for `tabindex`
 */

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


/* Toggle (Active)
========================================================================== */

/*
 * Needed to trigger SVG stroke animations with Scrollspy component.
 * `!important` needed to override inline style for SVG stroke animations.
 */

.ui-animation-active:not(.ui-active) [class*='ui-animation-'] {
  visibility: hidden;
  animation-name: none !important;
}


/* Keyframes used by animation classes
 ========================================================================== */

/*
 * Fade
 */

@keyframes ui-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/*
 * Slide Top
 */

@keyframes ui-fade-top {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * Slide Bottom
 */

@keyframes ui-fade-bottom {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * Slide Left
 */

@keyframes ui-fade-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/*
 * Slide Right
 */

@keyframes ui-fade-right {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/*
 * Slide Top Small
 */

@keyframes ui-fade-top-small {
  0% {
    opacity: 0;
    transform: translateY(-@animation-slide-small-translate);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * Slide Bottom Small
 */

@keyframes ui-fade-bottom-small {
  0% {
    opacity: 0;
    transform: translateY(@animation-slide-small-translate);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * Slide Left Small
 */

@keyframes ui-fade-left-small {
  0% {
    opacity: 0;
    transform: translateX(-@animation-slide-small-translate);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/*
 * Slide Right Small
 */

@keyframes ui-fade-right-small {
  0% {
    opacity: 0;
    transform: translateX(@animation-slide-small-translate);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/*
 * Slide Top Medium
 */

@keyframes ui-fade-top-medium {
  0% {
    opacity: 0;
    transform: translateY(-@animation-slide-medium-translate);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * Slide Bottom Medium
 */

@keyframes ui-fade-bottom-medium {
  0% {
    opacity: 0;
    transform: translateY(@animation-slide-medium-translate);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * Slide Left Medium
 */

@keyframes ui-fade-left-medium {
  0% {
    opacity: 0;
    transform: translateX(-@animation-slide-medium-translate);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/*
 * Slide Right Medium
 */

@keyframes ui-fade-right-medium {
  0% {
    opacity: 0;
    transform: translateX(@animation-slide-medium-translate);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/*
 * Scale Up
 */

@keyframes ui-fade-scale-02 {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*
 * Scale Down
 */

@keyframes ui-fade-scale-18 {
  0% {
    opacity: 0;
    transform: scale(1.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*
 * Kenburns
 */

@keyframes ui-scale-kenburns {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}

/*
 * Shake
 */

@keyframes ui-shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-9px); }
  20% { transform: translateX(8px); }
  30% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  50% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
  70% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
  90% { transform: translateX(-1px); }
}


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

.hook-animation-misc;

.hook-animation-misc() {}