@charset "utf-8";
@import (optional, reference) "var.less";
/*Group button*/
/*Container btns*/
._box-btns {
  display: inline-flex;
  box-sizing: border-box;
  border-radius: inherit;
}
._box-btns>* {
  margin: 0 var(--_g);
}
/*Container tools*/
._box-tools {
  --_tools-fs: var(--_sz-font);
  font-size: var(--_tools-fs);
  line-height: var(--_sz-list);
  display: inline-flex;
  box-sizing: border-box;
}
._box-tools>* {
  text-align: center;
  padding: 0 var(--_sz-min);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  .v3-trans-all();
}
._box-tools>*:hover {
  color: var(--_c-prim);
}
._box-tools [role="icon"] {
  width: var(--_tools-fs);
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
._box-tools [role="icon"]+[role="label"] {
  margin-left: var(--_sz-min);
}
._box-tools>*[disabled] {
  opacity: var(--_o-disabled);
  .v3-disabled;
}
/*Container*/
[class*="_box-"] {
  width: inherit;
  [role="caption"] {
    font-size: var(--_fs-title);
    font-weight: bold;
    line-height: 1.5em;
    margin-bottom: var(--_g-sm);
  }
  [role="brief"] {
    color: var(--_c-brief);
    line-height: var(--_lh-brief);
    margin-top: var(--_g-sm);
  }
  [role="media"] {
    text-align: center;
    width: inherit;
  }
}
._box-image,
._box-audio,
._box-video,
._box-iframe {
  [role="media"] {
    >* {
      display: block;
      width: inherit;
    }
  }
}
/*Container iframe*/
._box-iframe {
  display: flex;
  flex-direction: column;
  [role="media"] {
    flex: auto;
  }
  iframe {
    border: none;
  }
}
/*Container qrCode*/
._box-qr {
  [role="media"] {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      min-width: 8rem;
    }
  }
}
/*Bubble footer*/
._bubble-footer {
  overflow-y: hidden;
  &._bubble-footer-wrap {
    border-radius: inherit;
  }
  &:where([layout="left"]) ._bubble-footer-wrap,
  &:where([layout="right"]) ._bubble-footer-wrap {
    display: flex;
    padding: var(--_padding);
    box-sizing: border-box;
    [role="tips"] {
      flex: auto;
    }
  }
  &:where([layout="plain"]) ._bubble-footer-wrap {
    border-top: 1px solid var(--_c-text-bd);
  }
  &:where([layout="right"]) ._bubble-footer-wrap {
    flex-direction: row-reverse;
  }
  ._box-btns {
    display: inline-flex;
  }
  ._box-btns>* {
    margin: 0;
  }
  &:where([layout="center"]) ._box-btns,
  &:where([layout="plain"]) ._box-btns {
    display: flex;
    justify-content: center;
  }
  &:where([layout="plain"]) ._box-btns {
    border-radius: inherit;
  }
  &:where([layout="center"]) ._box-btns {
    margin: var(--_sz-body) 0;
  }
  &:where([layout="center"]) ._box-btns>* {
    margin: 0 var(--_g-sm);
  }
  &:where([layout="left"]) ._box-btns>* {
    margin-right: var(--_g-sm);
  }
  &:where([layout="right"]) ._box-btns>* {
    margin-left: var(--_g-sm);
  }
  &:where([layout="plain"]) ._box-btns>* {
    border-radius: 0;
    flex: 1;
  }
  &:where([layout="plain"]) ._box-btns>*:where(:not(:last-child)) {
    border-right: 1px solid var(--_c-text-bd);
  }
  [role="tips"] {
    font-size: var(--_fs-body);
    line-height: 1.8rem;
    height: var(--_sz-input);
    display: flex;
    align-items: center;
  }
  &:where([layout="center"]) [role="tips"],
  &:where([layout="plain"]) [role="tips"] {
    border-top: 1px solid var(--_c-text-bd);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    background-color: var(--_c-text-bg);
    justify-content: center;
  }
  &:where([layout="left"]) [role="tips"] {
    justify-content: flex-end;
    text-align: right;
  }
  &:where([layout="right"]) [role="tips"] {
    justify-content: flex-start;
  }
}
/*Container form*/
._box-input {
  --_form-h: var(--_sz-input);
  --_form-in-gap: var(--_g-sm);
  --_form-p-lr: 0;
  --_form-p-tb: 0;
  --_form-m-tb: var(--_m);
  --_form-bd-w: 1px;
  --_form-lbl-w: var(--_w-label);
  margin: var(--_form-m-tb) auto;
  padding: var(--_form-p-tb) var(--_form-p-lr);
  display: flex;
  align-items: flex-start;
  position: relative;
  >[role="label"] {
    color: var(--_c-text);
    width: var(--_form-lbl-w);
    text-align: right;
    margin-right: var(--_g-sm);
    .twoLines(flex-end);
    top: 0;
    img,
    [class*="icon-"] {
      width: var(--_sz-brief);
      margin-right: var(--_sz-min);
    }
    &:emtpy {
      display: none;
    }
  }
  >[role="content"] {
    width: var(--_w-input);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
    >[role=note] {
      font-size: var(--_sz-ignore);
      line-height: var(--_sz-brief);
      width: 100%;
      padding-top: var(--_sz-space);
    }
    >[role="input"] {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      position: relative;
    }
    input:where(:not([type="radio"], [type="checkbox"], [type="range"], [type="reset"], [type="submit"])) {
      height: var(--_form-h);
      line-height: var(--_form-h);
    }
    input:where(:not([type="radio"], [type="checkbox"], [type="range"], [type="color"], [type="reset"], [type="submit"])) {
      padding: 0 var(--_form-in-gap);
    }
    input:where([type="file"])::file-selector-button,
    input:where([type="file"])::-webkit-file-upload-button {
      line-height: calc(var(--_form-h) - 0.2rem);
    }
    input:where([type="range"]) {
      margin: calc((var(--_form-h) - var(--_h-range))/2) 0;
    }
    label {
      line-height: var(--_form-h);
      white-space: nowrap;
    }
    meter {
      margin: calc((var(--_form-h) - var(--_h-meter))/2) 0;
    }
    progress {
      margin: calc((var(--_form-h) - var(--_h-progress))/2) 0;
    }
    select {
      height: var(--_form-h);
      line-height: var(--_form-h);
      option {
        height: var(--_form-h);
      }
    }
    select:where([multiple]) {
      min-height: calc((var(--_form-h) + 1px)*5 - 1px);
    }
    textarea {
      --_input-os: calc((var(--_form-h) - var(--_sz-list))/2);
      padding-left: var(--_form-in-gap);
      padding-right: var(--_form-in-gap);
    }
    &:has(._box-tools) textarea {
      padding-right: var(--_sz-list);
    }
    ._box-tools {
      position: absolute;
      right: var(--_g);
      top: calc((var(--_form-h) - var(--_sz-list))/2);
      z-index: 2;
      [role="icon"] {
        font-size: var(--_fs-min);
      }
      >* {
        color: var(--_c-ignore);
        &:hover {
          color: var(--_c-text);
        }
      }
    }
    &:has(textarea) ._box-tools {
      flex-direction: column;
      right: 1rem;
    }
    [role="unit"] {
      font-size: var(--_fs-min);
      color: var(--_c-brief);
      background-color: var(--_c-stage);
      line-height: calc(var(--_sz-list) + .2rem);
      height: var(--_sz-list);
      position: absolute;
      right: var(--_g-sm);
      top: calc((var(--_form-h) - var(--_sz-list))/2);
    }
  }
  >[role="help"] {
    display: inline-flex;
    align-items: center;
    line-height: var(--_form-h);
    height: var(--_form-h);
    >* {
      margin-left: var(--_g-sm);
    }
    [role="text"] {
      line-height: calc(var(--_form-h)/2);
      height: var(--_form-h);
      display: inline-flex;
      align-items: center;
    }
    [role="disk"],
    [role="cube"],
    [role="image"] {
      height: var(--_form-h);
      display: inline-flex;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
      }
    }
    [role="disk"],
    [role="cube"] {
      aspect-ratio: 1/1;
    }
    [role="image"],
    [role="cube"] {
      border-radius: var(--_r);
    }
    [role="disk"] {
      border-radius: 100%;
    }
    AX-BTN {
      --_btn-fs: var(--_sz-ignore);
    }
  }
  input:where(:not([type="radio"], [type="checkbox"], [type="color"], [type="submit"], [type="reset"])),
  select,
  textarea,
  progress,
  meter {
    min-width: auto;
    width: 100%;
  }
}
._box-input:where(:not(._in-compact)) {
  >[role=help] AX-BTN {
    --_btn-p-lr: var(--_form-in-gap);
  }
}
._box-input:where(._in-embed) {
  >[role="label"] {
    text-align: left;
    justify-content: flex-start;
    padding-left: var(--_form-in-gap);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
  }
  >[role=content]>[role=input] {
    input:where(:not([type="radio"], [type="checkbox"], [type="range"], [type="reset"], [type="submit"])),
    textarea {
      padding-left: var(--_form-lbl-w);
    }
  }
}
._box-input:where(._in-full),
._box-input:where(._in-apart) {
  >[role="label"] {
    width: auto;
    text-align: left;
    justify-content: flex-start;
  }
  >[role="content"] {
    width: auto;
    flex: auto;
    text-align: left;
  }
}
:where(._in-full)._box-input>[role="label"] {
  max-width: var(--_w-label);
}
:where(._in-apart)._box-input {
  margin-top: calc(var(--_form-h) + var(--_form-m-tb));
  position: relative;
  >[role="label"],
  >[role="help"] {
    position: absolute;
    top: calc(-1*var(--_form-h));
  }
  >[role="label"] {
    left: 0;
  }
  >[role="help"] {
    right: 0;
    AX-BTN {
      --_btn-h: min(calc(var(--_form-h) - 1rem), var(--_sz-body));
    }
    [role="disk"],
    [role="image"],
    [role="cube"] {
      height: min(calc(var(--_form-h) - 1rem), var(--_sz-body));
    }
  }
}
:where(._in-compact)._box-input {
  --_form-in-gap: 0;
  --_form-m-tb: 0;
  --_form-p-tb: var(--_sz-font);
  --_form-p-lr: var(--_sz-font);
  border-top: var(--_form-bd-w) solid var(--_c-text-bd);
  margin: 0;
  >[role="label"] {
    width: auto;
    max-width: var(--_w-label);
    margin-right: 0;
    text-align: left;
    justify-content: flex-start;
  }
  >[role="content"] {
    width: auto;
    flex: auto;
    text-align: left;
    ._box-tools,
    [role="unit"] {
      right: 0;
    }
    [role="unit"] {
      background-color: transparent;
    }
    input:where(:not([type="radio"], [type="checkbox"], [type="range"], [type="reset"], [type="submit"])),
    select,
    select option {
      padding: 0;
    }
    textarea {
      padding-left: 0;
      padding-right: 0;
    }
    input:where(:not([type="radio"], [type="checkbox"], [type="range"], [type="reset"], [type="submit"], [type="color"])),
    select,
    textarea,
    progress,
    meter {
      min-width: auto;
    }
    input:where(:not([type="radio"], [type="checkbox"], [type="reset"], [type="submit"], [type="color"])),
    select,
    textarea,
    input:where(:not([type="radio"], [type="checkbox"], [type="reset"], [type="submit"], [type="color"])):hover,
    select:hover,
    textarea:hover,
    input:where(:not([type="radio"], [type="checkbox"], [type="reset"], [type="submit"], [type="color"])):focus,
    select:focus,
    textarea:focus {
      border-color: transparent;
      outline-color: transparent;
    }
  }
  >[role=help] {
    AX-BTN {
      --_btn-h: min(var(--_form-h), var(--_sz-input));
    }
    [role="disk"],
    [role="image"],
    [role="cube"] {
      height: min(var(--_form-h), var(--_sz-input));
    }
  }
}
._box-input:where(._in-sm, ._in-lg) {
  >[role=content]>[role=input] {
    input:where([type="reset"], [type="submit"]),
    button,
    AX-BTN {
      --_btn-h: var(--_form-h);
    }
  }
}
._box-input:where(._in-sm) {
  --_form-h: var(--_sz-body);
  --_form-in-gap: var(--_g-sm);
  --_form-m-tb: var(--_g-sm);
  >[role=help] AX-BTN {
    --_btn-fs: var(--_sz-ignore);
    --_btn-p-lr: var(--_form-in-gap);
  }
  &:where(:not(._in-apart, ._in-compact)) {
    >[role=help] AX-BTN {
      --_btn-h: var(--_form-h);
    }
  }
  &._in-compact {
    --_form-p-tb: var(--_sz-space);
  }
  &._in-apart {
    --_form-m-tb: var(--_sz-space);
  }
}
._box-input:where(._in-lg) {
  --_form-h: calc(var(--_sz-input) + 1rem);
  --_form-in-gap: var(--_g-md);
  >[role=content]>[role=input] {
    input:where([type="reset"], [type="submit"]),
    button,
    AX-BTN {
      --_btn-p-lr: 2.33em;
    }
  }
  &:where(:not(._in-apart, ._in-compact)) {
    >[role=help] AX-BTN {
      --_btn-h: var(--_form-h);
    }
  }
}
@media (any-hover: none) {
  ._box-input>[role=content]>[role=input] select:where([multiple]) {
    min-height: auto;
  }
}
@media screen and (max-width: @ceil-sm) {
  ._box-input>[role=help],
  ._box-input>[role=help]>* {
    font-size: var(--_sz-ignore);
  }
  ._box-input:where(:not(._in-apart, ._in-full, ._in-compact, ._in-embed)) {
    --_form-m-lr: var(--_p);
    >[role="label"] {
      width: auto;
      justify-content: flex-start;
    }
    >[role="content"] {
      width: auto;
      flex: auto;
      text-align: left;
      input:where(:not([type="radio"], [type="checkbox"], [type="range"], [type="reset"], [type="submit"], [type="color"])),
      select,
      textarea,
      progress,
      meter {
        min-width: auto;
      }
    }
  }
  ._box-input:where(._in-embed) {
    >[role="content"] {
      width: auto;
      flex: auto;
      text-align: left;
    }
  }
  ._box-input:where(:not(._in-compact, ._in-embed)) {
    >[role=help] {
      [role=text] {
        width: auto !important;
      }
    }
  }
  :where(._in-full)._box-input>[role="label"] {
    max-width: none;
  }
  ._box-input:where(:not(._in-apart, ._in-compact, ._in-embed)) {
    margin-top: calc(var(--_form-h) + var(--_form-m-tb));
    position: relative;
    >[role="label"],
    >[role="help"] {
      position: absolute;
      top: calc(-1*var(--_form-h));
    }
    >[role="label"] {
      left: 0;
      width: auto !important;
    }
    >[role="help"] {
      right: 0;
      AX-BTN {
        --_btn-h: calc(var(--_form-h) - 1rem);
      }
      [role="disk"],
      [role="image"],
      [role="cube"] {
        height: calc(var(--_form-h) - 1rem);
      }
    }
  }
}
