.miz-navigation {
  --navigation-text-color: rgb(0, 0, 0);
  --navigation-bg-color: transparent;
  --navigation-nav-link-color: rgb(0, 0, 0);
  --navigation-nav-link-color-hover: rgb(0, 0, 0);
  --navigation-nav-link-bg-color: transparent;
  --navigation-nav-link-bg-color-hover: transparent;
  --navigation-nav-link-font-weight: 600;
  --navigation-subnav-link-font-weight: normal;
  /* Positioning */
  position: relative;
  /* Style */
  background-color: var(--navigation-bg-color);
  color: var(--navigation-text-color);
  /* Desktop */
}
.miz-navigation .miz-nav__link {
  --nav-link-color: var(--navigation-nav-link-color);
  --nav-link-bg-color: transparent;
  --nav-link-color-hover: rgb(0, 0, 0);
  --nav-link-bg-color-hover: var(--navigation-nav-link-bg-color-hover);
  --nav-link-font-weight: var(--navigation-nav-link-font-weight);
  --nav-link-border-color: rgb(0, 0, 0);
}
@media (min-width: 768px) {
  .miz-navigation {
    /* stylelint-disable-next-line */
  }
  .miz-navigation .miz-nav > .miz-nav__list {
    /* Display/Box Model */
    display: flex;
    flex-direction: row;
  }
  .miz-navigation .miz-nav__list .miz-nav__list .miz-nav__link {
    font-weight: var(--navigation-subnav-link-font-weight);
  }
}

.miz-navigation--primary {
  --navigation-bg-color: rgb(253, 184, 25);
  --navigation-nav-link-bg-color-hover: transparent;
  --navigation-accent-color: rgb(0, 0, 0);
}
.miz-navigation--primary .miz-nav__link {
  --nav-link-text-decoration-hover: none;
  --nav-link-background-color-hover: transparent;
  --nav-link-border-color: rgb(0, 0, 0);
  --nav-link-border-thickness: 4px;
  --effect-background-image: linear-gradient(0deg, var(--nav-link-border-color) 0%, var(--nav-link-border-color) 100%);
  display: inline-block;
  margin: 0 0 0 0;
  padding: 1rem 1rem 1rem 1rem;
  text-decoration: none;
  z-index: 1;
  background-image: var(--effect-background-image);
  background-repeat: no-repeat;
  background-size: 100% var(--nav-link-border-thickness);
  background-position: 0 100%;
  color: var(--nav-link-color);
  font-weight: 600;
  transition: background-size 0.1s ease-in-out, color 0.1s;
  background-size: 0 var(--nav-link-border-thickness);
}
.miz-navigation--primary .miz-nav__link:hover {
  background-size: 100% 100%;
  color: var(--nav-link-text-color);
}
.miz-navigation--primary .miz-nav__link:active {
  background-size: 100% 100%;
  background-image: linear-gradient(0deg, rgb(255, 209, 125) 0%, rgb(255, 209, 125) 100%);
}
.miz-navigation--primary .miz-nav__link:focus-visible {
  outline: 2px dashed var(--nav-link-text-color-hover);
  outline-offset: 1px;
  background-image: linear-gradient(0deg, rgb(255, 223, 165) 0%, rgb(255, 223, 165) 100%);
  background-size: 100% 100%;
  color: var(--nav-link-color);
}
.miz-navigation--primary .miz-nav__link:hover, .miz-navigation--primary .miz-nav__link:active {
  background-size: 100% var(--nav-link-border-thickness);
}

.miz-navigation--light {
  --navigation-bg-color: rgb(255, 255, 255);
  --navigation-nav-link-bg-color-hover: transparent;
  --navigation-accent-color: rgb(253, 184, 25);
}
.miz-navigation--light .miz-nav__link {
  --nav-link-text-decoration-hover: none;
  --nav-link-background-color-hover: transparent;
  --nav-link-border-color: rgb(0, 0, 0);
  --nav-link-border-thickness: 4px;
  --effect-background-image: linear-gradient(0deg, var(--nav-link-border-color) 0%, var(--nav-link-border-color) 100%);
  display: inline-block;
  margin: 0 0 0 0;
  padding: 1rem 1rem 1rem 1rem;
  text-decoration: none;
  z-index: 1;
  background-image: var(--effect-background-image);
  background-repeat: no-repeat;
  background-size: 100% var(--nav-link-border-thickness);
  background-position: 0 100%;
  color: var(--nav-link-color);
  font-weight: 600;
  transition: background-size 0.1s ease-in-out, color 0.1s;
  background-size: 0 var(--nav-link-border-thickness);
}
.miz-navigation--light .miz-nav__link:hover {
  background-size: 100% 100%;
  color: var(--nav-link-text-color);
}
.miz-navigation--light .miz-nav__link:active {
  background-size: 100% 100%;
  background-image: linear-gradient(0deg, rgb(255, 209, 125) 0%, rgb(255, 209, 125) 100%);
}
.miz-navigation--light .miz-nav__link:focus-visible {
  outline: 2px dashed var(--nav-link-text-color-hover);
  outline-offset: 1px;
  background-image: linear-gradient(0deg, rgb(212, 212, 212) 0%, rgb(212, 212, 212) 100%);
  background-size: 100% 100%;
  color: var(--nav-link-color);
}
.miz-navigation--light .miz-nav__link:hover, .miz-navigation--light .miz-nav__link:active {
  background-size: 100% var(--nav-link-border-thickness);
}

.miz-navigation--dark {
  --navigation-bg-color: rgb(0, 0, 0);
  --navigation-nav-link-bg-color-hover: transparent;
  --navigation-accent-color: rgb(253, 184, 25);
}
.miz-navigation--dark .miz-nav__link {
  --nav-link-text-color: rgb(255, 255, 255);
  --nav-link-text-decoration-hover: none;
  --nav-link-background-color-hover: transparent;
  --nav-link-border-color: rgb(253, 184, 25);
  --nav-link-border-thickness: 4px;
  --effect-background-image: linear-gradient(0deg, var(--nav-link-border-color) 0%, var(--nav-link-border-color) 100%);
  display: inline-block;
  margin: 0 0 0 0;
  padding: 1rem 1rem 1rem 1rem;
  text-decoration: none;
  z-index: 1;
  background-image: var(--effect-background-image);
  background-repeat: no-repeat;
  background-size: 100% var(--nav-link-border-thickness);
  background-position: 0 100%;
  color: var(--nav-link-text-color);
  font-weight: 600;
  transition: background-size 0.1s ease-in-out, color 0.1s;
  background-size: 0 var(--nav-link-border-thickness);
}
.miz-navigation--dark .miz-nav__link:hover {
  background-size: 100% 100%;
  color: var(--nav-link-text-color);
}
.miz-navigation--dark .miz-nav__link:active {
  background-size: 100% 100%;
  background-image: linear-gradient(0deg, rgb(255, 209, 125) 0%, rgb(255, 209, 125) 100%);
}
.miz-navigation--dark .miz-nav__link:focus-visible {
  outline: 2px dashed var(--nav-link-text-color-hover);
  outline-offset: 1px;
  background-image: linear-gradient(0deg, rgb(96, 96, 96) 0%, rgb(96, 96, 96) 100%);
  background-size: 100% 100%;
  color: var(--nav-link-text-color);
}
.miz-navigation--dark .miz-nav__link:hover, .miz-navigation--dark .miz-nav__link:active {
  background-size: 100% var(--nav-link-border-thickness);
}
.miz-navigation--dark .dropdown .miz-nav__link {
  --nav-link-text-color: rgb(0, 0, 0);
}