/**
 *  \file     home.css
 *  \author   Romain Légault
 *  \date     01/11/2024
 *  \version  1.1.0
 *  \brief    Style pour la page de double navigation à travers les figurines.
 */

/**
 *  \include  error.css 
 *  \brief contient le style minimal du site
 */
@import "error.css";
/**
 *  \include  menu.css 
 *  \brief contient le style des boutons/menus
 */
@import "menu.css";

#splitterBar {
  background: none;
  background-repeat: repeat;
  border: none;

  /* Prevent the browser's built-in drag from interfering */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.layout-split-h #splitterBar {
  background-image: url("../images/split-bar-h.png");
  width: 100%;
  height: 10px;
  cursor: row-resize;
}

.layout-split-v #splitterBar {
  background-image: url("../images/split-bar-v.png");
  width: 10px;
  height: calc(800px - (76px + 19px));
  cursor: col-resize;
}

/* Conteneur principal */
#contentDiv {
  display: flex;
  padding: 0 8px 0 8px;
  overflow: hidden;
}

/* Mode Horizontal */
.layout-split-h { flex-direction: column; }
.layout-split-h nav-container {
  width: 100%;
  height: calc(400px - (76px + 19px + 10px) / 2);
}

/* Mode Vertical */
.layout-split-v { flex-direction: row; }
.layout-split-v nav-container {
  width: calc(50% - 10px / 2);
  height: calc(800px - (76px + 19px));
}

/* Mode Solo */
.layout-solo nav-container {
  width: 100%;
  height: calc(800px - (76px + 19px));
  margin: auto
}

/* home.css */