.swap {
  position: relative;
}
.swap .mask {
  max-width: 100%;
  overflow: hidden;
}
.swap .list > .item {
  box-sizing: border-box;
  vertical-align: middle;
}
.swap input[type=radio],
.swap input[type=checkbox] {
  visibility: hidden;
  opacity: 0;
  z-index: -1;
  display: none;
  position: absolute;
  z-index: -1;
}
.swap .btn, .swap label {
  user-select: none;
}
.swap .btn {
  cursor: pointer;
  margin: initial;
}
.swap .btn .label {
  font-weight: initial;
}
.swap .nav-btn, .swap .nav-dots {
  visibility: hidden;
  opacity: 0;
  display: flex;
  text-align: center;
  vertical-align: middle;
}
.swap .nav-btn {
  position: absolute;
  display: block;
  top: 50%;
  width: 100%;
}
.swap .nav-btn .btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.swap .nav-btn .btn.btn-before {
  left: 0;
}
.swap .nav-btn .btn.btn-next {
  right: 0;
}
.swap.set-nav-btn-before .nav-btn, .swap.set-nav-btn-next .nav-btn {
  visibility: visible;
  opacity: 1;
  display: block;
}

.swap-toggle > .mask {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: all var(--transition-duration) var(--transition-timing-function);
}
.swap-toggle > .nav > .btn {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  transition: all var(--transition-duration) var(--transition-timing-function);
  border: 0;
  border-radius: initial;
}
.swap-toggle > .nav > .btn:hover {
  background-color: #00213c;
}
.swap-toggle > .nav > .btn::after {
  content: "+";
  display: block;
  margin: 0 0.5rem;
  right: 0;
  width: 1rem;
  height: 1rem;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.swap-toggle > .nav > .btn * {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}
.swap-toggle > .checkbox:checked ~ .mask {
  height: auto;
  visibility: visible;
  opacity: 1;
}
.swap-toggle > .checkbox:checked ~ .nav > .btn::after {
  content: "-";
}
.swap-toggle.active > .mask {
  height: auto;
  visibility: visible;
  opacity: 1;
}
.swap-toggle.active > .btn::after {
  content: "-";
}

/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../system/CrayssnLabs/Base/_resources/scss/components/swap/_basic.scss%22,%22../../system/CrayssnLabs/Base/_resources/scss/utilities/mixins/_box-sizing.scss%22,%22../../system/CrayssnLabs/Base/_resources/scss/utilities/mixins/_visibility.scss%22,%22../../system/CrayssnLabs/Base/_resources/scss/utilities/mixins/_flex.scss%22,%22../../system/CrayssnLabs/Base/_resources/scss/utilities/mixins/_transform.scss%22,%22../../system/CrayssnLabs/Base/_resources/scss/utilities/mixins/component/_swap.scss%22,%22compile.scss%22,%22../../system/CrayssnLabs/Base/_resources/scss/utilities/mixins/_transition.scss%22,%22combined-variables.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAUA;EAMG;;AAEA;EAEG;EACA;;AAGH;ECrBA,YAFuB;ED0BpB;;AAGH;AAAA;EEkCA;EACA;EAtBA,SAHkC;EAY/B,SAZgB;EFNhB;EACA;;AAGH;EAEG;;AAGH;EAEG;EACA;;AAEA;EAEG;;AAIN;EEUA;EACA;EChDA,SAT2B;EHkDxB;EACA;;AAGH;EAEG;EACA;EACA;EACA;;AAEA;EI/BH;EACA;EAzBG;;AJ4DG;EAEG;;AAGH;EAEG;;AAQN;EE/BH;EACA;EFiCM;;;AKgKN;EClPG;EACA;EJqDH;EACA;EKnCA,YAPU;;AFmXJ;ECxXH;EACA;EACA;EACA;ECSH,YAPU;EDAP;EACA;;AAEA;EAEG,kBE0jBiB;;AFvjBpB;EAEG;EACA;EACA;EACA;EACA;EACA;EACA;EFDN;EACA;EAzBG;;AE6BA;EAEG;EACA;EACA;;AAMH;EAEG;EJGN;EACA;;AIEM;EAEG;;AAON;EAEG;EJdN;EACA;;AImBM;EAEG%22,%22file%22:%22output-68bcb86391f77.css%22%7D */