/* -- 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(--dark)". */

.main_header__menu {
  /* Selecting only the children of "bricks-nav-menu". */
  .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(--dark);
      color: var(--light);
      padding: var(--space-xs) var(--space-m);
      border-radius: var(--radius-xs);

      /* Button hover style */
      &:hover {
        background-color: var(--dark-90);
        color: var(--light);
      }
    }
  }
}