/* Navbar */
nav:not(.exclude:not([data-style]), [data-style="none"], #toolbar-bar, .toolbar-lining) { /* This styling only affects the first nav element that is the direct child of the body */
  text-align: center;
  border-width: var(--line-width) 0;
  border-style: solid;
  line-height: var(--line-height);
  display: flex;
  flex-flow: row wrap;
}

nav:not(.exclude:not([data-style]), [data-style="none"], #toolbar-bar, .toolbar-lining) > * {
  flex-grow: 1;
  margin: calc((var(--line-height) * 0.5rem) - var(--line-width)) var(--half-line); /* Put half a line's height on both top and bottom, then remove the width of the border */
  text-transform: uppercase;
}

nav[data-style="blockout"],
nav:is([data-style="boxes"], [data-style="roundesque"]) a:is(:hover, :focus) {
	background-color: var(--color);
	color: var(--background-color);
}

nav[data-style="blockout"] a {
	text-decoration: none;
}

nav[data-style="blockout"] a:is(:hover, :focus) {
	background-color: var(--background-color);
	color: var(--color);
}

nav[data-style]:is([data-style="boxes"], [data-style="roundesque"]) {
	border: 0;
}

nav:is([data-style="boxes"], [data-style="roundesque"]) a {
	text-decoration: none;
	border: var(--line-width) solid;
}

nav[data-style="roundesque"] a {
	border-radius: calc(0.25 * var(--one-line));
}

@media (prefers-reduced-motion: no-preference) {
  nav[data-style="classy"] span > a {
    text-decoration: none;
    display: inline-block;
  }

  nav[data-style="classy"] span > a::after {
    content: '';
    width: 0;
    height: var(--line-width);
    display: block;
    background: var(--color);
    transition: 150ms;
  }

  nav[data-style="classy"] span > a:is(:hover, :focus)::after {
    width: 100%;
  }
}

/* Dropdown Menus */
nav[role="navigation"] {

  span.menu-item--expanded {

    position: relative;
    margin-bottom: 0 !important;

    button {
      text-transform: uppercase;
      border: inherit;
      background-color: inherit;

      & ~ ul {
        display: none;
        list-style: none;
        position: absolute;
        background-color: var(--background-color);
        padding: 0.5rem;
        left: 0;
        right: 0;
        margin-top: 0.6rem;
      }

      &::after{
        content: '▼';
        padding-left: 0.25rem;
        vertical-align: text-top;
        font-size: 0.75rem;
      }
    }

    &:hover button ~ ul,
    &:focus-within button ~ ul,
    &:focus button ~ ul {
      display: block;
      border-width: var(--line-width);
      border-style: solid;
      z-index: 10;
    }

  }
}