/* Shared styles */

.is-style-tabs,
.is-style-wide-tab {
  .wp-block-navigation-item__content {
    border-radius: 10px 10px 0 0;
    height: 30px;
    padding: 4px 0.5em 0 0.5em;
  }

  .open-on-click .wp-block-navigation__submenu-icon {
    color: currentColor;
    height: auto;
    margin-left: 0 !important;
    min-width: 44px;
  }

  .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    background-image: none;
    height: auto;
    padding: 0.5em 1em;
  }

  .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
  &.is-vertical .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    border-radius: 0;
  }

  .has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.25em 0.5em;
  }
}

@media (min-width: 600px) {
  .is-style-tabs .wp-block-navigation-item__content,
  .is-style-wide-tab .wp-block-navigation-item__content {
    margin: 0;
  }
}

.is-style-tabs .wp-block-navigation-item__content,
.is-style-wide-tab .wp-block-navigation-item__content:focus,
.is-style-wide-tab .wp-block-navigation-item__content:hover {
  background: linear-gradient(135deg, rgb(255 255 255 / 0.25) 0%, rgb(255 255 255 / 0) 100%);
  background-color: var(--wp--preset--color--tertiary);
}

.mxs-thin-header {
  .is-style-wide-tab .wp-block-navigation-item__content {
    border-left: 1px solid transparent;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
  }

  .is-style-tabs .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
  .is-style-wide-tab .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
  .is-style-wide-tab .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    border: transparent;
  }
}

.is-style-tabs:not(.is-responsive) {
  .wp-block-navigation-item__content,
  .wp-block-navigation-item__content {
    margin: 0;
  }
}

.is-style-tabs:not(.has-text-color) .wp-block-navigation-item__content,
.is-style-wide-tab:not(.has-text-color) .wp-block-navigation-item__content:active,
.is-style-wide-tab:not(.has-text-color) .wp-block-navigation-item__content:focus,
.is-style-wide-tab:not(.has-text-color) .wp-block-navigation-item__content:hover {
  color: #000000;
}

.is-style-tabs:not(.has-text-color),
.is-style-wide-tab:not(.has-text-color) {
  .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    &:focus,
    &:hover {
      color: #000000;
    }
  }
}

.is-style-tabs .is-menu-open .wp-block-navigation-item__content,
.is-style-wide-tab .is-menu-open .wp-block-navigation-item__content,
.is-style-wide-tab .is-menu-open .wp-block-navigation-item__content:focus,
.is-style-wide-tab .is-menu-open .wp-block-navigation-item__content:hover {
  background: none;
  background-color: transparent;
  color: inherit;
}

.is-style-tabs.is-vertical,
.is-style-wide-tab.is-vertical {
  .wp-block-navigation__container {
    height: auto;
  }

  .wp-block-navigation__submenu-container,
  .wp-block-navigation__submenu-container {
    margin-left: 25%;
    top: 100%;
  }

  .is-menu-open .wp-block-navigation__submenu-container,
  .is-menu-open .wp-block-navigation__submenu-container {
    margin-left: 0;
  }

  .wp-block-navigation-item__content {
    height: auto;
    padding: 0.25em 0.5em;
  }

  .wp-block-navigation-item__content {
    border-radius: 0 10px 10px 0;
  }
}

.is-style-wide-tab.is-vertical .wp-block-navigation__container,
.is-style-wide-tab.is-vertical .wp-block-page-list,
.is-style-wide-tab.is-vertical .wp-block-navigation__submenu-container,
.is-style-tabs.is-vertical .wp-block-navigation__submenu-container {
  border-radius: 0 16px 16px 0;
}

.is-style-wide-tab.is-vertical.items-justified-right,
.is-style-tabs.is-vertical.items-justified-right {
  .wp-block-navigation__submenu-container {
    margin-right: 0;
  }

  .wp-block-navigation-item__content {
    border-radius: 10px 0 0 10px;
  }
}
