Can I use sass variables to affect a single component?

Ionic Framework ionic-v3
1

I’m trying to wrap a datetimepicker (for web) in a modal. That’s easy enough using

  openCalendar() {
    let modal = this.modalCtrl.create(DatetimepickerPage)
    modal.present();
  }

I would like to size the modal to fit the datetime picker - the default size is way to big. I can do this globally by using the sass variables for the modal component in theme/variables.scss, eg. $modal-inset-min-width: 368px !default; - but they are global and affect every modal. If I try use sass variables in a specific page it does nothing.

Another possibility is using css directly, but I can’t seem to target the element. I’ve tried many variants of this:

div.modal-wrapper {
        page-datetimepicker.ion-page.show-page {
        left: calc(50% - (250/2));
        top: calc(50% - (300px/2));
        max-width: 250px;
        max-height: 350px;
    }
}