// swap btn
.swap-btn-container {
  max-width: 320px;
  @apply tw-m-auto tw-mt-0.5;
}

// swap form
.swap-form-container {
  @apply tw-flex tw-flex-col tw-items-center tw-justify-center;

  @screen lg {
    @apply tw-flex-row;
  }

  .swap-btn-helper {
    @apply tw-flex tw-mt-1 tw-justify-between tw-text-sov-white tw-text-xs tw-font-body tw-w-full;
  }

  .swap-form {
    @apply tw-bg-black tw-border-0 tw-rounded-lg tw-tracking-normal tw-p-8;
    width: 387px;
    min-height: 302px;

    .title {
      @apply tw-mb-10 tw-text-2xl tw-text-sov-white tw-font-body tw-uppercase tw-font-semibold tw-mb-7;
    }

    .available-balance {
      @apply tw-flex tw-mt-1 tw-justify-between tw-text-sov-white tw-text-xs tw-font-body;
    }

    .amount {
      @apply tw-pt-8 tw-text-secondary;
    }
  }

  .swap-revert-wrapper {
    @apply tw-flex tw-items-center tw-justify-center tw-mx-3 tw-my-0 tw-rotate-90 tw-w-28;

    @screen lg {
      @apply tw-rotate-0;
    }

    .swap-revert {
      @apply tw-cursor-pointer tw-w-44 tw-h-32 tw-bg-contain;
    }
  }
}

.statsContainer {
  @apply tw-flex tw-items-center tw-justify-around tw-text-xs tw-p-2;
  @media (max-width: 768px) {
    @apply tw-flex-wrap;
  }
  & > div {
    &:nth-child(n + 6) {
      @apply tw-hidden;
    }
    @media (max-width: 1200px) {
      & > div:nth-child(2) {
        @apply tw-hidden;
      }
    }
    @media (max-width: 768px) {
      @apply tw-mx-0 tw-my-0.5;
    }
  }
}
