/* -----------------------------------------------------------------------------
   STRUCT navigation.scss - Navigation & Menu components
   
   This file contains components for navigation menus and dropdowns.
   -------------------------------------------------------------------------- */
/* The menu-item container div. This can contain a dropdown button,
   or a simple link.*/
.menu-item {
  display: inline-block;
  position: relative; }

/* Style similarly either a dropdown button or a simple link.
   The dropdown case accomodate more left padding for a small down
   arrow. */
.menu-dropdown {
  display: inline-block;
  padding: 12px var(--space-xs) 12px calc(var(--space-xs) + 12px);
  color: black;
  cursor: pointer; }

.menu-link {
  display: inline-block;
  padding: 12px var(--space-xs);
  color: black;
  cursor: pointer; }

/* This matches the height of .menu-item (when used with a .menu-link or
   .menu-dropdown) and center its content vertically.
   This is meant to be used in .u-bar with the .u-bar--top-aligned modifier.
   For instance when used on a logo, this ensures the logo is on the same line
   as the menu items, but remains on the top of the bar, instead of being
   vertically-centered when the menu items are spread on multiple line (on
   a narrow screen).
   See the examples at specimens/layout-bar.slab.
 */
.menu-item-height {
  height: 40px;
  display: flex;
  align-items: center; }

/* Add a small down arrow to the dropdown button. */
.menu-dropdown:before {
  pointer-events: none;
  content: ' ';
  position: absolute;
  left: 0.7rem;
  top: 1.1875rem;
  width: 0;
  height: 0;
  border-width: 0.625rem;
  border: 0.3125rem solid black;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent; }

/* Style the dropdown content. */
.menu-item .menu-dropdown-content {
  position: absolute;
  top: 0.4rem;
  background-color: white;
  min-width: 20ch;
  border: 2px solid #dddddd;
  z-index: 100000;
  visibility: hidden;
  opacity: 0;
  transition: 0s 0.2s ease-out; }

.menu-item a {
  color: black;
  text-decoration: none; }

.menu-dropdown-content a {
  padding: 12px 16px;
  display: block; }

.menu-dropdown-content a:hover {
  background-color: #f2f2f2; }

/* Show the dropdown content when focused. */
.menu-item:focus .menu-dropdown-content {
  transform: translateY(40px);
  visibility: visible;
  opacity: 1;
  transition: 0s 0s ease-out; }

.menu-link:hover, .menu-dropdown:hover, .menu-item:focus .menu-dropdown {
  background-color: #f9f9f9; }

/* Mask to close the dropdown by stealing the focus when clicked. */
.menu-item .menu-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
  display: none; }

.menu-item:focus .menu-mask {
  display: inline-block;
  margin-top: -16px;
  height: 50px;
  background-color: red;
  opacity: var(--menu-mask-opacity, 0); }

/* Show the menu mask (to make sure it has the same size as the dropdown
   button. (Add this to .menu-mask.) */
.menu-mask--debug {
  --menu-mask-opacity: 0.8; }