@charset "utf-8";
@import (optional, reference) "var.less";
/*menu*/
AX-MENU{
  display: block;
}
._menu {
  --_menu-gap-r: var(--_g);
  --_menu-sz-wdgt: 2.4rem;
  --_menu-w:var(--_w-menu);
  --_menu-h-1st:var(--_sz-input);
  width: var(--_menu-w);
  display: flex;
  flex-direction: column;
  &:where(ul),
  *:where(ul) {
    padding-inline-start: 0;
  }
  *:where(ul)>li:before {
    display: none;
  }
  .v3-spinAjax;
  &:where(:not([row], [spill])) {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  &:where(:not([expose])) ul {
    display: none;
  }
  li {
    box-sizing: border-box;
    position: relative;
    .v3-trans-all(var(--_dur-2), ease-out);
    &> :first-child {
      color: var(--_c-text);
      height: var(--_sz-header);
      padding-right: var(--_p);
      display: flex;
      align-items: center;
      position: relative;
      .v3-trans-all();
    }
    &> :first-child:where(:not([disabled])) {
      cursor: pointer;
    }
  }
  &>li {
    border-bottom: none;
    &:before {
      content: '';
      width: .3rem;
      height: 0;
      background-color: var(--_c-prim);
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      transition: all var(--_dur-2) ease-out;
    }
  }
  [role=indent] * {
    width: var(--_p);
  }
  [role=label] {
    color: var(--_c-text);
    line-height: var(--_sz-brief);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: auto;
    width: 0;
    height: 100%;
    .v3-trans-all();
  }
  &>li>:first-child [role=label] {
    font-weight: bold;
  }
  [role=icon] {
    color: var(--_c-text-aj);
    width: var(--_menu-sz-wdgt);
    text-align: center;
    margin-right: var(--_menu-gap-r);
    .v3-trans-all();
  }
  [role=disk] {
    height: var(--_menu-sz-wdgt);
    width: var(--_menu-sz-wdgt);
    margin-right: var(--_menu-gap-r);
    object-fit: cover;
    border-radius: 100%;
  }
  [role=cube] {
    height: var(--_menu-sz-wdgt);
    width: var(--_menu-sz-wdgt);
    margin-right: var(--_menu-gap-r);
    object-fit: cover;
    border-radius: var(--_r);
  }
  [role=arrow] {
    color: var(--_c-ignore);
    font-size: var(--_fs-arrow);
    font-family: var(--_ff-icon);
    width: var(--_sz-body);
    margin-right: calc(-1*var(--_p));
    text-align: center;
    .v3-trans-all();
    &:before {
      content: 'right';
    }
  }
  &:where([expose]) [role=arrow] {
    display: none;
  }
  [role=tips] {
    font-size: var(--_sz-ignore);
    color: var(--_c-ignore);
  }
  li:where(:has(>[expanded])):before {
    height: 100%;
  }
  [expanded]>[role=arrow] {
    transform: rotate(90deg);
  }
  [selected]:where(:not([disabled])) {
    background-color: var(--_c-prim-bg);
    [role=label],
    [role=icon] {
      color: var(--_c-prim);
    }
  }
  [disabled] {
    .v3-disabled;
    background-color: var(--_c-ignore-bg);
    &>* {
      opacity: var(--_o-active);
    }
  }
  li:hover>:first-child:where(:not([disabled])) [role=label],
  li:hover>:first-child:where(:not([disabled])) [role=icon],
  li:hover>:first-child:where(:not([disabled])) [role=arrow] {
    color: var(--_c-prim);
  }
}
._menu[scheme=dark] {
  background-color: var(--_c-prim-sg);
  >li {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
  }
  [role=label],
  [role=tips],
  [role=icon] {
    color: rgba(255, 255, 255, 0.5);
  }
  [role=arrow] {
    color: rgba(255, 255, 255, 0.2);
  }
  >li>:first-child [role=label] {
    font-weight: normal;
  }
  [selected] {
    background-color: var(--_c-prim-sd);
    [role=label],
    [role=icon] {
      color: #fff;
    }
  }
  [disabled] {
    background-color: var(--_c-ignore-bg);
    [role=label],
    [role=tips],
    [role=icon] {
      color: rgba(255, 255, 255, 0.2);
    }
  }
  li:hover>:first-child:where(:not([disabled])) [role=label],
  li:hover>:first-child:where(:not([disabled])) [role=icon],
  li:hover>:first-child:where(:not([disabled])) [role=arrow] {
    color: #fff;
  }
}
._menu[full] {
  --_menu-w:100%;
}
._menu[gapless] {
  >li:before {
    display: none;
  }
  >li>:first-child {
    padding-left: 0;
    [role=indent] {
      display: none;
    }
  }
  li> :first-child {
    padding-right: 0;
  }
  [role=arrow] {
    margin-right: 0;
  }
}
._menu[lamp=dot] {
  >li:before,
  >li>:first-child:before {
    display: none;
  }
  [selected]:before {
    width: .5rem;
    height: .5rem;
    border-radius: 100%;
    background-color: var(--_c-prim);
    content: '';
    position: absolute;
    left: calc(var(--_p)*2 - .4rem);
    top: calc((var(--_sz-header) - .5rem)/2);
  }
  &:where([gapless]) [selected]:before {
    left: calc(var(--_p) - .4rem);
  }
  >li>[selected]:before {
    display: none;
  }
}
._menu[lamp=line] {
  >li:before {
    display: none;
  }
  [selected]:before {
    position: absolute;
    background-color: var(--_c-prim);
    content: '';
    width: .2rem;
    height: 100%;
    left: 0;
    top: 0;
  }
}
._menu[align=left] [role=label] {
  justify-content: flex-start;
}
._menu[align=center] [role=label] {
  justify-content: center;
}
._menu[align=right] [role=label] {
  justify-content: flex-end;
}
._menu[spill]:where(:not([row])) {
  position: relative;
  z-index: 610;
  >li>ul {
    right: calc(var(--_w-list)*-1 - .6rem);
    top: -1px;
  }
  >li>:first-child:where([expanded])>[role=arrow] {
    transform: rotate(180deg);
  }
  .menu-spill;
}
._menu[row] {
  --_menu-w:auto;
  display: inline-flex;
  flex-direction: row;
  min-height: var(--_sz-body);
  position: relative;
  z-index: 610;
  >li {
    display: inline-block;
    box-sizing: border-box;
    &:before {
      display: none;
    }
    >:first-child {
      height: var(--_menu-h-1st);
      padding-left: var(--_p);
    }
    >:first-child [role=indent] {
      display: none
    }
    >:first-child [role=label] {
      font-weight: normal;
      position: relative;
      &:after {
        .v3-lamp;
      }
    }
    &:has([selected])>:first-child [role=label] {
      color: var(--_c-prim);
      &:after {
        transform: translate(-50%, 0) scaleX(1);
      }
    }
    >:first-child>[role=arrow]:before {
      content: 'down';
    }
    >:first-child:where([expanded])>[role=arrow] {
      transform: rotate(180deg);
    }
    >:first-child>[role=label] {
      flex: none;
      width: auto;
    }
    >[selected],
    >[disabled] {
      background: transparent;
    }
    >[expanded] [role=label] {
      color: var(--_c-prim);
    }
  }
  >li>ul {
    left: -0.1rem;
    top: calc(100% + .6rem);
  }
  .menu-spill;
  [role=label]+[role=tips],
  [role=label]+ax-badge,
  [role=label]+[role=badge] {
    margin-left: var(--_g);
  }
}
._menu[align=center]>li ul [role=arrow] {
  margin-left: calc(var(--_p) - var(--_sz-body));
}
._menu[align=center]:where(:not([row]))>li>:first-child [role=arrow] {
  margin-left: calc(var(--_p) - var(--_sz-body));
}
