/* -- The root styles must go in the element of the structure with the name "Menu". --*/

/* The styles are applying to the last menu item and giving it the button styles, you can change the background color value to the one you want instead of "var(--neutral)". */

.header-1__menu {
  /* Selecting only the children of "bricks-nav-menu". */
  > .bricks-nav-menu-wrapper > .bricks-nav-menu > .menu-item{
    /* The styles will apply only to the child of the last element with the class "menu-item".  */
    &:last-child a {
      background-color: var(--primary);
      color: var(--primary-ultra-light);
      padding: var(--space-xs) var(--space-m);
      border-radius: var(--radius-xs);

      /* Button hover style */
      &:hover {
        background-color: var(--primary-hover);
        color: var(--white);
      }
    }
  }
}