/*
 * 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.
 */

.polymer-overlay {
	position: fixed;
	z-index: 10;
	outline: none;
	display: none;
	opacity: 0.99;
	-webkit-transition: opacity 0.001s;
	transition: opacity 0.001s;
}

/*
	The revealed class exists because it's necessary to 'show' a node
	before applying a transition. When an overlay is opened, it is 
	immediately revealed (display: block) and then asynchronously the 
	opened or closing classes are added.

	Because we don't want to actually show the node before a transition
	or animation is applied, when the node is 
	revealed, it is made display: block but visibility: hidden.
	It is then made visibility: visible when it is opened.
*/

.polymer-overlay.revealed {
	display: block;
	visibility: hidden;
}

.polymer-overlay.revealed.opened {
	opacity: 1;
	display: block;
	visibility: visible;
}

.polymer-overlay.revealed.closing {
	display: block;
	visibility: visible;
}

@-webkit-keyframes polymer-overlay-shakeFadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(0);
  }
  10% {
    -webkit-transform: translateX(-50px);
  }
  30% {
    -webkit-transform: translateX(50px);
  }
  50% {
    -webkit-transform: translateX(-25px);
  }
  70% {
    -webkit-transform: translateX(25px);
  }
  90% {
    -webkit-transform: translateX(-13px);
  }
  100% {
    -webkit-transform: translateX(0);
    opacity: 1;
  }
}

@keyframes polymer-overlay-shakeFadeIn {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  10% {
    transform: translateX(-50px);
  }
  30% {
    transform: translateX(50px);
  }
  50% {
    transform: translateX(-25px);
  }
  70% {
    transform: translateX(25px);
  }
  90% {
    transform: translateX(-13px);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@-webkit-keyframes polymer-overlay-shakeFadeOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
  10% {
    -webkit-transform: translateX(-50px);
  }
  30% {
    -webkit-transform: translateX(50px);
  }
  100% {
    -webkit-transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes polymer-overlay-shakeFadeOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  10% {
    transform: translateX(-50px);
  }
  30% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}
