/*
 * Copyright 2013 The Polymer Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style
 * license that can be found in the LICENSE file.
 */
 
/* Styling to apply to component children based on conditional
host styling. This should be removed when the ::shadow pseudo 
selector is available. */
/*
  TODO(sorvell): include a reasonable set of default panel
  animations.
*/
/*
TODO(sorvell): remove when this issue is addressed:
  https://www.w3.org/Bugs/Public/show_bug.cgi?id=21389

*/
g-panels > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

g-panels > g-panels {
  position: absolute;
}

g-panels > .transition {
  -webkit-transition: all 0.218s ease-in-out;
  transition: all 0.218s ease-in-out;
}

g-panels > .animate {
  -webkit-animation-duration: 0.218s;
  -webkit-animation-fill-mode: both;
  animation-duration: 0.218s;
  animation-fill-mode: both;
}

/* fade */
g-panels > .panels-ascending-from, g-panels > .panels-descending-from {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-fadeOut;
  animation: 0.218s both;
  animation-name: g-panels-fadeOut;
}
g-panels > .panels-ascending-to, g-panels > .panels-descending-to {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-fadeIn;
  animation: 0.218s both;
  animation-name: g-panels-fadeIn;
}

/*
TODO(sorvell): remove host conditional styling when this issue is addressed:
  https://www.w3.org/Bugs/Public/show_bug.cgi?id=21390
*/
g-panels-hslide > .panels-ascending-from {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-slideLeft;
  animation: 0.218s both;
  animation-name: g-panels-slideLeft;
}
.g-panels-hslide > .panels-ascending-to {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-slideFromRight;
  animation: 0.218s both;
  animation-name: g-panels-slideFromRight;
}
.g-panels-hslide > .panels-descending-from {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-slideRight;
  animation: 0.218s both;
  animation-name: g-panels-slideRight;
}
.g-panels-hslide > .panels-descending-to {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-slideFromLeft;
  animation: 0.218s both;
  animation-name: g-panels-slideFromLeft;
}

/* vslide */
.g-panels-vslide > .panels-ascending-from {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-slideTop;
  animation: 0.218s both;
  animation-name: g-panels-slideTop;
}
.g-panels-vslide > .panels-ascending-to {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-slideFromBottom;
  animation: 0.218s both;
  animation-name: g-panels-slideFromBottom;
}
.g-panels-vslide > .panels-descending-from {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-slideBottom;
  animation: 0.218s both;
  animation-name: g-panels-slideBottom;
}
.g-panels-vslide > .panels-descending-to {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-slideFromTop;
  animation: 0.218s both;
  animation-name: g-panels-slideFromTop;
}

/* hslideover */
.g-panels-hslideover > .panels-ascending-from,
.g-panels-hslideover > .panels-descending-from {
  -webkit-animation-name: none;
  animation-name: none;
}
.g-panels-hslideover > .panels-ascending-to {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-slideFromRight;
  animation: 0.218s both;
  animation-name: g-panels-slideFromRight;
}
.g-panels-hslideover > .panels-descending-to {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-slideFromLeft;
  animation: 0.218s both;
  animation-name: g-panels-slideFromLeft;
}

/* vslideover */
.g-panels-vslideover > .panels-ascending-from,
.g-panels-vslideover > .panels-descending-from {
  -webkit-animation-name: none;
  animation-name: none;
}
.g-panels-vslideover > .panels-ascending-to {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-slideFromBottom;
  animation: 0.218s both;
  animation-name: g-panels-slideFromBottom;
}
.g-panels-vslideover > .panels-descending-to {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-slideFromTop;
  animation: 0.218s both;
  animation-name: g-panels-slideFromTop;
}

/* explode */
.g-panels-explode > .panels-ascending-from,
.g-panels-explode > .panels-descending-from {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-explodeOut;
  animation: 0.218s both;
  animation-name: g-panels-explodeOut;
}
.g-panels-explode > .panels-ascending-to,
.g-panels-explode > .panels-descending-to {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-explodeIn;
  animation: 0.218s both;
  animation-name: g-panels-explodeIn;
}

/* scale-slide */
.g-panels-scale-slide > .panels-ascending-from {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-fadeScaleOut;
  animation: 0.218s both;
  animation-name: g-panels-fadeScaleOut;
}
.g-panels-scale-slide > .panels-ascending-to {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-slideFromRight;
  animation: 0.218s both;
  animation-name: g-panels-slideFromRight;
}
.g-panels-scale-slide > .panels-descending-from {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-slideRight;
  animation: 0.218s both;
  animation-name: g-panels-slideRight;
}
.g-panels-scale-slide > .panels-descending-to {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-fadeScaleIn;
  animation: 0.218s both;
  animation-name: g-panels-fadeScaleIn;
}

/* fly-up-right */
.g-panels-fly-up-right > .panels-ascending-from {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-flyOutRight;
  animation: 0.218s both;
  animation-name: g-panels-flyOutRight;
}
.g-panels-fly-up-right > .panels-ascending-to {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-fadeInPartial;
  animation: 0.218s both;
  animation-name: g-panels-fadeInPartial;
}
.g-panels-fly-up-right > .panels-descending-from {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-fadeOutPartial;
  animation: 0.218s both;
  animation-name: g-panels-fadeOutPartial;
}
.g-panels-fly-up-right > .panels-descending-to {
  -webkit-animation: 0.218s both;
  -webkit-animation-name: g-panels-flyInLeft;
  animation: 0.218s both;
  animation-name: g-panels-flyInLeft;
}