/*******************************************************************************
 * OFFCANVAS TOGGLE
 *******************************************************************************/

@media (min-width: 1025px) {
  .aero-menu-offcanvas-toggle {
    display: none;
  }
}

/*******************************************************************************
 * OFFCANVAS
 *******************************************************************************/

.aero-menu-offcanvas {
  position: fixed;
  top: calc(
    var(--wp-admin--admin-bar--height, 0px) + var(--aero-header-height)
  );
  bottom: 0;
  z-index: 999;
  
  visibility: hidden;
}

.aero-menu-offcanvas.show {
  visibility: visible;
}

/* Directions */

.aero-menu-offcanvas.left {
  left: 0;
  
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.aero-menu-offcanvas.right {
  right: 0;
  
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Content */

.aero-menu-offcanvas > .aero-window-content {
  height: 100%;
  overflow-y: scroll;
  padding: 2px;
}

/*******************************************************************************
 * MENU
 *******************************************************************************/

.aero-menu-offcanvas .menu,
.aero-menu-offcanvas .sub-menu {
  padding: 0;
  margin: 0;
  list-style: none;
  min-width: 250px;
}

/* Sub-menu */

.aero-menu-offcanvas .sub-menu {
  display: none;
}

.aero-menu-offcanvas .sub-menu.show {
  display: block;
}

/*******************************************************************************
 * MENU ITEM
 *******************************************************************************/

.aero-menu-offcanvas .menu-item-inner {
  display: flex;
  align-items: center;
  height: 42px;
  
  border-radius: 6px;
  border: 1px solid transparent;
}

/* Hover */

.aero-menu-offcanvas .menu-item-inner:hover {
  border-color: var(--aero-c-control-border-hover);
  
  background-color: var(--aero-c-control-hover-overlay);
}

/* Active */

.aero-menu-offcanvas .menu-item-inner:has(> a:active),
.aero-menu-offcanvas:not(:has(a:active)) .menu-item-inner.active {
  border-color: var(--aero-c-control-border-active) !important;
  
  background-color: var(--aero-c-control-active-overlay) !important;
}

/* Sub menu item */

.aero-menu-offcanvas .sub-menu > .menu-item > .menu-item-inner {
  padding-left: 20px;
}

/*******************************************************************************
 * LINK
 *******************************************************************************/

.aero-menu-offcanvas a {
  display: flex;
  align-items: center;
  flex: 1;
  height: 100%;
}

.aero-menu-offcanvas a,
.aero-menu-offcanvas a:hover,
.aero-menu-offcanvas a:visited {
  color: var(--aero-c-text);
}

/*******************************************************************************
 * DROPDOWN TOGGLE
 *******************************************************************************/

.aero-menu-offcanvas .dropdown-toggle {
  display: flex;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
  height: 100%;
}

.aero-menu-offcanvas .dropdown-toggle i {
  font-size: 1.2em;
}

/* Expanded */

.aero-menu-offcanvas .menu-item:has(> .sub-menu.show) > .menu-item-inner
    > .dropdown-toggle > i {
  transform: translateY(10%) rotate(45deg);
}

/* Sub menu dropdown toggle */

.aero-menu-offcanvas .sub-menu .dropdown-toggle {
  visibility: hidden;
}