$dialog-header-height: 57px;
$dialog-footer-height: 53px;
$dialog-min-outer-padding: 16px;

.sc-dialog {
  //? Container Setup
  &__content {
    //? Sizing (height)
    max-height: calc(
      var(--app-height, 100vh) - #{$dialog-min-outer-padding} * 2 - #{$dialog-header-height} -
        #{$dialog-footer-height}
    ) !important;

    // @include media-breakpoint-up(sm) {
    //   max-height: calc(
    //     (var(--app-height, 100vh) * 0.8) - #{$dialog-header-height} - #{$dialog-footer-height}
    //   ) !important;
    // }

    //? Sizing (width)
    &--w-sm,
    &--w-md,
    &--w-lg,
    &--w-xl,
    &--w-xxl {
      width: calc(100vw - #{$dialog-min-outer-padding} * 2);
    }

    &--w-sm {
      max-width: map-get($grid-breakpoints, sm);
    }

    &--w-md {
      max-width: map-get($grid-breakpoints, md);
    }

    &--w-lg {
      max-width: map-get($grid-breakpoints, lg);
    }

    &--w-xl {
      max-width: map-get($grid-breakpoints, xl);
    }

    &--w-xxl {
      max-width: map-get($grid-breakpoints, xxl);
    }

    //? Sizing (height)
    &--h-50,
    &--h-60,
    &--h-65,
    &--h-70,
    &--h-75,
    &--h-80,
    &--h-85,
    &--h-90,
    &--h-95,
    &--h-100 {
      min-height: 400px;
      height: calc(
        var(--app-height, 100vh) - #{$dialog-header-height} - #{$dialog-footer-height}
      ) !important;
    }

    &--h-50 {
      @include media-breakpoint-up(sm) {
        height: calc(
          (var(--app-height, 100vh) * 0.5) - #{$dialog-header-height} - #{$dialog-footer-height}
        ) !important;
      }
    }

    &--h-60 {
      @include media-breakpoint-up(sm) {
        height: calc(
          (var(--app-height, 100vh) * 0.6) - #{$dialog-header-height} - #{$dialog-footer-height}
        ) !important;
      }
    }

    &--h-65 {
      @include media-breakpoint-up(sm) {
        height: calc(
          (var(--app-height, 100vh) * 0.65) - #{$dialog-header-height} - #{$dialog-footer-height}
        ) !important;
      }
    }

    &--h-70 {
      @include media-breakpoint-up(sm) {
        height: calc(
          (var(--app-height, 100vh) * 0.7) - #{$dialog-header-height} - #{$dialog-footer-height}
        ) !important;
      }
    }

    &--h-75 {
      @include media-breakpoint-up(sm) {
        height: calc(
          (var(--app-height, 100vh) * 0.75) - #{$dialog-header-height} - #{$dialog-footer-height}
        ) !important;
      }
    }

    &--h-80 {
      @include media-breakpoint-up(sm) {
        height: calc(
          (var(--app-height, 100vh) * 0.8) - #{$dialog-header-height} - #{$dialog-footer-height}
        ) !important;
      }
    }

    &--h-85 {
      @include media-breakpoint-up(sm) {
        height: calc(
          (var(--app-height, 100vh) * 0.85) - #{$dialog-header-height} - #{$dialog-footer-height}
        ) !important;
      }
    }

    &--h-90 {
      @include media-breakpoint-up(sm) {
        height: calc(
          (var(--app-height, 100vh) * 0.9) - #{$dialog-header-height} - #{$dialog-footer-height}
        ) !important;
      }
    }

    &--h-95 {
      @include media-breakpoint-up(sm) {
        height: calc(
          (var(--app-height, 100vh) * 0.95) - #{$dialog-header-height} - #{$dialog-footer-height}
        ) !important;
      }
    }

    &--h-100 {
      @include media-breakpoint-up(sm) {
        height: calc(
          var(--app-height, 100vh) - #{$dialog-header-height} - #{$dialog-footer-height}
        ) !important;
      }
    }
  }
}