/* 
  //////
    LAYOUTS.CSS
  - Base styling for common layouts.
*/

/** /// Modals /// */

/**
  - Modal Container
  Should take the whole screen and center its content.
*/
div.modal {
  position: absolute;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  z-index: 20;
}

/**
  - Modal Content
  Contains every other components of the modal.
*/

div.modal div.content {
  width: 100%;
  max-width: 400px;
  padding: 6px 12px;

  border: 1px solid var(--color-secondary-background);
}

div.modal div.content h3 {
  margin-bottom: 5px;
  font-size: 1.2rem;
  color: var(--color-primary);
}

div.modal div.content div.actions { margin-top: 15px; }
div.modal div.content div.actions button { margin-right: 15px; }

/* /// Navigations /// */



/* 
  Bottom Nav Bar
  - Bottom bar that is used for mobile navigation.
*/

/* Common link item for navigation purpose. */
nav a.link-item {
  display: flex;
  width: auto;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  padding: 4px 6px;
}
nav a.link-item.active {
  color: var(--color-secondary);
}

nav#bottomNavbar {
  display: flex;
  padding: 6px 12px;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid var(--color-secondary-background);
}