@charset "utf-8";
@import (optional, reference) "var.less";
/*Group button*/
/*Header*/
AX-HEADER {
  --_header-height: calc(var(--_sz-header) + 1.0rem);
  --_header-gap: var(--_m);
  --_child-gap: var(--_sz-body);
  display: block;
  width: 100%;
  position: relative;
  z-index: 710;
  ._header-wrap {
    width:100%;
    box-sizing: border-box;
    background-color: var(--_c-stage);
    border-bottom: 1px solid var(--_c-text-bd);
    .v3-trans-all();
    display: flex;
    align-items: center;
    flex: auto;
  }
  ._header-holder {
    height: calc(var(--_sz-header) + 1.0rem);
    overflow: hidden;
  }
  &:where(:not([inherit]))>._header-wrap {
    position: fixed;
    left: 0;
    top: 0;
  }
  &:where([inherit]) {
    ._header-wrap {
      position: inherit;
      left: auto;
      top: auto;
    }
    ._header-holder {
      display: none;
    }
  }
  ._header-l,
  ._header-r {
    display: none;
    align-items: center;
    >:where(:not(AX-DEFORM)) {
      color: var(--_c-text);
      height: var(--_sz-input);
      aspect-ratio: 1 / 1;
      .v3-flex-center(inline-flex);
      position: relative;
      >[class*="_icon-"] {
        font-size: var(--_sz-brief);
      }
      >AX-BADGE {
        position: absolute;
        bottom: calc(100% - 1.4rem);
        left: calc(100% - 1.4rem);
      }
    }
  }
  ._header-c {
    box-sizing: border-box;
    flex: auto;
    [class*="_wrap"]{
      .v3-flex-center(flex);
    }
  }
  ._header-head {
    flex: auto;
    margin-left: var(--_header-gap);
  }
  ._header-body {
    display: flex;
    align-items: center;
    margin-right: var(--_header-gap);
  }
  [rep=logo] {
    height: var(--_header-height);
    .v3-trans-all();
    vertical-align: middle;
    position: relative;
    img {
      max-width: none;
      height: inherit;
    }
  }
  ._header-c [class*="_wrap"] {
    box-sizing: border-box;
    .v3-flex-center();
    &>._header-head {
      margin-left: 0;
    }
    &>._header-body {
      margin-right: 0;
    }
  }
  [rep=nav] {
    margin-left: var(--_child-gap);
    .v3-flex-center();
    ._group-lamp {
      --_group-height: var(--_header-height);
    }
    ._grade>[rep=host] {
      line-height: var(--_header-height);
    }
    ._menu[row] {
      --_menu-h-1st: var(--_header-height);
    }
  }
  [rep=btns] {
    margin-left: var(--_child-gap);
  }
  [rep=link] {
    color: var(--_c-text);
    margin-left: var(--_child-gap);
    &:hover {
      color: var(--_c-prim);
    }
  }
  [rep=icons] {
    margin-left: var(--_child-gap);
    padding: 0 var(--_p);
    height: var(--_header-height);
    display: inline-flex;
    align-items: center;
  }
  [rep=icons]>* {
    color: var(--_c-text);
    height: var(--_sz-input);
    text-align: center;
    .v3-trans-all();
    .v3-flex-center(inline-flex);
    position: relative;
    z-index: 2;
    &:has([class*="_icon-"]) {
      aspect-ratio: 1 / 1;
      justify-content: center;
    }
    [class*="_icon-"] {
      font-size: var(--_sz-brief);
    }
    [class*="_icon-"]+AX-BADGE {
      position: absolute;
      bottom: calc(100% - 1.6rem);
      left: calc(100% - 1.2rem);
    }
  }
  [rep=dropdown] {
    .v3-flex-center(inline-flex);
    margin-left: var(--_child-gap);
    &:after {
      content: 'down';
      font-family: var(--_ff-icon);
      font-size: var(--_fs-arrow);
      color: var(--_c-ignore);
      margin-left: var(--_g);
      .v3-trans-all();
    }
    &._opened:after {
      rotate: 180deg;
    }
  }
  [rep=avatar] {
    margin-left: var(--_child-gap);
    .v3-flex-center(inline-flex);
    &:after {
      content: 'down';
      font-family: var(--_ff-icon);
      font-size: var(--_fs-arrow);
      color: var(--_c-ignore);
      margin-left: var(--_g);
      .v3-trans-all();
    }
    &._opened:after {
      rotate: 180deg;
    }
  }
}
._header {
  --_header-height: calc(var(--_sz-header) + 1.0rem);
  --_header-gap: var(--_m);
  --_child-gap: var(--_sz-body);
  background-color: var(--_c-stage);
  border: 1px solid var(--_c-text-bd);
  .v3-trans-all();
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 610;
  ._header-wrap {
    display: flex;
    align-items: center;
    flex: auto;
  }
  &:where(:not([inherit])) {
    position: fixed;
    left: 0;
    top: 0;
  }
  &:where([inherit]) {
    position: inherit;
    left: auto;
    top: auto;
    &+._header-holder {
      display: none;
    }
  }
}
@media screen and (max-width: @ceil-sm) {
  AX-HEADER ._header-l,
  AX-HEADER ._header-r {
    display: flex;
  }
  AX-HEADER ._header-head {
    text-align: center;
    margin-left: 0;
  }
  AX-HEADER ._header-body {
    display: none;
  }
}
