/* -- Navigation- Contrasting Colors -- */

/* Navigation- general */
.wp-block-navigation.is-style-default:not(.is-responsive):not(.wp-block-navigation__container) {
  .mxs-light-theme-bg &,
  .mxs-dark-theme-bg .mxs-light-bg & {
    border-top: 1px solid var(--black-25pcnt);
    border-bottom: 1px solid var(--black-25pcnt);
  }

  .mxs-dark-theme-bg &,
  .mxs-light-theme-bg .mxs-dark-bg & {
    border-top: 1px solid var(--white-25pcnt);
    border-bottom: 1px solid var(--white-25pcnt);
  }
}

.wp-block-navigation__responsive-container-open {
  .mxs-light-theme-bg &,
  .mxs-dark-theme-bg .mxs-light-bg & {
    background-color: var(--black-12pcnt);

    &:hover,
    &:focus {
      background-color: var(--black-25pcnt);
    }
  }

  .mxs-dark-theme-bg &,
  .mxs-light-theme-bg .mxs-dark-bg & {
    background-color: var(--white-12pcnt);

    &:hover,
    &:focus {
      background-color: var(--white-25pcnt);
    }
  }
}

@media (min-width: 600px) {
  .wp-block-navigation.is-style-default.is-responsive:not(.wp-block-navigation__container) {
    .mxs-light-theme-bg &,
    .mxs-dark-theme-bg .mxs-light-bg & {
      border-top: 1px solid var(--black-25pcnt);
      border-bottom: 1px solid var(--black-25pcnt);
    }

    .mxs-dark-theme-bg &,
    .mxs-light-theme-bg .mxs-dark-bg & {
      border-top: 1px solid var(--white-25pcnt);
      border-bottom: 1px solid var(--white-25pcnt);
    }
  }
}

.wp-block-navigation-item__content:focus,
.wp-block-navigation-item__content:hover {
  .mxs-light-theme-bg &,
  .mxs-dark-theme-bg .mxs-light-bg & {
    background-color: var(--black-12pcnt);
  }

  .mxs-dark-theme-bg &,
  .mxs-light-theme-bg .mxs-dark-bg & {
    background-color: var(--white-12pcnt);
  }
}

@media (min-width: 600px) {
  .wp-block-navigation:not(.has-text-color) {
    .wp-block-navigation-item__content {
      .mxs-light-bg & {
        color: var(--almost-black);
      }

      .mxs-dark-bg & {
        color: var(--almost-white);
      }
    }
  }
}

/* Navigation- submenu general */
.wp-block-navigation .wp-block-navigation__submenu-container {
  .wp-block-navigation-item__content:active,
  .wp-block-navigation-item__content:focus,
  .wp-block-navigation-item__content:hover {
    .mxs-light-theme-bg &,
    .mxs-light-bg &,
    .mxs-dark-theme-bg &,
    .mxs-dark-bg & {
      background-color: var(--wp--preset--color--base) !important;
      color: var(--wp--preset--color--contrast);
    }
  }
}

.wp-block-navigation .wp-block-navigation__submenu-icon {
  .mxs-light-theme-bg &,
  .mxs-dark-theme-bg .mxs-light-bg & {
    color: var(--almost-black);
  }

  .mxs-dark-theme-bg &,
  .mxs-light-theme-bg .mxs-dark-bg & {
    color: var(--almost-white);
  }
}

.open-on-click {
  .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
    .mxs-light-theme-bg &,
    .mxs-dark-theme-bg .mxs-light-bg & {
      background-color: var(--black-12pcnt);
    }

    .mxs-dark-theme-bg &,
    .mxs-light-theme-bg .mxs-dark-bg & {
      background-color: var(--white-12pcnt);
    }
  }
}

/* Navigation- shared styles */
.is-style-tabs:not(.has-background) .wp-block-navigation-item__content,
.is-style-wide-tab:not(.has-background) .wp-block-navigation-item__content:focus,
.is-style-wide-tab:not(.has-background) .wp-block-navigation-item__content:hover {
  .mxs-dark-theme-bg &,
  .mxs-dark-bg &,
  .mxs-light-theme-bg &,
  .mxs-light-bg & {
    background-color: var(--wp--preset--color--tertiary);
  }
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  .mxs-dark-theme-bg &,
  .mxs-dark-bg &,
  .mxs-light-theme-bg &,
  .mxs-light-bg & {
    background-color: transparent;
  }
}

.mxs-thin-header.mxs-dark-bg {
  @media (min-width: 600px) {
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
      color: var(--almost-black);

      &:hover,
      &:focus,
      &:active {
        color: var(--almost-white);
      }
    }
  }

  .wp-block-navigation.is-style-tabs:not(.has-text-color) .wp-block-navigation-item__content {
    color: #000000;
  }

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

  .wp-block-navigation.is-style-tabs:not(.has-text-color) .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
  .wp-block-navigation.is-style-wide-tab:not(.has-text-color) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    &:active,
    &:focus,
    &:hover {
      color: var(--wp--preset--color--contrast);
    }
  }
}

.mxs-thin-header.mxs-light-bg {
  .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 {
    border-left: 1px solid;
    border-top: 1px solid;
    border-right: 1px solid;
    border-color: var(--wp--preset--color--primary-semitransparent);
  }
}

/* Navigation- block styles */
/* Wide Tab */
.is-style-wide-tab {
  .wp-block-navigation__container {
    .mxs-light-theme-bg &,
    .mxs-dark-theme-bg .mxs-light-bg & {
      background-color: var(--black-12pcnt);
    }

    .mxs-dark-bg & {
      background-color: var(--white-12pcnt);
    }

    .mxs-light-bg.mxs-thin-header &,
    .mxs-dark-bg.mxs-thin-header & {
      background-color: transparent;
    }
  }
}

/* Flat Nav */
.mxs-light-bg.is-style-flat-nav:not(.has-text-color) {
  .wp-block-navigation-item__content {
    color: var(--almost-black);
  }
}

.mxs-dark-bg.is-style-flat-nav:not(.has-text-color) {
  .wp-block-navigation-item__content {
    color: var(--almost-white);
  }
}
