/*
  @file Theming for menus.
  Note: This is generic theming for _all_ menus. Specific theming for specific
  menus can be achieved in individual menu/region files.
*/

.menu {
  padding-left: 0;
}

/* Only hide sub-menus if we have JS enabled. */
.js .menu .menu {
  display: none;
}

/*
  This is a button element placed inside the li to trigger the sub-menu.
*/
.menu__sub-menu-toggle {
  width: var(--menu-sub-menu-toggle-width);
  height: var(--menu-sub-menu-toggle-height);
  padding: 0;
  border: 0;
  font-size: var(--menu-main-font-size);
  font-weight: var(--menu-main-font-weight);
}

.menu__sub-menu-toggle-icon {
  display: inline-block;
  transition: var(--transition-time);
}

.menu__sub-menu-toggle[aria-expanded="true"] .menu__sub-menu-toggle-icon {
  transform: rotate(var(--menu-item-toggle-icon-rotation));
}

.menu-item .menu-item > a {
  display: block;
}

@media screen and (max-width: 48rem) {
  .menu-item--level-0.menu-item--expanded {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .menu__sub-menu-toggle[aria-expanded="true"] + .menu {
    width: 100%;
  }
}

.menu > .menu-item .menu-item--expanded {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.menu > .menu-item .menu-item--expanded > a {
  width: calc(100% - var(--menu-sub-menu-toggle-width));
}

.menu > .menu-item .menu-item--expanded > .menu {
  width: 100%;
}

/* 2nd+ level sub-menu */
/*
  The relative here is to reset the absolute from above for anything after the
  first level. Then we use float, to make sure that the following siblings are not
  hidden behind the currently expanded sub-menu item.
*/
.js .menu .menu .menu {
  position: relative;
  float: left;
}

/*
  We have CSS here to go 5 levels deep. \
  Hopefully no one will be crazy enough to need this.
*/

/* 1st level sub-menu links */
.js .menu .menu a {
  padding: var(--menu-item-padding);
}
.js .menu .menu .menu a {
  padding-right: calc(var(--menu-item-padding) * 2);
  padding-left: calc(var(--menu-item-padding) * 2);
}
/* 3rd level sub-menu links */
.js .menu .menu .menu .menu a {
  padding-right: calc(var(--menu-item-padding) * 3);
  padding-left: calc(var(--menu-item-padding) * 3);
}
/* 4th level sub-menu links */
.js .menu .menu .menu .menu .menu a {
  padding-right: calc(var(--menu-item-padding) * 4);
  padding-left: calc(var(--menu-item-padding) * 4);
}
/* 5th level sub-menu links */
.js .menu .menu .menu .menu .menu .menu a {
  padding-right: calc(var(--menu-item-padding) * 5);
  padding-left: calc(var(--menu-item-padding) * 5);
}

@media screen and (min-width: 48rem) {
  .js .menu--menu-level-0 > .menu-item {
    position: relative;
    z-index: 1;
  }

  /* 1st level sub-menu */
  .js .menu .menu {
    position: absolute;
    left: 0;
    min-width: var(--menu-sub-menu-min-width);
    font-size: var(--menu-sub-menu-font-size);
  }

  .js .menu .menu--sub-menu-level-1 {
    left: calc(var(--menu-item-padding)* -1);
  }

  /* We want to make sure any sub-items on the last menu item do not overflow the screen. */
  .js .menu--menu-level-0 > .menu-item:last-child .menu {
    right: 0;
    left: unset;
  }
}

/* Dealing with the submenu icons in all their states */

/* For the offcanvas version */
.js .menu__sub-menu-toggle {
  border: 2px solid transparent;
  background-color: var(--off-canvas-link-color);
}

.js .menu__sub-menu-toggle:hover {
  border-color: var(--off-canvas-link-color);
  background-color: var(--off-canvas-background-color);
}

.js .menu__sub-menu-toggle-icon {
  width: var(--menu-sub-menu-icon-size);
  height: var(--menu-sub-menu-icon-size);
  background-color: var(--off-canvas-background-color);
  /* Use mask to update the colour of the icons, the background colour is the colour the icons appear  */
  -webkit-mask: var(--menu-sub-menu-icon) no-repeat 100% 100%;
  mask: var(--menu-sub-menu-icon) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.js .menu__sub-menu-toggle:hover .menu__sub-menu-toggle-icon {
  background-color: var(--off-canvas-link-color);
}

@media screen and (min-width: 48rem) {
  /* Desktop first level */
  .js .menu__sub-menu-toggle {
    border: 2px solid transparent;
    background-color: var(--header-background-color);
  }

  .js .menu__sub-menu-toggle-icon {
    /* Use mask to update the colour of the icons, the background colour is the colour the icons appear */
    background-color: var(--header-link-color);
  }

  .js .menu__sub-menu-toggle:focus,
  .js .menu__sub-menu-toggle:hover {
    border-color: var(--header-link-color);
    background-color: var(--header-link-color);
  }

  .js .menu__sub-menu-toggle:focus .menu__sub-menu-toggle-icon,
  .js .menu__sub-menu-toggle:hover .menu__sub-menu-toggle-icon {
    /* Keep the icons visible on focus and hover */
    background-color: var(--header-background-color);
  }

  /* Desktop submenus  */
  .js .microsite-header__menu .menu .menu {
    background: var(--menu-sub-menu-background-colour);
  }

  .js .microsite-header__menu .menu .menu a {
    color: var(--menu-sub-menu-link-colour);
  }

  .js .menu--menu-level-0 .menu .menu__sub-menu-toggle {
    /* Update the icon background to match the submenu */
    background-color: var(--menu-sub-menu-background-colour);
  }

  .js .menu--menu-level-0 .menu .menu__sub-menu-toggle:hover {
    /* Update the icon background to match the submenu */
    border-color: var(--menu-sub-menu-link-colour);
  }

  .js .menu--menu-level-0 .menu .menu__sub-menu-toggle-icon {
    /* Update the icon colour to be visible the submenu background */
    background-color: var(--menu-sub-menu-link-colour);
  }
}