.marketing-input-button-pair__input,
.marketing-input-button-pair__button {
  @include shopify-breakpoint($tablet-up) {
    float: left;
  }
}

// Override mobile margin on .marketing-input-wrapper .marketing-input
.marketing-input-wrapper .marketing-input-button-pair__input {
  @include shopify-breakpoint($mobile) {
    margin-bottom: $gutter / 2;
  }
}

.marketing-input-button-pair__input {
  @include shopify-breakpoint($tablet-up) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.marketing-input-button-pair__button {
  // Need to set height on button to align cleanly with input borders
  height: $input-height;

  @include shopify-breakpoint($tablet-up) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.marketing-input-button-pair--medium-button {
  .marketing-input-button-pair__input {
    @include shopify-breakpoint($tablet-up) {
      width: 75%;
    }
  }

  .marketing-input-button-pair__button {
    @include shopify-breakpoint($tablet-up) {
      width: 25%;
    }
  }
}

.marketing-input-button-pair--large-button {
  .marketing-input-button-pair__input {
    @include shopify-breakpoint($tablet-up) {
      width: 70%;
    }
  }

  .marketing-input-button-pair__button {
    @include shopify-breakpoint($tablet-up) {
      width: 30%;
    }
  }
}

.marketing-input-button-pair--small-button {
  .marketing-input-button-pair__input {
    @include shopify-breakpoint($tablet-up) {
      width: 85%;
    }
  }

  .marketing-input-button-pair__button {
    @include shopify-breakpoint($tablet-up) {
      width: 15%;
    }
  }
}