@charset "utf-8";
@import (optional, reference) "var.less";
/*Checked animation of checkbox & radio*/
@keyframes _checked {
  0% {
    box-shadow: 0 0 0 0 var(--_c-prim-sd);
  }
  50% {
    box-shadow: 0 0 0 .3rem var(--_c-prim-sd);
  }
  99% {
    box-shadow: 0 0 0 .6rem var(--_c-prim-tp);
  }
  100% {
    box-shadow: none;
  }
}
/*Radio & Checkbox*/
AX-RADIO,
AX-CHECKBOX {
  --_input-lh:var(--_sz-input);
  --_input-h:var(--_sz-input);
  --_input-align-v:center;
  line-height: var(--_input-lh);
  height: var(--_input-h);
  display: inline-flex;
  vertical-align: middle;
  label {
    box-sizing: border-box;
    height: inherit;
    display: inherit;
    align-items: var(--_input-align-v);
    position: relative;
  }
  input {
    position: fixed;
    left:-100000px;
  }
}
/*Radio*/
AX-RADIO:where(:not([type])) {
  &,
  i {
    white-space: nowrap;
    text-overflow: ellipsis;
    .v3-trans-all(var(--_dur-2));
  }
  u~i:where(:not(:empty)) {
    margin-left: var(--_g);
    margin-right: var(--_m-md);
  }
  u {
    width: var(--_sz-brief);
    height: var(--_sz-brief);
    line-height: var(--_sz-brief);
    position: relative;
    display: inline-flex;
    &:before {
      content: '';
      width: inherit;
      height: inherit;
      box-sizing: border-box;
      border-radius: 100%;
      border: 1px solid var(--_c-text-bd);
      background-color: var(--_c-stage);
      .v3-trans-all(var(--_dur-2), ease-out);
    }
    &:after {
      content: '';
      width: 1.0rem;
      height: 1.0rem;
      border-radius: 100%;
      background-color: var(--_c-prim);
      display: inline-block;
      transform: scale(0);
      .v3-trans-all(var(--_dur-2), ease-out);
      position: absolute;
      top: .4rem;
      left: .4rem;
    }
  }
  &:where(:hover) u:before {
    border-color: var(--_c-prim);
  }
  input:where(:checked)~u:before {
    border-color: var(--_c-prim);
    animation: _checked var(--_dur-3) ease-out forwards;
  }
  input:where(:checked)~u:after {
    transform: scale(1);
  }
  input:where(:checked)+i {
    color: var(--_c-prim);
  }
  &:where([check=ing]:not(:has(input:checked))) input~u:before {
    border-color: var(--_c-prim);
  }
  &:where([check=ing]:not(:has(input:checked))) input~u:after {
    background-color: var(--_c-prim-bd);
    transform: scale(1);
  }
  input:where(:focus)~u:before {
    outline: none;
    border-color: var(--_c-prim);
  }
  input:where(:disabled)~i {
    color: var(--_c-disable);
    cursor: not-allowed;
  }
  input:where(:disabled)~u:before {
    border-color: var(--_c-text-bd);
    cursor: not-allowed;
  }
  input:where(:disabled)~u:after {
    cursor: not-allowed;
  }
  input:disabled:checked~u:before {
    background-color: var(--_c-prim-sd);
  }
  input:where(:disabled:checked)~u:after {
    background-color: var(--_c-disable-bg);
    transform: scale(1);
  }
  &[size=xs] {
    height: var(--_sz-list);
    line-height: var(--_sz-list);
  }
  &[size=xs] u~i {
    margin-right: var(--_m);
  }
  &[size=sm] {
    height: calc(var(--_sz-body));
    line-height: calc(var(--_sz-body));
  }
  &[size=sm] u~i {
    margin-right: var(--_m);
  }
  &[size=lg] {
    height: calc(var(--_sz-body) + 2.0rem);
    line-height: calc(var(--_sz-body) + 2.0rem);
  }
}
/*Checkbox*/
AX-CHECKBOX:where(:not([type])) {
  label {
    display: inline-flex;
  }
  i {
    white-space: nowrap;
    text-overflow: ellipsis;
    .v3-trans-all(var(--_dur-2), linear);
  }
  u~i {
    margin-left: var(--_g);
    margin-right: var(--_m-md)
  }
  u {
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1.6rem;
    position: relative;
    display: inline-flex;
  }
  u:before {
    content: '';
    width: inherit;
    height: inherit;
    box-sizing: border-box;
    border-radius: @radius;
    border: 1px solid var(--_c-text-bd);
    background-color: var(--_c-stage);
    .v3-trans-all(var(--_dur-2), ease-out);
  }
  u:after {
    font-family: var(--_ff-icon);
    content: 'check';
    color: var(--_c-stage);
    font-size: var(--_sz-ignore);
    width: inherit;
    height: inherit;
    line-height: inherit;
    text-align: center;
    transform: scale(0);
    .v3-trans-all(var(--_dur-2), ease-out);
    position: absolute;
  }
  &:where(:hover) u:before {
    border-color: var(--_c-prim);
  }
  input:where(:checked)~u:before {
    border-color: var(--_c-prim);
    background-color: var(--_c-prim);
    animation: _checked var(--_dur-3) ease-out forwards;
  }
  input:where(:checked)~u:after {
    transform: scale(.8);
  }
  input:where(:checked)+i {
    color: var(--_c-prim);
  }
  &:where([check=ing]:not(:has(input:checked))) input~u:before {
    border-color: var(--_c-prim);
  }
  &:where([check=ing]:not(:has(input:checked))) input~u:after {
    content: '';
    width: 1rem;
    height: 1rem;
    background-color: var(--_c-prim-bd);
    transform: none;
    top: .3rem;
    left: .3rem;
  }
  input:where(:focus)~u:before {
    outline: none;
    border-color: var(--_c-prim);
  }
  input:where(:disabled)~i {
    color: var(--_c-disable);
    cursor: not-allowed;
  }
  input:where(:disabled)~u:before {
    border-color: var(--_c-text-bd);
    background-color: var(--_c-disable-bg);
    cursor: not-allowed;
  }
  input:where(:disabled:checked)~u:before {
    background-color: var(--_c-prim-sd);
  }
  input:where(:disabled:checked)~u:after {
    color: var(--_c-disable);
    transform: scale(.8);
    cursor: not-allowed;
  }
  &[size=xs] {
    height: var(--_sz-list);
    line-height: var(--_sz-list);
  }
  &[size=sm] {
    height: var(--_sz-body);
    line-height: var(--_sz-body);
  }
  &[size=lg] {
    height: calc(var(--_sz-body) + 2.0rem);
    line-height: calc(var(--_sz-body) + 2.0rem);
  }
  &:has(i:empty) {
    height: var(--_sz-list);
    line-height: var(--_sz-list);
    i {
      display: none;
    }
  }
}
/*Chera of checkbox & radio*/
AX-CHECKBOX[type=chera],
AX-RADIO[type=chera] {
  display: block;
  label {
    display: flex;
  }
  i {
    height: calc(100% - 1rem);
    line-height: calc(var(--_sz-input) - 1rem - 0.2rem);
    padding: 0 calc(var(--_p) * 2) 0 1.0rem;
    background-color: var(--_c-stage);
    box-sizing: border-box;
    border: 1px solid var(--_c-text-bd);
    border-radius: @radius;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    .v3-trans-all(var(--_dur-2), ease-out);
    flex: auto;
  }
  u {
    font-size: var(--_sz-ignore);
    color: var(--_c-ignore);
    transform: translate(0, -50%);
    .v3-trans-all(var(--_dur-2), ease-out);
    position: absolute;
    right: 1rem;
    top: 50%;
  }
  u:after {
    font-family: var(--_ff-icon);
    content: 'check';
  }
  &:where(:hover) i {
    border-color: var(--_c-prim);
  }
  input:where(:checked)~i {
    color: var(--_c-stage);
    background-color: var(--_c-prim);
    border-color: var(--_c-prim);
  }
  input:where(:checked)~u {
    color: var(--_c-stage);
  }
  &:where([check=ing]:not(:has(input:checked))) input~i {
    background-color: var(--_c-prim-bg);
  }
  input:where(:focus)~u {
    border-color: var(--_c-prim);
  }
  input:where(:disabled)~i {
    color: var(--_c-disable);
    border-color: var(--_c-text-bd);
    background-color: var(--_c-disable-bg);
  }
  input:where(:disabled:checked)~i {
    color: var(--_c-disable);
    border-color: var(--_c-text-bd);
    background-color: var(--_c-prim-sd);
  }
  input:where(:disabled:checked)~u {
    color: var(--_c-disable);
  }
  &[size=xs] {
    height: var(--_sz-list);
    line-height: var(--_sz-list);
    font-size: var(--_sz-ingore);
  }
  &[size=xs] i {
    height: calc(var(--_sz-list) - .2rem);
    line-height: calc(var(--_sz-list) - .2rem - .2rem);
    padding-left: .4rem;
  }
  &[size=xs] u {
    right: .4rem;
  }
  &[size=sm] {
    height: var(--_sz-body);
    line-height: var(--_sz-body);
  }
  &[size=sm] i {
    height: calc(var(--_sz-body) - .2rem);
    line-height: calc(var(--_sz-body) - .2rem - .2rem);
  }
  &[size=lg] {
    height: calc(var(--_sz-input) + 1rem);
    line-height: calc(var(--_sz-input) + 1rem);
  }
  &[size=lg] i {
    height: var(--_sz-input);
    line-height: calc(var(--_sz-input) - .2rem);
  }
  /*   ._chera._b-lg i {
    height: var(--_sz-input);
    line-height: calc(var(--_sz-input) - .2rem);
  } */
}
/*Switch of checkbox*/
AX-CHECKBOX[type=switch] {
  label {
    display: inline-flex;
  }
  i {
    .v3-trans-all(var(--_dur-2), linear);
  }
  u~i {
    margin-left: var(--_g);
  }
  u {
    width: 4.0rem;
    height: var(--_sz-list);
    box-sizing: border-box;
    border: 1px solid var(--_c-text-bd);
    border-radius: var(--_sz-list);
    margin: calc((var(--_sz-input) - var(--_sz-list))/2) 0;
    background-color: var(--_c-stage);
    .v3-trans-all(var(--_dur-2), linear);
    position: relative;
  }
  u:before {
    content: '';
    width: 2.0rem;
    height: 2.0rem;
    border-radius: 100%;
    background-color: var(--_c-stage);
    .shadow-pt;
    .v3-trans-all(var(--_dur-2), linear);
    position: absolute;
    left: 0;
  }
  &:where(:hover) u {
    border-color: var(--_c-prim);
  }
  input:where(:checked)~u {
    border-color: var(--_c-prim);
    background-color: var(--_c-prim);
  }
  input:where(:checked)~u:before {
    left: 1.8rem;
  }
  &:where([check=ing]:not(:has(input:checked))) input~u {
    background-color: var(--_c-prim-bg);
  }
  input:where(:checked)+i {
    color: var(--_c-prim);
  }
  input:where(:disabled)~i {
    color: var(--_c-disable);
  }
  input:where(:disabled)~u {
    border-color: var(--_c-text-bd);
    background-color: var(--_c-disable-bg);
  }
  input:where(:disabled:checked)~u {
    background-color: var(--_c-prim-sd);
  }
  &[size=xs] {
    height: var(--_sz-list);
    line-height: var(--_sz-list);
  }
  &[size=sm] {
    height: var(--_sz-body);
    line-height: var(--_sz-body);
  }
  &[size=lg] {
    height: calc(var(--_sz-input) + 1rem);
    line-height: calc(var(--_sz-input) + 1rem);
  }
}
