@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./modal.common";

// Ionic Modal
// --------------------------------------------------

:host {
  --background: #{globals.$ion-bg-surface-default};
  --box-shadow: #{globals.$ion-elevation-3};
  // Backdrop opacity is 1 because the backdrop's background color has an alpha value
  --backdrop-opacity: 1;

  color: globals.$ion-text-default;
}

// Shape
// -------------------------------------
:host(.modal-round) {
  --border-radius: #{globals.$ion-border-radius-1000};
}

:host(.modal-soft) {
  --border-radius: #{globals.$ion-border-radius-400};
}

:host(.modal-rectangular) {
  --border-radius: #{globals.$ion-border-radius-0};
}

// Default Modal
// --------------------------------------------------

// Modal when inside a select default-modal
:host(.select-modal.modal-default) {
  --max-height: 45%;
  --max-width: calc(100% - (#{globals.$ion-space-400} * 2));
  --min-height: 340px;
}

// Sheet Modal
// --------------------------------------------------

.modal-handle {
  @include globals.position(globals.$ion-space-300, 0px, null, 0px);
  @include globals.border-radius(globals.$ion-border-radius-100);

  width: globals.$ion-scale-1100;
  height: globals.$ion-scale-100;

  background-color: globals.$ion-primitives-neutral-300;

  &::before {
    @include globals.padding(globals.$ion-space-100);
  }
}

:host(.modal-sheet) .modal-wrapper {
  @include globals.border-radius(var(--border-radius), var(--border-radius), 0, 0);
}

/**
 * Ensure that the sheet modal does not
 * completely cover the content.
 */
:host(.modal-sheet) {
  --height: calc(100% - (var(--ion-safe-area-top) + #{globals.$ion-scale-250}));
}