.site-nav {
  height: var(--site-nav-height);
  background-color: var(--bg-color);
}

.site-nav-item {
  // background: pink;
  height: 100%;
  display: flex;
  align-items: center;
}
/*
  DROP MENU

 */
.drop-menu {
  position: relative;
  font-weight: 500;
  font-size: 16px;
}

.drop-menu-trigger {
  // height: var(--site-nav-height);
  > .target {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 1em;
    border-radius: 5px;
  }
  &.hover, &:focus {
    > .target {
      background: rgba(0,0,0,0.1);
    }
  }
}

.drop-menu-content {
  font-size: 15px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

// visible container, styled
.drop-menu-panel {
  --bd-width: 2px;
  --bd-color: black;
  --arrow-size: 10px;
  --column-gap: 40px;
  margin-top: 10px;
  padding: 1em calc(var(--column-gap)/2);
  width: max-content;
	position: relative;
	background: var(--bg-color);
	border: var(--bd-width) solid var(--bd-color);
  border-radius: 6px;
  &::after, &::before {
    content: "";
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    pointer-events: none;
    transform: translateX(-50%);
  }
  &::after {
    border-bottom-color: var(--bg-color);
    border-width:calc(var(--arrow-size));
  }
  &::before {
    border-bottom-color: var(--bd-color);
    border-width: calc(var(--arrow-size) + var(--bd-width)*1.4142);
  }
}

.drop-menu-link {
  display: block;
  padding: 0.25em  calc(var(--column-gap)/2);
  margin: 0 calc(var(--column-gap)/-2);
  &:hover, &:focus {
    outline: 0;
    background: rgba(0,0,0,0.1);
  }
  &.focus-visible { outline: 2px blue ;}
}
/*
  nav.site-nav
    .drop-menu
      button.drop-menu-trigger
      .drop-menu-content
        [A - simple list]
          .drop-menu-hold
            ul.drop-menu-list(aria-labelled-by=triggerID)
              li.drop-menu-item[]
                Link.drop-menu-link
        [B - list of lists]
          .stop.drop-menu-hold
            ul.drop-menu-list.mcol-grid.cols-2
              li.drop-menu-submenu[]
                p.drop-submenu-name
                ul.drop-submenu-list(aria-labelled-by=submenuNameId)
                  li.drop-menu-item[]
                    Link.drop-menu-link


  items
    - is this a simple list, or a list of lists?


  nav(aria-label='site navigation')
  ul.drop-list
    li
      ul.drop-sub-list

        li
          a
    li.drop-list-item
      a
 */

@mixin x-state-fade-in($dur) {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition-delay: 0s;
}

@mixin x-state-fade-out($dur) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity $dur linear, visibility 0ms linear $dur;
}