/* BUG: Text does not always fit within the shelf-label area */

/* DEV: change shelf-label's `left` property to reflect some (as of yet unset) left-most border that's less than completely left. */

:root {
  --pinch: 16px;
  
  --base00-color: #1d2021;
  --base02-color: #504945;
  --base03-color: #665c54;
  --base04-color: #bdae93;
  --base0d-color: #83a598;
  --base0e-color: #d3869b;
  
  --default-background-color: var(--base00-color);
  --selection-background-color: var(--base02-color);
  --dark-foreground-color: var(--base03-color); /* Deviation from base16 scheme */
  
}


.nav-bar {  
  /* Micro-formatting */
  display: flex;
  justify-content: center; /* For this trick, the style is not flexible and must be left-justified */
  font-size: 1.0em; /* Changing font-size breaks some visuals at the time of writing this note */
}


.nav-bar .bar-shelf {
  /* Functionality */
  overflow: hidden;
  
  /* Macro-formatting */
  background-color: var(--default-background-color);
}


.nav-bar .bar-shelf a {
  /* Micro-formatting */
  border: none;
  padding-top: 0;
  padding-right: var(--pinch);
  padding-bottom: 0;
  padding-left: var(--pinch);
  margin: 0; /* This is necessary under some variations of the holistic micro-formatting */
  
  
  /* Macro-formatting */
  color: inherit;
  background-color: inherit;
}


.nav-bar .bar-shelf .shelf-label {
  /* Micro-formatting */
  text-align: center;
  border: none;
  padding-top: 0;
  padding-right: var(--pinch);
  padding-bottom: 0;
  padding-left: var(--pinch);
  margin: 0;
  
  /* Macro-formatting */
  color: inherit;
  background-color: inherit;
}


.nav-bar .bar-shelf .shelf-content {
  /* Functionality */
  display: none;
  overflow: visible;
  
  /* Micro-formatting */
  position: absolute;
  left: inherit;
  
  
  
  /* Macro-formatting */
  color: inherit;
  background-color: var(--dark-foreground-color);
}


.nav-bar .bar-shelf:hover {
  /* Macro-formatting */
  background-color: var(--dark-foreground-color); 
}


.nav-bar .bar-shelf a:hover {
  /* Macro-formatting */
  background-color: var(--dark-foreground-color);
}


.nav-bar .bar-shelf:hover .shelf-content {
  /* Functionality */
  display: block;
  
  /* Macro-formatting */
  background-color: var(--dark-foreground-color);
}


.nav-bar .shelf-content a:hover {
  /* Macro-formatting */
  color: inherit;
  background-color: var(--base04-color);
}