/* Some default styling for menus */
.menu {
  --menu-link-color: var(--color-grey-dark);
  list-style: none;
  margin: 0;
  padding: 0;
  & li {
    display: block;
  }
  & a {
    color: var(--menu-link-color);
    display: inline-block;
    padding: 0.2em 0.5em;
    text-decoration: none;
  }

  /* When there is a dropdown */
  .menu-item--expanded {
    display: grid;
    grid-template-columns: 1fr auto;

    .menu {
      display: none;
    }
  }

}

/* Dropdown triggers */
button.menu-dropdown-trigger {
  --btn-bg-color: transparent;
  --btn-fg-color: var(--site-header-color);
  padding: 0.1rem;
  margin-left: -1rem;
  margin-right: 0.2rem;

  display: flex;
  align-items: center;

  &:is(:hover, :focus) {
    background: transparent;
  }

  svg {
    height: 1.3em;
    width: 1.3em;
    fill: var(--site-header-color);
  }

  &[aria-expanded='true'] + .menu {
    display: block;
  }
}