/*
Last modified: 2024-09-11 09:30:00
*/
@charset "utf-8";
@import (optional, reference) "var.less";
/*Button*/
AX-BTN {
  --_btn-c-sd: var(--_c-prim-sd); //按钮阴影色值
  --_btn-c-bg: var(--_c-prim-bg); //按钮背景色值
  --_btn-c-txt: var(--_c-text); //按钮文本色值
  --_btn-c-act: var(--_c-prim-tl); //按下按钮的背景色值
  --_btn-p-lr: var(--_sz-em-font); //右侧按钮的margin-right和margin-left需要该值
  --_btn-fs: var(--_sz-font);
  --_btn-h: 2.71em;
  font-size: var(--_btn-fs);
  position: relative;
  display: inline-flex;
  .radius;
  vertical-align: middle;
  >[rep=wrap] {
    color: var(--_btn-c-txt);
    background-color: var(--_c-stage);
    border: 1px solid var(--_c-text-bd);
    .v3-btn-pub;
    border-radius: inherit;
    width: 100%;
  }
  &:where(:not([disabled])) >[rep=wrap]:visited {
    color: var(--_btn-c-txt);
  }
  &:where(:not([disabled])) >[rep=wrap]:hover {
    color: var(--_c-prim);
    border-color: var(--_c-prim);
    .vague(var(--_btn-c-sd));
  }
  &:where(:not([disabled])) >[rep=wrap]:focus {
    color: var(--_c-prim);
    border-color: var(--_c-prim);
    outline-color: var(--_btn-c-sd);
  }
  &:where(:not([disabled])) >[rep=wrap]:active {
    color: var(--_btn-c-act);
    opacity: 1;
  }
  &:where([disabled]) >[rep=wrap] {
    color: var(--_c-ignore);
    cursor: not-allowed;
    .v3-disabled;
  }
  &[type=plain] {
    >[rep=wrap] {
      border-width: 0;
      background-color: transparent;
    }
    &[theme=prim] >[rep=wrap] {
      --_btn-c-txt: var(--_c-prim);
    }
    &[theme=succ]> [rep=wrap] {
      --_btn-c-txt: var(--_c-succ);
    }
    &[theme=error] >[rep=wrap] {
      --_btn-c-txt: var(--_c-error);
    }
    &[theme=warn] >[rep=wrap] {
      --_btn-c-txt: var(--_c-warn);
    }
    &[theme=info] >[rep=wrap] {
      --_btn-c-txt: var(--_c-info);
    }
    &[theme=issue] >[rep=wrap] {
      --_btn-c-txt: var(--_c-issue);
    }
    &[theme=text] >[rep=wrap] {
      --_btn-c-txt: var(--_c-text);
    }
    &[theme=brief]> [rep=wrap] {
      --_btn-c-txt: var(--_c-brief);
    }
    &[theme=ignore]> [rep=wrap] {
      --_btn-c-txt: var(--_c-ignore);
    }
    >[rep=wrap]:hover {
      background-color: transparent;
      color: var(--_btn-c-txt);
      box-shadow: none;
    }
    &:where(:not([theme=prim], [theme=succ], [theme=error], [theme=warn], [theme=info], [theme=issue], [theme=brief], [theme=ignore]))> [rep=wrap]:hover {
      color: var(--_c-prim);
    }
    >[rep=wrap]:focus {
      color: var(--_btn-c-txt);
      outline-color: transparent;
    }
    &:where(:not([theme=prim], [theme=succ], [theme=error], [theme=warn], [theme=info], [theme=issue], [theme=brief], [theme=ignore]))> [rep=wrap]:focus {
      color: var(--_c-prim);
    }
    >[rep=wrap]:active {
      color: var(--_btn-c-txt);
      opacity: var(--_o-active);
    }
    &:where(:not([theme=prim], [theme=succ], [theme=error], [theme=warn], [theme=info], [theme=issue], [theme=brief], [theme=ignore])) >[rep=wrap]:active {
      color: var(--_c-prim);
    }
    &:where([disabled]) {
      color: var(--_btn-c-txt);
      opacity: var(--_o-disabled);
    }
  }
  &[type=seal] {
    --_btn-c-sd: var(--_c-text-sd);
    --_btn-c-bg: var(--_c-text-bg);
    --_btn-c-txt: var(--_c-text);
    >[rep=wrap] {
      border-color: var(--_btn-c-txt);
      background-color: transparent;
    }
    &[theme=prim] {
      --_btn-c-sd: var(--_c-prim-sd);
      --_btn-c-bg: var(--_c-prim-bg);
      --_btn-c-txt: var(--_c-prim);
    }
    &[theme=succ] {
      --_btn-c-sd: var(--_c-succ-sd);
      --_btn-c-bg: var(--_c-succ-bg);
      --_btn-c-txt: var(--_c-succ);
    }
    &[theme=error] {
      --_btn-c-sd: var(--_c-error-sd);
      --_btn-c-bg: var(--_c-error-bg);
      --_btn-c-txt: var(--_c-error);
    }
    &[theme=warn] {
      --_btn-c-sd: var(--_c-warn-sd);
      --_btn-c-bg: var(--_c-warn-bg);
      --_btn-c-txt: var(--_c-warn);
    }
    &[theme=info] {
      --_btn-c-sd: var(--_c-info-sd);
      --_btn-c-bg: var(--_c-info-bg);
      --_btn-c-txt: var(--_c-info);
    }
    &[theme=issue] {
      --_btn-c-sd: var(--_c-issue-sd);
      --_btn-c-bg: var(--_c-issue-bg);
      --_btn-c-txt: var(--_c-issue);
    }
    &[theme=text] {
      --_btn-c-sd: var(--_c-text-sd);
      --_btn-c-bg: var(--_c-text-bg);
      --_btn-c-txt: var(--_c-text);
    }
    &[theme=brief] {
      --_btn-c-sd: var(--_c-brief-sd);
      --_btn-c-bg: var(--_c-brief-bg);
      --_btn-c-txt: var(--_c-brief);
    }
    &[theme=ignore] {
      --_btn-c-sd: var(--_c-ignore-sd);
      --_btn-c-bg: var(--_c-ignore-bg);
      --_btn-c-txt: var(--_c-ignore);
    }
    >[rep=wrap]:hover {
      color: var(--_btn-c-txt);
      background-color: var(--_btn-c-bg);
    }
    >[rep=wrap]:focus {
      color: var(--_btn-c-txt);
      border-color: var(--_c-bd);
      background-color: var(--_btn-c-bg);
      outline-color: transparent;
    }
    >[rep=wrap]:active {
      opacity: var(--_o-active);
    }
    &:where([disabled]) >[rep=wrap] {
      color: var(--_btn-c-txt);
      opacity: var(--_o-disabled);
    }
  }
  &[theme=prim]:where(:not([type=seal], [type=plain])) {
    --_btn-c-bg: var(--_c-prim);
    --_btn-c-sd: var(--_c-prim-sd);
    --_c-lt: var(--_c-prim-lt);
    --_c-dp: var(--_c-prim-dp);
  }
  &[theme=prim]:where(:not([type=seal], [type=plain])) {
    --_btn-c-bg: var(--_c-prim);
    --_btn-c-sd: var(--_c-prim-sd);
    --_c-lt: var(--_c-prim-lt);
    --_c-dp: var(--_c-prim-dp);
  }
  &[theme=error]:where(:not([type=seal], [type=plain])) {
    --_btn-c-bg: var(--_c-error);
    --_btn-c-sd: var(--_c-error-sd);
    --_c-lt: var(--_c-error-lt);
    --_c-dp: var(--_c-error-dp);
  }
  &[theme=succ]:where(:not([type=seal], [type=plain])) {
    --_btn-c-bg: var(--_c-succ);
    --_btn-c-sd: var(--_c-succ-sd);
    --_c-lt: var(--_c-succ-lt);
    --_c-dp: var(--_c-succ-dp);
  }
  &[theme=info]:where(:not([type=seal], [type=plain])) {
    --_btn-c-bg: var(--_c-info);
    --_btn-c-sd: var(--_c-info-sd);
    --_c-lt: var(--_c-info-lt);
    --_c-dp: var(--_c-info-dp);
  }
  &[theme=issue]:where(:not([type=seal], [type=plain])) {
    --_btn-c-bg: var(--_c-issue);
    --_btn-c-sd: var(--_c-issue-sd);
    --_c-lt: var(--_c-issue-lt);
    --_c-dp: var(--_c-issue-dp);
  }
  &[theme=warn]:where(:not([type=seal], [type=plain])) {
    --_btn-c-bg: var(--_c-warn);
    --_btn-c-sd: var(--_c-warn-sd);
    --_c-lt: var(--_c-warn-lt);
    --_c-dp: var(--_c-warn-dp);
  }
  &[theme=text]:where(:not([type=seal], [type=plain])) {
    --_btn-c-bg: hsl(var(--_h-text), var(--_s-text), 20%);
    --_btn-c-sd: var(--_c-text-sd);
    --_c-lt: var(--_c-text-lt);
    --_c-dp: var(--_c-text-dp);
  }
  &[theme=brief]:where(:not([type=seal], [type=plain])) {
    --_btn-c-bg: var(--_c-brief-bg);
    --_btn-c-sd: var(--_c-brief-sd);
    --_c-lt: var(--_c-brief-lt);
    --_c-dp: var(--_c-brief-dp);
  }
  &[theme=ignore]:where(:not([type=seal], [type=plain])) {
    --_btn-c-bg: var(--_c-ignore-bg);
    --_btn-c-sd: var(--_c-ignore-sd);
    --_c-lt: var(--_c-ignore-lt);
    --_c-dp: var(--_c-ignore-dp);
  }
  &:is([theme=prim],
    [theme=error],
    [theme=succ],
    [theme=info],
    [theme=issue],
    [theme=warn],
    [theme=text],
    [theme=brief],
    [theme=ignore],
  ):where(:not([type=seal], [type=plain])) {
    --_btn-c-txt: #fff;
    >[rep=wrap] {
      background-color: var(--_btn-c-bg);
      border: none;
    }
    >[rep=wrap]:hover {
      color: var(--_btn-c-txt);
      background-color: var(--_c-lt);
    }
    >[rep=wrap]:focus {
      color: var(--_btn-c-txt);
    }
    >[rep=wrap]:active {
      opacity: 1;
      color: rgba(255, 255, 255, var(--_o-active));
      background-color: var(--_c-dp);
    }
    &:where([disabled]) >[rep=wrap] {
      color: var(--_btn-c-txt);
      opacity: var(--_o-disabled);
    }
  }
  &[theme=warn]:where(:not([type=seal], [type=plain])) {
    --_btn-c-txt: hsl(var(--_h-text), var(--_s-text), 20%);
    >[rep=wrap]:active {
      color: var(--_c-text-aj);
    }
  }
  &[theme=brief]:where(:not([type=seal], [type=plain])),
  &[theme=ignore]:where(:not([type=seal], [type=plain])) {
    >[rep=wrap]:hover {
      background-color: var(--_btn-c-bg);
    }
    >[rep=wrap]:focus {
      outline-width: 1px;
    }
    >[rep=wrap]:active {
      color: var(--_btn-c-txt);
      background-color: var(--_btn-c-bg);
      opacity: var(--_o-active);
    }
    &:where([disabled]) >[rep=wrap] {
      color: var(--_btn-c-txt);
      opacity: 1;
    }
  }
  &[theme=brief]:where(:not([type=seal], [type=plain])) {
    --_btn-c-txt: var(--_c-brief);
  }
  &[theme=ignore]:where(:not([type=seal], [type=plain])) {
    --_btn-c-txt: var(--_c-ignore);
  }
  &[shape=square] {
    border-radius: 0;
  }
  &[shape=round] {
    --_btn-p-lr: 1.5em;
    border-radius: var(--_sz-input);
  }
  &[size=xs] {
    --_btn-p-lr: 0.33em;
    --_btn-fs: var(--_sz-ignore);
    --_btn-h: 1.83em;
  }
  &[size=sm] {
    --_btn-fs: var(--_sz-ignore);
    --_btn-h: 2.33em;
  }
  &[size=lg] {
    --_btn-h: 3.43em;
    --_btn-p-lr: 2em;
  }
  &[width=x1] {
    width: var(--_sz-em-input);
    > [rep=wrap] {
      padding: 0;
    }
  }
  &[width=x2] {
    width: calc(var(--_sz-em-input)*2);
    > [rep=wrap] {
      padding: 0;
    }
  }
  &[width=x3] {
    width: calc(var(--_sz-em-input)*3);
  }
  &[width=x4] {
    width: calc(var(--_sz-em-input)*4);
  }
  &[width=x5] {
    width: calc(var(--_sz-em-input)*5);
  }
  &[width=x6] {
    width: calc(var(--_sz-em-input)*6);
  }
  &[width=x7] {
    width: calc(var(--_sz-em-input)*7);
  }
  &[width=x8] {
    width: calc(var(--_sz-em-input)*8);
  }
  &[width=x9] {
    width: calc(var(--_sz-em-input)*9);
  }
  &[width=x10] {
    width: calc(var(--_sz-em-input)*10);
  }
  &[width=neat] {
    width: var(--_w-input)
  }
  &[width=full] {
    width: 100%;
  }
  &[theme=prim]:where([grad]:not([type=seal], [type=plain]))> [rep=wrap] {
    background: linear-gradient(45deg, var(--_c-prim), var(--_c-prim-aj));
  }
  &[theme=error]:where([grad]:not([type=seal], [type=plain]))> [rep=wrap] {
    background: linear-gradient(45deg, var(--_c-error), var(--_c-error-aj));
  }
  &[theme=succ]:where([grad]:not([type=seal], [type=plain])) >[rep=wrap] {
    background: linear-gradient(45deg, var(--_c-succ), var(--_c-succ-aj));
  }
  &[theme=info]:where([grad]:not([type=seal], [type=plain]))> [rep=wrap] {
    background: linear-gradient(45deg, var(--_c-info), var(--_c-info-aj));
  }
  &[theme=warn]:where([grad]:not([type=seal], [type=plain])) >[rep=wrap] {
    background: linear-gradient(45deg, var(--_c-warn), var(--_c-warn-aj));
  }
  &[theme=issue]:where([grad]:not([type=seal], [type=plain]))> [rep=wrap] {
    background: linear-gradient(45deg, var(--_c-issue), var(--_c-issue-aj));
  }
  &[theme=text]:where([grad]:not([type=seal], [type=plain])) >[rep=wrap] {
    background: linear-gradient(45deg, hsl(var(--_h-text), var(--_s-text), 20%), var(--_c-text-aj));
  }
  &[shaded]:where(:not([type=seal], [type=plain])) {
    --_btn-c-sd: rgba(0, 0, 0, 0.1);
    >[rep=wrap] {
      outline-color: transparent;
      box-shadow: 1px 1px 0.5rem var(--_btn-c-sd);
    }
  }
  &[shaded]:where([theme=prim]> [rep=wrap],
    [theme=error] >[rep=wrap],
    [theme=succ] >[rep=wrap],
    [theme=info] >[rep=wrap],
    [theme=issue] >[rep=wrap],
    [theme=warn] >[rep=wrap],
    [theme=text]) >[rep=wrap] {
    box-shadow: 0.5rem 0.5rem 2rem var(--_btn-c-sd);
  }
  &[shaded] {
    &:where([theme=prim]) {
      --_btn-c-sd: hsla(var(--_h-prim), var(--_s-prim), var(--_l-prim), 0.4);
    }
    &:where([theme=error]) {
      --_btn-c-sd: hsla(var(--_h-error), var(--_s-error), var(--_l-error), 0.4);
    }
    &:where([theme=succ]) {
      --_btn-c-sd: hsla(var(--_h-succ), var(--_s-succ), var(--_l-succ), 0.4);
    }
    &:where([theme=info]) {
      --_btn-c-sd: hsla(var(--_h-info), var(--_s-info), var(--_l-info), 0.4);
    }
    &:where([theme=issue]) {
      --_btn-c-sd: hsla(var(--_h-issue), var(--_s-issue), var(--_l-issue), 0.4);
    }
    &:where([theme=warn]) {
      --_btn-c-sd: hsla(var(--_h-warn), var(--_s-warn), var(--_l-warn), 0.4);
    }
    &:where([theme=text]) {
      --_btn-c-sd: hsla(var(--_h-text), var(--_s-text), 20%, 0.4);
    }
  }
  [rep="icon"] {
    margin-right: var(--_g);
  }
  [rep="tail"] {
    margin-left: var(--_g);
  }
  [rep=disk],
  [rep=cube] {
    margin-right: var(--_g);
  }
  [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;
  }
  AX-BADGE {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
  }
  &:has([rep=label]:empty) [rep="icon"] {
    margin-right: 0;
  }
  &:has([rep=label]:empty) [rep="tail"] {
    margin-left: 0;
  }
  [rep="expand"],
  [rep="more"],
  [rep="remove"],
  [rep="update"] {
    font-family: var(--_ff-icon);
    margin-right: calc(-1*var(--_btn-p-lr) + 0.286em);
    margin-left: var(--_btn-p-lr);
    &:hover:before {
      opacity: 1;
    }
  }
  [rep="expand"]:before,
  [rep="more"]:before,
  [rep="remove"]:before,
  [rep="update"]:before {
    display: inline-block;
    opacity: var(--_o-disabled);
    scale: 0.8;
    .v3-trans-all(var(--_dur-2), linear);
  }
  [rep="expand"]:before {
    content: 'down';
  }
  &:where(._opened) [rep="expand"]:before {
    rotate: 180deg;
  }
  [rep="more"]:before {
    content: 'right';
  }
  /*   &:where([active]) [rep="more"]:before {
    transform: rotate(-90deg);
  } */
  [rep="remove"]:before {
    content: 'close';
  }
  [rep="remove"]:hover {
    color: var(--_c-error);
  }
  [rep="update"]:before {
    content: 'refresh';
  }
  &:where([check=ing]) {
    cursor: not-allowed;
    .v3-disabled;
    >[rep=wrap]:before {
      content: '';
      width: 1em;
      margin-right: var(--_g);
      .v3-spin;
    }
  }
  &:where([check=ed]) >[rep=wrap]:before {
    content: 'check-o-f';
    color: var(--_btn-c-txt);
    font-family: var(--_ff-icon);
    width: em;
    margin-right: var(--_g);
    display: inline-flex;
  }
  &:where([check=ing]):has([rep=label]:empty)> [rep=wrap]:before,
  &:where([check=ed]):has([rep=label]:empty)> [rep=wrap]:before {
    margin-right: 0;
  }
  &:where([type=seal])> [rep=wrap]:before {
    border-color: var(--_btn-c-sd);
    border-bottom-color: var(--_btn-c-txt);
  }
  &:where([check=ing]:not([type=seal], [type=plain])):where([theme=prim], [theme=succ], [theme=error], [theme=info], [theme=issue])> [rep=wrap]:before {
    .v3-spin-dk;
  }
  &:where([check=ing]:not([type=seal], [type=plain])):where([theme=warn]):before {
    border-color: rgba(0, 0, 0, .1);
    border-bottom-color: var(--_btn-c-txt);
  }
  &:where([check=ed]:not([type=seal], [type=plain], [theme=prim], [theme=succ], [theme=error], [theme=info], [theme=warn], [theme=issue])) >[rep=wrap]:before {
    color: var(--_c-prim);
  }
}
