:root {
  --a_menu_width_expanded: 21.875rem;
  --a_menu_width_collapsed: 3.75rem;
  --a_menu_transition: 0.5s;
  --a_menu_btn_toggle_top: 0.3125rem;
  --a_menu_btn_toggle_margin_left: 0.5rem;
  --a_menu_mobile_btn_toggle_margin_left: 0.5rem;
  --a_menu_mobile_btn_toggle_margin_top: 0.5rem;
  --a_menu_mobile_z_index: 1051;
  --a_menu_close_opacity: .3;
  --a_menu_page_bg: var(--a_color_white);
}

.a_menu {
  --a_menu_width: var(--a_menu_width_expanded);
  --a_menu_top: 0;
  --a_menu_navbar_top_height: 3.125rem;
  --a_menu_navbar_top_padding: .7rem .5rem .5rem .5rem;
  --a_menu_navbar_top_margin_bottom: .5rem;
  --a_menu_background: var(--a_color_white);
  --a_menu_border_color: var(--a_color_gray_300);
  --a_menu_box_shadow_color: var(--a_color_gray_600);
  --a_menu_box_shadow_size: 2px 6px 6px 1px;
  --a_menu_panel_child_offset: 100%;
  --a_menu_panel_parent_offset: -30%;
  --a_menu_panel_iconpanel_size: var(--a_menu_width_collapsed);
  --a_menu_panel_color: var(--a_color_gray_600);
  --a_menu_panel_secondary_bg: var(--a_color_white);
  --a_menu_panel_main_link_hover_color: var(--a_color_gray_900);
  --a_menu_panel_main_link_hover_bg: var(--a_color_gray_300);
  --a_menu_panel_main_link_padding_left: 1.5625rem;
  --a_menu_link_color: var(--a_color_gray_900);
  --a_menu_link_hover_color: var(--a_color_gray_900);
  --a_menu_link_hover_bg: var(--a_color_gray_300);
  --a_menu_listitem_padding: .3rem;
  --a_menu_listitem_panel_secondary_padding_x: .6rem;
  --a_menu_listitem_panel_secondary_padding_y: .3rem;
  --a_menu_link_padding_x: .7rem;
  --a_menu_link_padding_y: .5rem;
  --a_menu_link_selected_bg: var(--a_color_gray_200);
  --a_menu_link_selected_color: inherit;
  --a_menu_link_border_color: transparent;
  --a_menu_link_border_radius: .3rem;
  --a_menu_link_focus_size: 0 0 1px 3px;
  --a_menu_icon_color: var(--a_menu_link_color);
  --a_menu_focus_shadow_color: var(--a_color_focus);
  --a_menu_list_header_bg: var(--a_color_gray_200);
  --a_menu_breadcrumb_min_height: 4.0625rem;
  --a_menu_breadcrumb_border_bottom_width: 1px;
  --a_menu_submenu_open_bg: var(--a_color_primary);
  --a_menu_submenu_open_color: var(--a_color_white);
  --a_menu_submenu_border_radius: 1rem;
  --a_menu_submenu_border_width: 2px;
  --a_menu_search_height: 2.375rem;
  --a_menu_search_link_focus_size: inset 0 0 1px 2px;
  --a_menu_close_panel_width: 18.75rem;
  --a_menu_close_panel_max_height: 25rem;
  --a_menu_close_panel_border_radius: .3rem;
  --a_menu_close_panel_box_shadow_color: var(--a_color_gray_600);
  --a_menu_close_panel_box_shadow_size: 0 0 7px 3px;
  --a_menu_close_panel_header_color: var(--a_color_gray_900);
  --a_menu_close_panel_header_border_bottom_color: var(--a_color_gray_600);
  --a_menu_close_panel_header_border_bottom_width: 1px;
  --a_menu_link_line_horizontal_display: none;

  width: var(--a_menu_width);
  position: absolute;
  top: var(--a_menu_top);
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--a_menu_background);
  margin: 0;
  padding: 0;
  border-right: 1px solid var(--a_menu_border_color);
  z-index: 2;
  box-shadow: var(--a_menu_box_shadow_size) var(--a_menu_box_shadow_color);
}
.a_menu.a_menu_inline {
  position: relative;
  inset: auto;
  height: 100%;
  max-width: 100%;
}

.a_menu__page {
  background-color: var(--a_menu_page_bg);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.a_menu__wrapper_open {
  .a_menu__page {
    width: calc(100% - var(--a_menu_width_expanded));
    margin-left: var(--a_menu_width_expanded);
  }
}

.a_menu__wrapper_close {
  .a_menu__page {
    width: calc(100% - var(--a_menu_width_collapsed));
    margin-left: var(--a_menu_width_collapsed);
  }
}

.a_menu__listview {
  list-style: none;
  padding: 0;
  margin: 0;
}
.a_menu__listitem {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding: var(--a_menu_listitem_padding);
  margin: 0;
  border-color: var(--a_menu_border_color);
  &:not(:last-child):after {
    .a_menu__panel_main & {
      left: var(--a_menu_panel_iconpanel_size);
    }
    content: "";
    border-color: inherit;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    display: var(--a_menu_link_line_horizontal_display);
    position: absolute;
    inset-inline-start: 1.25rem;
    inset-inline-end: 0;
    bottom: -1px;
  }
}
.a_menu__list_header {
  padding-left: var(--a_menu_panel_iconpanel_size);
  background-color: var(--a_menu_list_header_bg);
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.a_menu__list_header_search {
  padding-left: var(--a_menu_link_padding_x);
  padding-right: var(--a_menu_link_padding_x);
}
.a_menu__link {
  flex-grow: 1;
  flex-basis: 10%;
  display: block;
  padding: var(--a_menu_link_padding_y) var(--a_menu_link_padding_x);
  cursor: pointer;
  color: var(--a_menu_link_color);
  border: 1px solid var(--a_menu_link_border_color);
  border-radius: var(--a_menu_link_border_radius);
  &,
  &:active,
  &:hover,
  &:link,
  &:visited {
    text-decoration: none;
    color: var(--a_menu_link_color);
  }
  &:focus {
    outline: 0;
    box-shadow: var(--a_menu_link_focus_size) var(--a_menu_focus_shadow_color);
    color: var(--a_menu_link_color);
  }
  &:hover {
    outline: 0;
    color: var(--a_menu_link_hover_color);
    background-color: var(--a_menu_link_hover_bg);
  }
  &.a_menu__link_active {
    --a_menu_icon_color: var(--a_menu_submenu_open_color);
    --a_menu_link_border_color: var(--a_menu_submenu_open_color);

    background-color: var(--a_menu_submenu_open_bg);
    color: var(--a_menu_submenu_open_color);
  }

  &.a_menu__link_open {
    --a_menu_icon_color: var(--a_menu_submenu_open_color);
    --a_menu_link_border_color: var(--a_menu_submenu_open_bg);

    background-color: var(--a_menu_submenu_open_bg);
    color: var(--a_menu_submenu_open_color);
  }
}
.a_menu__link_panel_main {
  .a_menu__link__text {
    padding-left: var(--a_menu_panel_main_link_padding_left);
  }
}
.a_menu__link_disabled {
  opacity: .8;
  cursor: not-allowed;
}
.a_menu__link__text_truncated {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.a_menu__link_selected {
  background-color: var(--a_menu_link_selected_bg);
  color: var(--a_menu_link_selected_color);
}
.a_menu__link__icon {
  width: 1.5625rem;
  height: 1.5625rem;
  text-align: center;
  color: var(--a_menu_icon_color);
}
.a_menu__link__counter {
  display: block;
  padding-inline-start: .5rem;
  float: right;
}
.a_menu__link__counter__icon {
  margin-left: .5rem;
}
.a_menu__link_btn {
  display: block;
  position: relative;
  width: auto;
}

.a_menu_clickable {
  cursor: pointer;
}

.a_menu__navbar_top {
  flex-shrink: 0;
  display: flex;
  padding: var(--a_menu_navbar_top_padding);
  height: var(--a_menu_navbar_top_height);
  margin-bottom: var(--a_menu_navbar_top_margin_bottom);
}
// search
.a_menu__panel_search {
  .a_menu__listitem {
    padding: 0;
  }
}
.a_menu__navbar_top__search {
  width: 100%;
  .a_input {
    height: var(--a_menu_search_height);
  }
  .a_form_element__parent {
    --a_form_element_label_float_top: 50%;
  }
}
.a_menu__navbar_top_sub {
  display: flex;
  align-items: center;
  padding-left: var(--a_menu_width_collapsed);
  height: var(--a_menu_breadcrumb_min_height);
}
.a_menu__navbar_top_sub__search {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  margin: 0 var(--a_menu_listitem_padding);
}

.a_menu__btn_toggle {
  --a_menu_btn_toggle_width: 2.625rem;
  --a_menu_btn_toggle_height: 2.375rem;
  --a_menu_btn_toggle_bar_width: 1.125rem;
  --a_menu_btn_toggle_bar_height: 2px;
  --a_menu_btn_toggle_bar_1_top: 0.75rem;
  --a_menu_btn_toggle_bar_2_top: calc(var(--a_menu_btn_toggle_height) / 2 - var(--a_menu_btn_toggle_bar_height) / 2);
  --a_menu_btn_toggle_bar_3_top: 1.5rem;
  --a_menu_btn_toggle_bar_bg: var(--a_btn_color, var(--a_color_white));

  min-height: var(--a_menu_btn_toggle_height);
  height: var(--a_menu_btn_toggle_height);
  min-width: var(--a_menu_btn_toggle_width);
  width: var(--a_menu_btn_toggle_width);
  position: relative;
  &:active,
  &.active {
    --a_menu_btn_toggle_bar_bg: var(--a_btn_active_color, var(--a_color_white));
  }
  &:hover,
  &:focus {
    --a_menu_btn_toggle_bar_bg: var(--a_btn_hover_color, var(--a_color_white));
  }
}
.a_menu__btn_toggle_inside_menu {
  margin-right: 1rem;
}
.a_menu__btn_toggle_outside_menu:not(.a_menu__btn_toggle_only_mobile) {
  display: none;
}

.a_menu__btn_toggle__bar {
  display: block;
  background-color: var(--a_menu_btn_toggle_bar_bg);
  width: var(--a_menu_btn_toggle_bar_width);
  height: var(--a_menu_btn_toggle_bar_height);
  border-radius: 0.0625rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: var(--a_menu_transition);
  &.a_menu__btn_toggle__bar_1 {
    top: var(--a_menu_btn_toggle_bar_1_top);
  }
  &.a_menu__btn_toggle__bar_2 {
    top: var(--a_menu_btn_toggle_bar_2_top);
  }
  &.a_menu__btn_toggle__bar_3 {
    top: var(--a_menu_btn_toggle_bar_3_top);
  }
}
.a_menu__btn_toggle_open {
  .a_menu__btn_toggle__bar {
    &.a_menu__btn_toggle__bar_1 {
      top: var(--a_menu_btn_toggle_bar_2_top);
      transform: translateX(-50%) rotate(45deg);
    }
    &.a_menu__btn_toggle__bar_2 {
      opacity: 0;
    }
    &.a_menu__btn_toggle__bar_3 {
      top: var(--a_menu_btn_toggle_bar_2_top);
      transform: translateX(-50%) rotate(-45deg);
    }
  }
}

.a_menu__backdrop {
  z-index: -1;
}
// mobile
.a_mobile {
  .a_menu_close {
    display: none;
  }
  .a_menu__page {
    width: 100%;
    margin-left: 0;
  }
  .a_menu_open {
    max-width: 100vw;
  }
  &.a_menu__wrapper_open {
    overflow: hidden;
    .a_menu__page {
      opacity: .5;
    }
    //    .a_menu__backdrop {
    //      opacity: .5;
    //      z-index: var(--a__backdrop_zindex);
    //    }
  }
  .a_menu__btn_toggle_close.a_menu__btn_toggle_outside_menu {
    display: inline-block;
  }
}
.a_menu_only_mobile {
  &.a_menu_close {
    display: none;
  }
  &.a_menu_open {
    max-width: 100vw;
  }
  & + .a_menu__page {
    padding-left: 1rem;
  }
}

// panels
.a_menu__panels {
  position: absolute;
  top: 0;
  left: var(--a_menu_width_collapsed);
  right: 0;
  bottom: 0;
  overflow: hidden;
  display: none;
}
.a_menu__panels__main {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100% - var(--a_menu_navbar_top_height) - var(--a_menu_navbar_top_margin_bottom));
  .a_vertical_scroll {
    height: calc(100% - var(--a_menu_breadcrumb_min_height) + 1.25rem);
    margin-top: -1.25rem;
    &:not(.a_vertical_scroll_scrollable) {
      padding-bottom: 0;
      .a_vertical_scroll__btn__wrapper_up {
        border-bottom: 2px solid var(--a_menu_border_color);
      }
      .a_vertical_scroll__btn__wrapper_down {
        display: none;
      }
    }
    .a_menu__panel_main {
      position: relative;
      overflow: visible;
      transform: none;
    }
  }
}

.a_menu__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--a_menu_panel_color);
  background: var(--a_menu_background);
  transform: translate3d(var(--a_menu_panel_child_offset),0,0);
  border-color: var(--a_menu_border_color);
  &:not(.a_menu__panel_main) {
    border-inline-start-width: 1px;
    border-inline-start-style: solid;
  }
}
.a_menu__panel_opened {
  z-index: 2;
  transform: translate3d(0,0,0);
}
.a_menu__panel_parent {
  overflow-y: hidden;
  transform: unset;
  z-index: 0;
  .a_menu__list_header {
    opacity: 0;
  }
}
.a_menu__panels__main {
  & ~ .a_menu__panel {
    inset-inline-start: var(--a_menu_panel_iconpanel_size);
  }
  &.a_menu__panel_parent {
    .a_menu__breadcrumb {
      opacity: 0;
    }
  }
}
.a_menu__panel_secondary {
  display: none;
  background-color: var(--a_menu_panel_secondary_bg);
  &.a_menu__panel_opened {
    display: block;
    border-left: var(--a_menu_submenu_border_width) solid var(--a_menu_submenu_open_bg);
    border-top: var(--a_menu_submenu_border_width) solid var(--a_menu_submenu_open_bg);
    border-top-left-radius: var(--a_menu_submenu_border_radius);
  }
  .a_menu__listitem {
    padding: var(--a_menu_listitem_panel_secondary_padding_y) var(--a_menu_listitem_panel_secondary_padding_x);
  }
}
.a_menu_sub_open {
  .a_menu__panels {
    display: block;
  }
}

.a_menu_sub_open,
.a_menu_close {
  .a_menu__navbar_top_sub__text {
    display: none;
  }
  .a_menu__panel_search .a_menu__navbar_top_sub__text {
    display: block;
  }
}
.a_menu_open {
  .a_menu__navbar_top_sub__search {
    display: none;
  }
}
.a_menu__panel_main {
  position: relative;
  .a_menu__link:hover {
    --a_menu_link_hover_color: var(--a_menu_panel_main_link_hover_color);
    --a_menu_link_hover_bg: var(--a_menu_panel_main_link_hover_bg);
  }
}

// menu closed
.a_menu_close {
  width: var(--a_menu_width_collapsed);
  .a_menu__navbar_top__search {
    display: none;
  }
  .a_menu__list_header {
    opacity: 0;
    width: var(--a_menu_width_expanded);
  }
  .a_menu__panel_main {
    .a_menu__link__text {
      display: none;
    }
    .a_menu__link__counter {
      display: none;
    }
  }
  .a_menu__listitem:after {
    display: none;
  }
  .a_menu__btn_toggle {
    margin: 0;
  }
  .a_menu__panel {
    overflow: hidden;
  }
  .a_menu__panels {
    position: relative;
    overflow: visible;
    .a_menu__breadcrumb_secondary {
      display: none;
    }
    .a_menu__panel {
      width: var(--a_menu_close_panel_width);
      bottom: auto;
      right: auto;
      left: auto;
      top: auto;
      border: none;
      border-radius: var(--a_menu_close_panel_border_radius);
      // Aloha
      box-shadow: var(--a_menu_close_panel_box_shadow_size) var(--a_color_gray_600);
      max-height: var(--a_menu_close_panel_max_height);
      overflow-y: auto;
      z-index: 2;
    }
    .a_menu__panel_parent {
      display: block;
      overflow-y: hidden;
    }
  }
  .a_menu__link {
    text-overflow: clip;
  }
  .a_menu__navbar_top_sub {
    padding-left: 0;
    align-items: baseline;
  }
}
.a_menu__vertical_scroll_hidden .a_scroll_content{
  overflow-y: hidden;
}
// breadcrumb
.a_menu__breadcrumb {
  min-height: var(--a_menu_breadcrumb_min_height);
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}
.a_menu__breadcrumb_secondary {
  &:after {
    content: "";
    display: block;
    position: absolute;
    height: var(--a_menu_breadcrumb_border_bottom_width);
    width: calc(100% - 2rem);
    background-color: var(--a_menu_submenu_open_bg);
    left: 1rem;
    bottom: 0;
  }
}
.a_menu__breadcrumb__ul {
  list-style: none;
  display: block;
  width: 100%;
  margin: 0.5rem;
  padding: 0;
}
.a_menu__breadcrumb__ul_truncated {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}
.a_menu__breadcrumb__ul_search {
  display: flex;
  .a_menu__listitem {
    overflow-x: hidden;
    &:after {
      display: none;
    }
  }
  .a_menu__link {
    padding: 0.2rem 0.3rem;
    &:focus,
    &:hover {
      box-shadow: var(--a_menu_search_link_focus_size) var(--a_menu_focus_shadow_color);
    }
  }
  .a_menu__breadcrumbs__item__divider {
    padding: 0.2rem;
  }
}
.a_menu__breadcrumbs__item {
  display: inline;
}
.a_menu__breadcrumbs__item__divider {
  padding-right: .2rem;
}
.a_menu__breadcrumbs__link {
  padding: .2rem;
  font-size: .8rem;
}
.a_menu__breadcrumb__ul_truncated__btn {
  margin-right: .2rem;
}
.a_menu__breadcrumb__ul_truncated__dropdown {
  padding: .2rem;
  min-width: auto;
}

.a_menu__panel_header {
  color: var(--a_menu_close_panel_header_color);
  border-bottom: var(--a_menu_close_panel_header_border_bottom_width) solid var(--a_menu_close_panel_header_border_bottom_color);
  padding: var(--a_menu_listitem_panel_secondary_padding_y) var(--a_menu_listitem_panel_secondary_padding_x);
}
.a_menu__panel_header__text {
  display: inline-block;
  padding: var(--a_menu_link_padding_y) var(--a_menu_link_padding_x);
}
.a_menu__backdrop {
  opacity: 0.5;
  z-index: 1;
  left: var(--a_menu_width_expanded);
}