/* -- Navigation- Block styles -- */

/* Tabs */
.is-style-tabs {
  a:where(:not(.wp-element-button)):hover {
    color: inherit;
  }

  .wp-block-navigation__container {
    padding: 0;
  }

  .wp-block-navigation__submenu-icon {
    height: 22px;
    padding: 0 0.25em 4px 0.25em;
  }

  .wp-block-navigation-submenu .wp-block-navigation-submenu .wp-block-navigation__submenu-icon {
    background-color: transparent;
    color: currentColor;
  }

  .wp-block-navigation__submenu-container > .open-on-click .wp-block-navigation__submenu-icon {
    background-color: transparent;
    border-left-color: transparent;
  }

  .open-on-hover-click.has-child {
    padding-right: 0.75em;
  }

  .open-on-click .wp-block-navigation-submenu__toggle {
    border-top-right-radius: 0;
  }

  .open-on-click .wp-block-navigation__submenu-icon {
    align-self: stretch;
    border-left: 1px solid var(--black-12pcnt);
    border-top-right-radius: 10px;
    border-top-left-radius: 0;

    svg {
      color: var(--almost-black);
      height: 100%;
    }
  }
}

.is-style-tabs:not(.has-background) {
  .open-on-click .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
    background-color: var(--wp--preset--color--tertiary);
  }
  .open-on-click .wp-block-navigation__submenu-icon {
    background-color: var(--wp--preset--color--tertiary);
  }
}

/* Wide Tab */
.is-style-wide-tab {
  .wp-block-navigation__container {
    border-radius: 16px 16px 0 0;
  }

  .wp-block-navigation__container > .wp-block-page-list {
    background-color: transparent;
  }

  ul.wp-block-navigation__container {
    padding-bottom: 0;
  }

  .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active,
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background-image: none;
  }
}

.is-style-wide-tab.is-vertical .wp-block-navigation__container {
  padding-bottom: 0.25em;
  padding-left: 0;
}

.is-style-wide-tab.is-vertical.items-justified-right .wp-block-navigation__container,
.is-style-wide-tab.is-vertical.items-justified-right .wp-block-navigation__submenu-container {
  border-radius: 16px 0 0 16px;
}

.is-style-wide-tab.is-vertical.items-justified-right .wp-block-navigation__container {
  padding-left: 0.5em;
  padding-right: 0;
}

.is-style-wide-tab.is-vertical .is-menu-open .wp-block-navigation__container,
.is-style-wide-tab.is-vertical.items-justified-right .is-menu-open .wp-block-navigation__container {
  border-radius: 0;
  padding: 0.25em 0.5em;
}

/* Flat Style */
:root :where(.is-style-flat-nav.wp-block-navigation:not(.is-responsive):not(.wp-block-navigation__container)) {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
}

.wp-block-navigation.is-style-flat-nav:not(.is-responsive) {
  .wp-block-navigation__container {
    background-color: transparent !important;
  }

  .wp-block-page-list {
    background-color: transparent;
  }
}

.is-style-flat-nav:not(.is-responsive):not(.wp-block-navigation__container) {
  background-color: var(--wp--preset--color--tertiary);

  @media (max-width: 599px) {
    color: var(--almost-black);
  }
}

.is-style-flat-nav:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--secondary);
}

@media (max-width: 600px) {
  .wp-block-navigation.is-style-flat-nav.is-responsive {
    background-color: transparent !important;
  }
}

@media (min-width: 600px) {
  :root :where(.is-style-flat-nav:not(.wp-block-navigation__container)) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
  }

  .wp-block-navigation.is-style-flat-nav:has(.always-shown) {
    background: transparent !important;
  }

  .is-style-flat-nav .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {
    background-color: transparent !important;
  }

  .is-style-flat-nav.is-responsive {
    .wp-block-navigation__container {
      background-color: transparent !important;
    }
  }
}
