/* 
 * Click effects:
 * - Add "touchable" class to elements that can be clicked
 * Optional:
 * - Modifiers: "small" , "invert"
 * - Use interal element "touchable_circle" and give touch element "no_before"

 * This goes in the main function :

  clickEffectsSetup();

 * This goes in app.js :
 
function clickEffectsSetup () {
  $(".touchable").on("touchstart", function(e){
    $(this).addClass("touched");
    setTimeout(function(){
      $(this).removeClass("touched");
    }.bind(this), 800);
  });
}

 *
 */

/* These rules should get overwritten if necessary so put this css file first */
 .touchable {
 	position: relative;
 	overflow: hidden;
 }


.touchable:not(.no_before):before, .touchable.no_before .touchable_circle {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  opacity: 0;
  background-color: white;
  border-radius: 50%;
  z-index: 9999;
  pointer-events: none;
}
.touchable.small:not(.no_before):before, .touchable.small.no_before .touchable_circle {
  width: 1rem;
  height: 1rem;
}
.touchable.medium_large:not(.no_before):before, .touchable.medium_large.no_before .touchable_circle {
  width: 3em;
  height: 3em;
}
.touchable.large:not(.no_before):before, .touchable.large.no_before .touchable_circle {
  width: 6em;
  height: 6em;
}
.touchable.invert:not(.no_before):before, .touchable.invert.no_before .touchable_circle {
  background-color: black;
}

.touchable.touched:not(.no_before):before, .touchable.touched.no_before .touchable_circle {
  content: "";
  animation: touch_bubble 0.5s ease;
}

@keyframes touch_bubble {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.2);
    -moz-transform: translate(-50%, -50%) scale(0.2);
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
    -moz-transform: translate(-50%, -50%) scale(1.2);
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
  }
}


/* Hover effects */

.hover_effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

body.bodyTabletL.bodyAndroid .hover_effect,
body.bodyIOS .hover_effect,
body.bodyVOSK .hover_effect,
body.noHovers .hover_effect {
    display: none !important;
}

div.touchable:hover .hover_effect {
  opacity: 0.2;
}