.p-menu-main {
  --menu-spacing: var(--vp-header__spacing-menu);
  --menu-spacing__arrow--mobile: 3rem;

  --menu-color--mobile: var(--v-color__light);
  --menu-color--desktop: var(--menu-color--mobile);

  --menu-color__hover: var(--v-color__light);
  --menu-color__current: var(--menu-color__hover);

  --menu-color__arrow--mobile: var(--v-color__2);

  --menu-background--mobile: var(--v-color__5);
  --menu-background__submenu--mobile: var(--menu-background--mobile);
  --menu-background__arrow--mobile: var(--v-color__4);

  --menu-background--desktop: transparent;
  --menu-background__submenu--desktop: var(--v-color__5--transparent--alt1);

  --menu-border-top--mobile: 5px solid var(--v-color__4);
  --menu-border-bottom__li--mobile: 1px dashed var(--v-color__3);

  --menu-border-top__submenu--desktop: var(--menu-border-size__a--desktop) solid var(--v-color__4);
  --menu-border-size__a--desktop: 7px;
  --menu-border-bottom__a--desktop--current: var(--menu-border-size__a--desktop) solid var(--v-color__2);

  /*
  position: fixed;
  z-index: 550;
  top: var(--vp-header__height-total);
  left: 0;
  bottom: 0;
  width: 19rem;

  background-color: var(--menu-background--mobile);
  color: var(--menu-color--mobile);

  border-top: var(--menu-border-top--mobile) ;

  transition: var(--v-transition__default);
  box-shadow: var(--v-shadow__right);

  transform: translateX( calc( ( 100% + 2rem ) * -1 ) );

  display: flex;
  flex-direction: column;
  align-items: stretch;
  */
}

/*
.p-menu-main__menu {
  overflow: auto;
  flex: 1 1 0%;
}

.p-menu-main__extra {
  flex: 0 0 auto;
}

body.is-menu-open .p-menu-main {
  transform: translateX(0);
}

body.is-scrolled .p-menu-main {
  top: var(--vp-header__height-total--sticky);
}
*/

body.is-scrolled .p-menu-main {
  --menu-border-size__a--desktop: 4px;
}

.p-menu-main__menu .is-menu__li--level-0 {
  border-bottom: var(--menu-border-bottom__li--mobile);

  transition: var(--v-transition__default);
}

.p-menu-main__menu .is-menu__a {
  text-decoration: none;
  position: relative;
  z-index: 10;
}

.p-menu-main__menu .is-menu__a--level-0 {
  display: block;
  font-size: 100%;
  position: relative;
  padding-left: var(--v-layout__container-padding);
  padding-right: var(--v-layout__container-padding);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  font-size: 95%;
  opacity: 0.7;
}

.p-menu-main__menu .is-menu__li--level-0.menu-item-has-children .is-menu__a--level-0 {
  padding-right: calc( var(--menu-spacing__arrow--mobile) + 0.5rem );
}

.p-menu-main__menu .is-menu__li:hover > .is-menu__a {
  color: var(--menu-color__hover);
  opacity: 1;
}

.p-menu-main__menu .is-menu__li--level-0.current-menu-parent > .is-menu__a,
.p-menu-main__menu .is-menu__li--level-0.current-menu-item > .is-menu__a,
.p-menu-main__menu .is-menu__li--level-1.current-menu-item > .is-menu__a {
  color: var(--menu-color__current);
  opacity: 1;
}

.p-menu-main .is-menu__link-after {
  display: none;
  line-height: 1;
}

.p-menu-main .is-menu__link-after::before {
  content: "\e900";
  font-family: 'w153c-icons-1';
  font-size: 0.8rem;
  transition: var(--v-transition__default);
}

.p-menu-main__menu .is-menu__li--level-0.menu-item-has-children .is-menu__a--level-0 .is-menu__link-after--mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 10;
  inset: 0 0 0 auto;
  width: var(--menu-spacing__arrow--mobile);

  color: var(--menu-color__arrow--mobile);
  background-color: var(--menu-background__arrow--mobile);
}

.p-menu-main__menu .is-menu__li--level-0.menu-item-has-children.is-submenu-open .is-menu__a--level-0 .is-menu__link-after--mobile::before {
  transform: rotate(180deg);
}

.p-menu-main__menu .is-menu__li--level-0.is-submenu-open {
  padding-bottom: 0.8rem;
}

.p-menu-main__menu .is-menu__submenu--level-0 {
  transition: var(--v-transition__default);
  font-size: 95%;
  overflow: hidden;
}

.p-menu-main__menu .is-menu__li--level-0:not(.is-submenu-open) .is-menu__submenu--level-0 {
  height: 0 !important;
}

.p-menu-main__menu .is-menu__a--level-1 {
  display: block;
  padding: 0.1rem var(--v-layout__container-padding);
}

@media (min-width: 1300px) {
  .p-menu-main,
  .p-menu-main__menu,
  .p-menu-main__menu .is-menu__li--level-0,
  .p-menu-main__menu .is-menu__a--level-0 {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
  }

  .p-menu-main {
    position: static;
    background-color: var(--menu-background--desktop);
    border-top: none;
    box-shadow: none;
    transform: none;
    width: auto;

    flex-direction: row;

    color: var(--menu-color--desktop);
  }

  .p-menu-main__menu {
    overflow: unset;

    margin: 0 calc( ( var(--menu-spacing) / 2 ) * -1 );
  }

  .p-menu-main__menu .is-menu__li {
    position: relative;
  }

  .p-menu-main__menu .is-menu__li--level-0 {
    padding: 0 calc( var(--menu-spacing) / 2 );
    border-bottom: none;
  }

  .p-menu-main__menu .is-menu__a--level-0 {
    gap: 0.2rem;
    align-items: center;
    padding: 0 !important;
    border-top: var(--menu-border-size__a--desktop) solid transparent;
    border-bottom: var(--menu-border-size__a--desktop) solid transparent;
    font-size: 125%;
  }

  body.is-scrolled .p-menu-main__menu .is-menu__a--level-0 {
    font-size: 100%;
  }

  .p-menu-main__menu .is-menu__li--level-0.current-menu-parent > .is-menu__a,
  .p-menu-main__menu .is-menu__li--level-0.current-menu-item > .is-menu__a {
    border-top: var(--menu-border-bottom__a--desktop--current);
  }

  .p-menu-main__menu .is-menu__li--level-0.menu-item-has-children .is-menu__a--level-0 .is-menu__link-after--mobile {
    display: none;
  }

  .p-menu-main__menu .is-menu__li--level-0.menu-item-has-children .is-menu__a--level-0 .is-menu__link-after:not(.is-menu__link-after--mobile) {
    display: block;
  }

  .p-menu-main__menu .is-menu__submenu--level-0 {
    background-color: var(--menu-background__submenu--desktop);

    position: absolute;
    top: calc( 100% - var(--menu-border-size__a--desktop) );
    left: calc( var(--menu-spacing) / 2 );
    z-index: 500;
    width: 15rem;
    box-shadow: var(--v-shadow__menu);
    border-top: var(--menu-border-top__submenu--desktop);
    padding: 0.5rem 0;

    visibility: hidden;
    opacity: 0;
    transform: translateY(1rem);

    height: auto;
    overflow: unset;
  }

  .p-menu-main__menu .is-menu__li--level-0:hover .is-menu__submenu--level-0 {
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);
  }

  .p-menu-main__menu .is-menu__li--level-0:not(.is-submenu-open) .is-menu__submenu--level-0 {
    height: auto !important;
  }

  .p-menu-main__menu .is-menu__a--level-1 {
    padding: 0.3rem calc( var(--menu-spacing) / 2 );
  }
}
