@import 'common/sass/variables';

.CurrencySwap {
  text-align: center;

  &-title {
    font-weight: 100;
    margin-bottom: $space * 2.5;
  }

  &-input,
  &-divider {
    display: inline-block;
    vertical-align: top;
  }
  &-input-group {
    display: inline-block;
  }
  &-error-message {
    display: block;
    min-height: 25px;
    color: $brand-danger;
    text-align: left;
  }
  &-inner-wrap {
    display: flex;
    justify-content: center;
    margin: 0 -8px;
    margin-bottom: 2rem;

    > .input-group-wrapper {
      margin: 0 8px;
      width: 100%;
      max-width: 320px;
    }
  }
  @media (max-width: $screen-sm) {
    &-inner-wrap {
      display: block;
      margin: 0;
      > .input-group-wrapper {
        max-width: 100%;
        margin: 0;
      }
    }
  }
  &-dropdown {
    display: inline-block;
    margin: 0 0;
  }

  &-input {
    width: 100%;
    max-width: 10rem;
    margin-right: $space-sm;
    margin-bottom: 0;
  }

  &-divider {
    font-size: 2.1125rem;
    margin: 0rem 1rem;
    line-height: $input-height-base;
    font-weight: 300;
  }

  &-submit {
    margin-top: 0.5rem;
  }

  &-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 175px;
  }
}