/* Header, container, and grid */

.mkui-header {
  z-index: 100;
  height: var(--height-header);
  background: var(--color-bg-header);
  border-bottom: var(--border-header);
  box-shadow: var(--shadow-header);
}
.mkui-header.d-sticky,
.mkui-header.m-sticky {
  position: sticky;
}
.mkui-header.sticky-scroll {
  position: sticky;
  top: 0;
  transition: transform 0.4s ease-in-out;
}
.mkui-header.sticky-scroll.abs {
  position: fixed;
}
.mkui-header.sticky-scroll.hide {
  transform: translateY(-100%);
}
.mkui-header.abs {
  position: absolute;
  left: 0;
}
.mkui-nav {
  display: grid;
  height: 100%;
  margin: 0 auto;
  max-width: var(--max-width-header);
}
.nav-area {
  display: flex;
  align-items: center;
}
.button-slot {
  grid-area: button;
}
.menu-slot {
  grid-area: menu;
}
.logo-slot {
  grid-area: logo;
}
.widget-slot {
  grid-area: widgets;
}
.menu-slot.split {
  grid-area: menu-split;
  justify-content: flex-end;
}
.mkui-nav.basic .menu-slot {
  justify-content: flex-end;
}
.mkui-nav.basic-left .menu-slot {
  justify-content: flex-start;
}
.mkui-nav.basic-center .menu-slot {
  justify-content: center;
}
.mkui-nav.center .menu-slot,
.mkui-nav.center .logo-slot {
  justify-content: center;
}
.mkui-nav.split .widget-slot,
.mkui-nav.center .widget-slot {
  top: 0;
  right: 0;
  height: 100%;
}
/* Multiple menu button layouts */
.mkui-nav.minimal-center .button-slot {
  justify-content: flex-start;
}
.mkui-nav.split .widget-slot,
.mkui-nav.center .widget-slot {
  position: relative;
}
.mkui-nav.minimal-left.m-basic .button-slot {
  display: none;
}
.mkui-nav.minimal.m-logo-center-alt .button-slot,
.mkui-nav.minimal.m-basic-menu-left .button-slot {
  display: flex;
}
.mkui-nav.m-logo-center-alt .button-slot {
  justify-content: flex-end;
}

/* Nav Menu */

.mkui-nav-menu .submenu {
  display: inline-block;
  background: var(--color-bg-header);
  width: max-content;
  margin: 0;
  padding: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  list-style: none;
}
.mkui-nav-menu .submenu a {
  width: 100%;
}

.mkui-nav-menu .submenu li {
  display: block;
}

.mkui-nav-menu .submenu.depth-0 {
  position: absolute;
  top: 99%;
  left: 0;
}

.mkui-nav-menu .submenu:not(.depth-0) {
  position: fixed;
  height: 100%;
  left: 100%;
  top: 0;
}

.mkui-nav-menu .menu-item.has-submenu {
  position: relative;
}

.mkui-nav-menu .menu-primary > .menu-item {
  display: inline-flex;
}

.submenu-toggle {
  border: none;
  background: transparent;
}

.submenu-toggle svg {
  height: 12px;
  width: 12px;
  transition: transform ease 0.2s;
  transform-origin: 50% 55%;
}

.submenu-toggle svg.rotate {
  transform: rotate(180deg);
}

.mkui-fade .submenu {
  transition: all ease 0.3s;
}

.mkui-fade li:focus-within > .submenu,
.mkui-fade li:hover > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-fade-down .submenu {
  transform: translateY(-10px);
}

.dropdown-fade-up .submenu {
  transform: translateY(10px);
}

.dropdown-scale .submenu {
  opacity: 1;
  visibility: visible;
  transform: scale(1, 0);
  transform-origin: 0 0;
  transition: transform ease-in-out 0.25s;
}

.dropdown-scale .submenu li {
  opacity: 0;
  transition: opacity 0.03s ease-in-out;
}

.dropdown-scale li:focus-within > .submenu,
.dropdown-scale li:hover > .submenu {
  transform: scale(1, 1);
}

.dropdown-scale li:focus-within > .submenu li,
.dropdown-scale li:hover > .submenu li {
  opacity: 1;
  transition: opacity ease-in-out 0.2s 0.2s;
}

.menu-item.mkui-caret > a:after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.4em;
  vertical-align: 0.25em;
  border-top: 0.25em solid;
  border-right: 0.25em solid transparent;
  border-left: 0.25em solid transparent;
}

/* Menu Button */

.mkui-btn-menu {
  display: block;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 1;
}

.mkui-btn-menu svg {
  display: flex;
  align-items: center;
  margin: 0 auto;
  fill: var(--color-text);
}

.mkui-btn-menu-icon {
  height: 27px;
}

.mkui-btn-menu-icon.close {
  height: 35px;
}