@charset "utf-8";
@import (optional, reference) "var.less";
/*Group button*/
[class*="_group-btn"] {
  --_radius-btn: var(--_r);
  display: inline-flex;
  AX-BTN {
    border-radius: 0;
    &:where(:first-child) {
      border-top-left-radius: var(--_radius-btn);
      border-bottom-left-radius: var(--_radius-btn);
    }
    &:where(:last-child) {
      border-top-right-radius: var(--_radius-btn);
      border-bottom-right-radius: var(--_radius-btn);
    }
    &:where(:not(:first-of-type)) {
      margin-left: -1px;
    }
    &:where(:not([disabled])):hover {
      z-index: 2;
    }
    &:where([selected], :focus-within),
    &:has([rep=wrap]:active) {
      z-index: 3;
    }
    &:where([selected]) [rep=wrap] {
      color: #fff;
      background-color: var(--_c-prim);
      border-color: var(--_c-prim);
    }
    &:where([disabled][selected]) {
      opacity: var(--_o-disabled);
    }
  }
  &:where([separated]) {
    AX-BTN:where(:not(:first-child)):after {
      content: '';
      height: 100%;
      width: 1px;
      background-color: var(--_c-divide);
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
/*Group lamp*/
._group-lamp {
  --_group-height: var(--_sz-input);
  display: flex;
  overflow: auto;
  [rep=label] {
    color: var(--_c-text);
    position: relative;
  }
  [rep=tools]:where(:not(:empty)) {
    margin-left: var(--_sz-min);
    margin-right: calc(-1*var(--_p));
  }
  [rep=tools]>* {
    color: var(--_c-text);
    font-size: var(--_fs-arrow);
    width: var(--_p);
    padding: 0;
    opacity: var(--_o-disabled);
    &:hover {
      opacity: 1;
    }
  }
  [rep=tools]>*[rep=remove]:hover,
  [rep=remove]:hover {
    color: var(--_c-error);
  }
}
ul:where(._group-lamp),
ol:where(._group-lamp) {
  padding-inline-start: 0;
  li:before {
    display: none;
  }
}
._group-lamp>* {
  color: var(--_c-text);
  line-height: var(--_group-height);
  text-align: center;
  padding: 0 var(--_p);
  min-width: 2em;
  position: relative;
  .v3-flex-center(inline-flex);
  .v3-trans-all();
  &:where(:visited) {
    color: var(--_c-text);
  }
  &:where(:not([disabled])) {
    cursor: pointer;
  }
  &:where(:not([disabled])):hover,
  &:where([selected], :focus),
  &:where(:not([disabled])):hover [rep=label],
  &:where([selected], :focus) [rep=label] {
    color: var(--_c-prim);
  }
  &:where(:not(:has([rep=label]))):after,
  &:where(:has([rep=label])) [rep=label]:after {
    .v3-lamp;
  }
  &:where([selected]:not(:has([rep=label]))):after,
  &:where([selected]:has([rep=label])) [rep=label]:after {
    transform: translate(-50%, 0) scaleX(1);
  }
  &:where([disabled]) {
    cursor: not-allowed;
    color: var(--_c-ignore);
    .v3-disabled;
  }
  &:where([disabled][selected]:not(:has([rep=label]))):after,
  &:where([disabled][selected]:has([rep=label])) [rep=label]:after {
    background-color: var(--_c-ignore);
  }
  &>[rep=icon],
  &>[rep=disk],
  &>[rep=cube] {
    margin-right: var(--_sz-min);
  }
  &>[rep=disk],
  &>[rep=cube] {
    height: var(--_sz-list);
    width: var(--_sz-list);
    object-fit: cover;
  }
  &>[rep=disk] {
    border-radius: 100%;
  }
  &>[rep=cube] {
    border-radius: @radius;
  }
  [rep=tips] {
    margin-left: var(--_sz-min);
    color: var(--_c-ignore);
  }
  AX-BADGE {
    margin-left: var(--_sz-min);
  }
}
/*Group page*/
._group-page {
  --_group-height: var(--_sz-input);
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  box-shadow: 0 -0.1rem 0 0 var(--_c-text-bd) inset;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: auto;
  [rep=label] {
    color: var(--_c-text);
    position: relative;
  }
  [rep=tools]:where(:not(:empty)) {
    margin-right: calc(-1*var(--_sz-space));
  }
  [rep=tools]>* {
    color: var(--_c-text);
    font-size: var(--_fs-arrow);
    width: var(--_p);
    padding: 0;
    margin-left: var(--_sz-min);
    opacity: var(--_o-disabled);
    &:hover {
      opacity: 1;
    }
  }
  [rep=tools]>*[rep=remove]:hover,
  [rep=remove]:hover {
    color: var(--_c-error);
  }
}
ul:where(._group-page),
ol:where(._group-page) {
  padding-inline-start: 0;
  li:before {
    display: none;
  }
}
._group-page>* {
  color: var(--_c-text);
  display: inline-flex;
  align-items: center;
  background-color: var(--_c-stage);
  height: var(--_group-height);
  line-height: var(--_group-height);
  padding: 0 var(--_p);
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  border-top: 1px solid var(--_c-text-bd);
  border-left: 1px solid var(--_c-text-bd);
  border-bottom: 1px solid var(--_c-text-bd);
  .v3-trans-all();
  &:hover {
    color: var(--_c-prim);
  }
  &:where(:not([disabled])) {
    cursor: pointer;
  }
  &:first-child {
    border-top-left-radius: inherit;
  }
  &:last-child {
    border-top-right-radius: inherit;
    border-right: 1px solid var(--_c-text-bd);
  }
  &:where([selected], :focus-within),
  &:where([selected], :focus-within) [rep=label] {
    color: var(--_c-prim);
  }
  &:where([selected]) {
    border-bottom-color: transparent;
  }
  &:where([disabled]) {
    color: var(--_c-ignore);
    cursor: not-allowed;
    .v3-disabled;
    [rep=label] {
      color: var(--_c-ignore);
    }
  }
  &>[rep=icon],
  &>[rep=disk],
  &>[rep=cube] {
    margin-right: var(--_sz-min);
  }
  &>[rep=disk],
  &>[rep=cube] {
    height: var(--_sz-list);
    width: var(--_sz-list);
    object-fit: cover;
  }
  &>[rep=disk] {
    border-radius: 100%;
  }
  &>[rep=cube] {
    border-radius: @radius;
  }
  [rep=tips] {
    margin-left: var(--_sz-min);
    color: var(--_c-ignore);
  }
  AX-BADGE {
    margin-left: var(--_sz-min);
  }
}
:where([class*="_bd"], [class*="_sd"])>._group-page {
  background-color: var(--_c-ignore-bg);
  >* {
    border-top-width: 0;
  }
  >*:first-child {
    border-radius: inherit;
    border-left-width: 0;
  }
  >*:last-child {
    border-radius: 0;
  }
}
/*Group flex*/
._group-flex {
  --_group-height: var(--_sz-input);
  line-height: var(--_group-height);
  display: flex;
  overflow: auto;
  [rep="label"] {
    color: var(--_c-text);
    flex: auto;
    .v3-trans-all();
  }
  [rep="label"]+* {
    margin-left: var(--_sz-space);
  }
  [rep=tips] {
    color: var(--_c-ignore);
  }
  [rep=tools]:where(:empty) {
    margin-left: 0;
  }
  [rep=tools]>* {
    color: var(--_c-text);
    font-size: var(--_fs-arrow);
    width: var(--_p);
    padding: 0;
    margin-left: var(--_sz-space);
    opacity: var(--_o-disabled);
    &:hover {
      opacity: 1;
    }
  }
  [rep=tools]>*[rep=remove]:hover,
  [rep=remove]:hover {
    color: var(--_c-error);
  }
}
ul:where(._group-flex),
ol:where(._group-flex) {
  padding-inline-start: 0;
  li:before {
    display: none;
  }
}
._group-flex>* {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  justify-content: left;
  align-items: center;
  &:where(:not(:last-child)) {
    margin-right: var(--_m);
  }
  &:hover [rep="label"] {
    color: var(--_c-prim);
  }
  &>[rep=icon],
  &>[rep=disk],
  &>[rep=cube] {
    margin-right: var(--_sz-min);
  }
  &>[rep=disk],
  &>[rep=cube] {
    height: var(--_sz-list);
    width: var(--_sz-list);
    object-fit: cover;
  }
  &>[rep=disk] {
    border-radius: 100%;
  }
  &>[rep=cube] {
    border-radius: @radius;
  }
  &:where([selected]),
  &:where([selected]) [rep="label"] {
    color: var(--_c-prim);
  }
  &:after {
    content: '';
    height: 2px;
    width: 100%;
    background-color: var(--_c-prim);
    transform: translate(-50%, 0);
    opacity: 0;
    .v3-trans-all(var(--_dur-1), linear);
    position: absolute;
    left: 50%;
    bottom: 0;
  }
  &:where([selected]):after {
    opacity: 1;
  }
  &:where([disabled]) {
    .v3-disabled;
    color: var(--_c-ignore);
    [rep="label"] {
      color: var(--_c-ignore);
    }
  }
  &:where([disabled][selected]):after {
    background-color: var(--_c-ignore);
  }
}
:where([class*="_bd"], [class*="_sd"])>._group-flex {
  >*:first-child {
    margin-left: var(--_m);
  }
}
/*Group grade*/
._group-grade {
  display: inline-flex;
  ._grade {
    margin-left: var(--_m);
    margin-right: var(--_m);
  }
}
/*Group input*/
._group-input {
  [rep=label] {}
  [rep=content] {
    position: relative;
    ._box-tools {
      position: absolute;
      right: var(--_g);
      top: calc((var(--_form-h) - var(--_sz-list))/2);
      z-index: 2;
      [rep="icon"] {
        font-size: var(--_fs-min);
      }
      >* {
        color: var(--_c-ignore);
        &:hover {
          color: var(--_c-text);
        }
      }
    }
  }
  [rep=input] {}
  [rep=unit] {}
  [rep=btn] {}
}
