$icon-colors: (
  start: get-color(or-550),
  end: get-color(gb-500),
);

@media only screen and (min-width: 768px) and (min-height: 768px), (min-width: 768px) and (min-height: 600px) {
  ion-modal {
    --width: 100%;
    --height: 100%;
    --border-radius: 0px;
    --ion-safe-area-top: env(safe-area-inset-top);
    --ion-safe-area-bottom: env(safe-area-inset-bottom);
  }
}

ion-modal {
  &.small-modal {
    --height: 50vh;
    --border-radius: 10px;

    .uofx-modal-content {
      padding: 16px 20px 0px 20px;
    }
  }

  &.uofx-zoom-img-modal {
    --backdrop-opacity: 0;
    --background: transparent;
  }

  uofx-modal-header {
    ion-toolbar {
      @each $c-key, $c-value in $icon-colors {
        ion-buttons[slot='#{$c-key}'] ion-icon {
          color: $c-value;
        }
      }
    }
  }

  .uofx-modal-content {
    padding: 24px 20px 0px 20px;
  }

  .uofx-modal-footer {
    .btn-defaultCss {
      flex: 1;
    }
  }
}