@charset "utf-8";
@import (optional, reference) "var.less";
/*Toggle btns*/
._toggle {
  --_toggle-color: var(--_c-text);
  --_toggle-bd: var(--_c-text-bd);
  --_toggle-bg: hsla(var(--_h-stage), var(--_s-stage), var(--_l-stage), 0.4);
  --_toggle-gap: var(--_m);
  --_toggle-sz: var(--_sz-body);
  color: var(--_toggle-color);
  width: var(--_toggle-sz);
  border: 1px solid var(--_toggle-bd);
  background-color: var(--_toggle-bg);
  border-radius: 100%;
  aspect-ratio: 1 /1;
  cursor: pointer;
  .v3-flex-center(inline-flex);
  .v3-trans-all();
  position: fixed;
  right: var(--_toggle-gap);
  top: calc(50% - var(--_toggle-sz) / 2);
  z-index:610;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-duration: var(--_dur-5);
  animation-fill-mode: both;
  animation-name: _remind-h;
  &:before {
      font-family: var(--_ff-icon);
      content: 'arrow-left';
  }
  &[done] {
      right: calc(-1*var(--_toggle-sz) - 4px);
      &:before {
          content: 'arrow-right';
      }
  }
  &[placement=left] {
      right: auto;
      bottom: auto;
      left: var(--_toggle-gap);
      top: calc(50% - var(--_toggle-sz) / 2);
      &:before {
          content: 'arrow-right';
      }
      &[done] {
          left: calc(-1*var(--_toggle-sz) - 4px);
          &:before {
              content: 'arrow-left';
          }
      }
  }
  /*     &[placement=right] {
      right: var(--_toggle-gap);
      top: calc(50% - var(--_toggle-sz) / 2);
      &:before {
          content: 'left';
      }
      &[done] {
          right: calc(-1*var(--_toggle-sz));
          &:before {
              content: 'right';
          }
      }
  } */
  &[placement=top] {
      right: auto;
      bottom: auto;
      left: calc(50% - var(--_toggle-sz) / 2);
      top: var(--_toggle-gap);
      &:before {
          content: 'arrow-down';
      }
      &[done] {
          top: calc(-1*var(--_toggle-sz) - 4px);
          &:before {
              content: 'arrow-up';
          }
      }
  }
  &[placement=bottom] {
      right: auto;
      top: auto;
      left: calc(50% - var(--_toggle-sz) / 2);
      bottom: var(--_toggle-gap);
      &:before {
          content: 'arrow-up';
      }
      &[done] {
          bottom: calc(-1*var(--_toggle-sz) - 4px);
          &:before {
              content: 'arrow-down';
          }
      }
  }
  &[placement=top],
  &[placement=bottom] {
      &:not([done]) {
          animation-name: _remind-v;
      }
  }
  &[placement=left],
  &[placement=right] {
      &:not([done]) {
          animation-name: _remind-h;
      }
  }
  &[theme=prim] {
      --_toggle-color: var(--_c-prim);
      --_toggle-bd: var(--_c-prim);
      --_toggle-bg: var(--_c-prim-ac);
  }
  &[theme=error] {
      --_toggle-color: var(--_c-error);
      --_toggle-bd: var(--_c-error);
      --_toggle-bg: var(--_c-error-ac);
  }
  &[theme=succ] {
      --_toggle-color: var(--_c-succ);
      --_toggle-bd: var(--_c-succ);
      --_toggle-bg: var(--_c-succ-ac);
  }
  &[theme=info] {
      --_toggle-color: var(--_c-info);
      --_toggle-bd: var(--_c-info);
      --_toggle-bg: var(--_c-info-ac);
  }
  &[theme=issue] {
      --_toggle-color: var(--_c-issue);
      --_toggle-bd: var(--_c-issue);
      --_toggle-bg: var(--_c-issue-ac);
  }
  &[theme=warn] {
      --_toggle-color: var(--_c-warn);
      --_toggle-bd: var(--_c-warn);
      --_toggle-bg: var(--_c-warn-ac);
  }
  &:where(:not([theme])):hover {
      --_toggle-color: var(--_c-prim);
      --_toggle-bd: var(--_c-prim);
      --_toggle-bg: var(--_c-prim-ac);
  }
  &:where([theme]):hover {
      color: #fff;
      --_toggle-bg: var(--_toggle-color);
  }
}
