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



/***** UI structure *****/

#x-app-ui-structure {
  /* BUG#4090 */
  display: flex;
  /* BUG#0009 (source-code/cljs/x/ui/renderer/views.cljs) */
  flex-direction: row-reverse;
}

/***** UI structure *****/



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

#x-app-bubbles {
  bottom: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  max-height: 100vh;
  overflow-y: auto;
  padding-right: 24px;
  position: fixed;
  right: 0;
  width: 420px;
  /* BUG#4376 */
  /* XXX#0567 */
  z-index: 996;
}

[data-viewport-profile="xxs"] #x-app-bubbles,
[data-viewport-profile="xs"]  #x-app-bubbles,
[data-viewport-profile="s"]   #x-app-bubbles,
[data-viewport-profile="m"]   #x-app-bubbles {
  padding-right: 0;
  width: 100%;
}

/*** App bubbles wrapper ***/

/*** App bubbles element ***/

.x-app-bubbles--element {
  background-color: var( --background-color );
  border-color: var( --border-color-secondary );
  border-radius: var( --border-radius-m );
  border-style: solid;
  border-width: 1px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-height: 48px;
  margin-bottom: 24px;
  width: 100%;
}

[data-viewport-profile="xxs"] .x-app-bubbles--element,
[data-viewport-profile="xs"]  .x-app-bubbles--element,
[data-viewport-profile="s"]   .x-app-bubbles--element,
[data-viewport-profile="m"]   .x-app-bubbles--element {
  border-radius: 0;
  border-style: solid none none none;
  margin-bottom: 0;
}

.x-app-bubbles--element--body {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  font-size: var( --font-size-s );
  font-weight: 500;
  flex-grow: 1;
  justify-content: center;
  letter-spacing: var( --letter-spacing-s );
  line-height: var( --line-height-s );
  overflow: hidden;

  /* A bubble elemeken lehetséges egyszerű szöveget megjeleníteni (ami nem képes távolságot
   * beállítani a bubble elem szélétől), ezért rendelkezik az .x-app-bubbles--element--body
   * elem {padding: ...} tulajdonsággal. */
 -padding: 0 12px;
}

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



/***** App popups *****/

#x-app-popups {
  /* BUG#4376
   * Egyes külső pluginok (pl.: FullCalendar) elemei rendelkezhetnek {z-index: ...} tulajdonsággal,
   * ami szükségessé teszi az applikáció egyes elemeinek kiemelését! */
  z-index: 995;
}

/*** Popup ***/

.x-app-popups--element {
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

/*** Popup ***/

/* Debug tools */

.x-app-popups--element--debug-tools {
  bottom: 6px;
  display: flex;
  left: 6px;
  grid-column-gap: 12px;
  position: fixed;
}

.x-app-popups--element--debug-button {
  align-items: center;
  background: #222;
  color: white;
  cursor: pointer;
  display: flex;
  font-size: var( --font-size-s );
  font-weight: 500;
  height: 36px;
  justify-content: center;
  padding: 0 12px;
  user-select: none;
}

.x-app-popups--element[data-minimized="true"] {
  transform: translateX( 100% );
}

.x-app-popups--element[data-stick-to-top="true"] {
  z-index: 999;
}

/* Debug tools */
/***** App popups *****/



/***** Progress-bar *****/

#x-app-progress-bar {
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  /* BUG#4376 */
  z-index: 997;
}

#x-app-progress-bar--process-progress {
  background-color: var( --border-color-primary );
  border-radius: 0 1px 1px 0;
  transition: width .2s ease-in-out;
  width: 0%;
}

#x-app-progress-bar--process-progress[data-failured="true"] {
  background-color: var( --border-color-warning );
}

/***** Progress-bar *****/



/***** Progress-screen *****/

#x-app-progress-screen {
  background-color: var( --black-semi-transparent );
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

/***** Progress-screen *****/



/***** App sounds *****/
/*** App sounds wrapper ***/

#x-app-sounds {
  display: none;
}

/*** App sounds wrapper ***/
/***** App sounds *****/



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

#x-app-surface {
  flex-grow: 1;
  /* BUG#4090
   * 4.8.2.0
   * Az #x-app-ui-structure elem {display: flex} beállítása miatt,
   * ha az #x-app-surface elem ...
   * ... olyan elemet tartalmaz, ami szélessebb, mint az #x-app-surface elem,
   *     és {overflow-x: auto} beállítással rendelkezik,
   * ... az #x-app-sidebar elem nem jelenik meg, tehát az #x-app-surface elem
   *     önmagában foglalja el a viewport szélességét,
   * akkor az #x-app-surface elem valamiért szélessebb lenne, mint az őt
   * tartalmazó #x-app-ui-structure elem, ezért szükséges a {max-width: 100%}
   * beállítást alkalmazni!
   *
   * Még így sem működik tökéletesen! Kisebb viewport szélesség esetén (pl. 800px)
   * egy széles #x-app-surface tartalom már képes kikényszeríteni az #x-app-sidebar
   * elem egy részét a viewport-ból!
   * Amíg ez a probléma nem teljesen megoldott, addig a sidebar elemhez ajánlott
   * minimum viewport szélesség: Ca. 1024px! */
  max-width: 100%;
}

/*** App surface wrapper ***/

/*** Surface content ***/

.x-app-surface--element--content {
  /* max-height & max-width: why? */
  max-height: 100%;
  max-width:  100%;
}

/*** Surface content ***/
/***** App surface *****/



/***** App sidebar *****/

#x-app-sidebar--content {
  /* BUG#0410
   * Ha az #x-app-sidebar--content elem tartalma sticky pozícionálású, akkor
   * szükséges, hogy az #x-app-sidebar--content elem magassága legalább akkora
   * legyen, mint az #x-app-surface elem magassága, mert a sticky pozícionálású
   * elemek csak addig tartják meg a sticky tulajdonságukat, ameddig az őket
   * tartalmazó sticky-container elem a viewport-ban van. */
  height: 100%;
}

/***** App sidebar *****/



/***** Error shield *****/

#x-error-shield {
  background-color: var( --background-color );
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;

  /* BUG#4376 */
  z-index: 999;
}

#x-error-shield--body {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  width: 100%;
}

#x-error-shield--content {
  font-size: var( --font-size-s );
  font-weight: 500;
  letter-spacing: var( --letter-spacing-s );
  line-height: var( --line-height-s );
}

#x-error-shield--refresh-button,
#x-error-shield--report-button {
  cursor: pointer;
  font-size: var( --font-size-xs );
  font-weight: 500;
  letter-spacing: var( --letter-spacing-xs );
  line-height: 18px;
}

#x-error-shield--refresh-button {
  color: var( --color-primary );
  margin-top: 24px;
}

#x-error-shield--report-button {
  color: var( --color-muted );
  margin-top: 6px;
}

/***** Error shield *****/



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

#x-loading-screen {
  align-items: center;
  background-color: var( --background-color );
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;

  /* BUG#4376 */
  z-index: 998;
}

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