/* Legal information
 *
 * x5 Clojure/ClojureScript web application engine
 * https://monotech.hu/x5
 *
 * Copyright Adam Szűcs and other contributors - All rights reserved */



/* Az elemek animált eltüntetése és megjelenítése: XXX#4116 */



/***** App bubbles *****/

.x-app-bubbles--element {
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

.x-app-bubbles--element[data-animation="reveal"] {
  animation-duration: .3s;
  animation-name: translate-x-110p-0;
}

.x-app-bubbles--element[data-animation="hide"] {
  animation-duration: .3s;
  animation-name: translate-x-0-110p;
}

.x-app-bubbles--element[data-animation="update"] {
  animation-duration: .15s;
  animation-name: scale-1-085-1;
}

/***** App bubbles *****/



/***** App header *****/
/***** App header *****/



/***** App popups *****/
/*** Sliding flip popup structure on XXS, XS, S viewport ***/

/* Flip popup structure on XXS, XS, S viewport */
[data-viewport-profile="xxs"] [data-layout="flip"] .x-app-popups--element--structure,
[data-viewport-profile="xs"]  [data-layout="flip"] .x-app-popups--element--structure,
[data-viewport-profile="s"]   [data-layout="flip"] .x-app-popups--element--structure {

  /* BUG#4701
   * Késleltetés nélkül nem minden esetben látszódott a lejátszódó animáció
   * iPhone 6s - Google Chrome 95.0.4638.50 */
  animation-delay: .1s;

  animation-duration: .25s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

/* Show flip popup structure on XXS, XS, S viewport */
[data-viewport-profile="xxs"] [data-layout="flip"][data-animation="reveal"] .x-app-popups--element--structure,
[data-viewport-profile="xs"]  [data-layout="flip"][data-animation="reveal"] .x-app-popups--element--structure,
[data-viewport-profile="s"]   [data-layout="flip"][data-animation="reveal"] .x-app-popups--element--structure {
  animation-name: translate-y-110p-0;
}

/* Hide flip popup structure on XXS, XS, S viewport */
[data-viewport-profile="xxs"] [data-layout="flip"][data-animation="hide"] .x-app-popups--element--structure,
[data-viewport-profile="xs"]  [data-layout="flip"][data-animation="hide"] .x-app-popups--element--structure,
[data-viewport-profile="s"]   [data-layout="flip"][data-animation="hide"] .x-app-popups--element--structure {
  animation-name: translate-y-0-110p;
}

/* Flip popup cover on XXS, XS, S viewport */
[data-viewport-profile="xxs"] [data-layout="flip"] .x-app-popups--element--cover,
[data-viewport-profile="xs"]  [data-layout="flip"] .x-app-popups--element--cover,
[data-viewport-profile="s"]   [data-layout="flip"] .x-app-popups--element--cover {

  /* BUG#4701
  animation-delay: .25s */
  animation-delay: .35s;

  animation-duration: .1s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

/* Show popup cover on XXS, XS, S viewport*/
[data-viewport-profile="xxs"] [data-animation="reveal"] .x-app-popups--element--cover,
[data-viewport-profile="xs"]  [data-animation="reveal"] .x-app-popups--element--cover,
[data-viewport-profile="s"]   [data-animation="reveal"] .x-app-popups--element--cover {
  animation-name: opacity-0-1;
}

/* Hide flip popup cover on XXS, XS, S viewport */
[data-viewport-profile="xxs"] [data-layout="flip"][data-animation="hide"] .x-app-popups--element--cover,
[data-viewport-profile="xs"]  [data-layout="flip"][data-animation="hide"] .x-app-popups--element--cover,
[data-viewport-profile="s"]   [data-layout="flip"][data-animation="hide"] .x-app-popups--element--cover {
  animation-name: opacity-1-0;
}

/*** Sliding flip popup structure on XXS, XS, S viewport ***/

/*** Revealing boxed popup on M, L, XL, XXL viewport ***/

/* Boxed popup on M, L, XL, XXL viewport */
[data-viewport-profile="m"]   .x-app-popups--element[data-layout="boxed"],
[data-viewport-profile="l"]   .x-app-popups--element[data-layout="boxed"],
[data-viewport-profile="xl"]  .x-app-popups--element[data-layout="boxed"],
[data-viewport-profile="xxl"] .x-app-popups--element[data-layout="boxed"] {
  animation-duration: .1s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

/* Show boxed popup on M, L, XL, XXL viewport */
[data-viewport-profile="m"]   .x-app-popups--element[data-layout="boxed"][data-animation="reveal"],
[data-viewport-profile="l"]   .x-app-popups--element[data-layout="boxed"][data-animation="reveal"],
[data-viewport-profile="xl"]  .x-app-popups--element[data-layout="boxed"][data-animation="reveal"],
[data-viewport-profile="xxl"] .x-app-popups--element[data-layout="boxed"][data-animation="reveal"] {
  animation-name: opacity-0-1;
}

/* Hide boxed popup M, L, XL, XXL viewport */
[data-viewport-profile="m"]   .x-app-popups--element[data-layout="boxed"][data-animation="hide"],
[data-viewport-profile="l"]   .x-app-popups--element[data-layout="boxed"][data-animation="hide"],
[data-viewport-profile="xl"]  .x-app-popups--element[data-layout="boxed"][data-animation="hide"],
[data-viewport-profile="xxl"] .x-app-popups--element[data-layout="boxed"][data-animation="hide"] {
  animation-name: opacity-1-0;
}

/*** Revealing boxed popup on M, L, XL, XXL viewport ***/

/*** Revealing unboxed popup on all viewport size ***/

.x-app-popups--element[data-layout="unboxed"] {
  animation-duration: .15s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

/* Revealing unboxed popup on all viewport size */
.x-app-popups--element[data-layout="unboxed"][data-animation="reveal"] {
  animation-name: opacity-0-1;
}

/* Hide unboxed popup on all viewport size */
.x-app-popups--element[data-layout="unboxed"][data-animation="hide"] {
  animation-name: opacity-1-0;
}

/*** Revealing unboxed popup on all viewport size ***/
/***** App popups *****/



/***** Loading-screen *****/

#x-loading-screen {
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

#x-loading-screen[data-animation="hide"] {
  animation-name: opacity-1-0;
}

/***** Loading-screen *****/



/***** App surface *****/

.x-app-surface--element {
  animation-duration: .15s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

.x-app-surface--element[data-animation="reveal"] {
  animation-name: opacity-0-1;
}

.x-app-surface--element[data-animation="hide"] {
  animation-name: opacity-1-0;
}

/***** App surface *****/