.modal-backdrop,
.offcanvas-backdrop {
  backdrop-filter: blur(3px) saturate(100%);
}

.modal-dialog-media {
  --#{$prefix}modal-close-zindex: #{$zindex-media-modal-close};
  .modal-header {
    position: relative;
    padding: 0;
    border-bottom: none;
    .btn-close {
      position: absolute;
      right: -1em;
      z-index: var(--#{$prefix}modal-close-zindex);
      width: $btn-close-media-width;
      height: $btn-close-media-height;
      text-shadow: 0 0 rfs-value(1px) $gray-400;
      opacity: .97;
      &::before,
      &::after {
        position: absolute;
        inset: 0;
        pointer-events: none;
        content: "";
        background: center / 100% 100% no-repeat;
      }
      &::before {
        background: transparent var(--#{$prefix}btn-close-media-bg) center / $btn-close-media-width 100% no-repeat; // include transparent for button elements
        opacity: 1;
      }
      &::after {
        background: transparent var(--#{$prefix}btn-close-media-bg-hover) center / $btn-close-media-width 100% no-repeat; // include transparent for button elements
        opacity: 0;
        @include transition(opacity .25s ease);
      }
      &:hover {
        opacity: 1;
        &::after { opacity: 1; }
      }
      @include media-breakpoint-down(xl) {
        right: rfs-value(-4px);
        width: rfs-value(10px);
        height: rfs-value(10px);
      }
    }
  }
  @include media-breakpoint-down(sm) {
    @include margin-right($spacer * 1.25);
    @include margin-left($spacer * 1.25);
  }
}

.modal-dialog-content {
  --#{$prefix}modal-close-zindex: #{$zindex-content-modal-close};
  --#{$prefix}modal-bg: #{$foundation};
  --#{$prefix}modal-color: #{$content-modal-content-color};
  --#{$prefix}heading-color: #{$white};
  &.modal-white {
    --#{$prefix}modal-bg: #{$white};
    --#{$prefix}modal-color: #{$body-color};
    --#{$prefix}heading-color: #{$headings-color};
  }
  .modal-header {
    position: relative;
    padding: 0;
    border-bottom: none;
    .btn-close {
      position: absolute;
      right: -1em;
      z-index: var(--#{$prefix}modal-close-zindex);
      width: $btn-close-content-width;
      height: $btn-close-content-height;
      text-shadow: 0 0 rfs-value(1px) $gray-400;
      opacity: .97;
      &::before,
      &::after {
        position: absolute;
        inset: 0;
        pointer-events: none;
        content: "";
        background: center / 100% 100% no-repeat;
      }
      &::before {
        background: transparent var(--#{$prefix}btn-close-content-bg) center / $btn-close-content-width 100% no-repeat; // include transparent for button elements
        opacity: 1;
      }
      &::after {
        background: transparent var(--#{$prefix}btn-close-content-bg-hover) center / $btn-close-content-width 100% no-repeat; // include transparent for button elements
        opacity: 0;
        @include transition(opacity .25s ease);
      }
      &:hover {
        opacity: 1;
        &::after { opacity: 1; }
      }
      @include media-breakpoint-down(xl) {
        right: rfs-value(-4px);
        width: rfs-value(10px);
        height: rfs-value(10px);
      }
    }
  }
  .modal-content {
    .image {
      img {
        @include border-radius($border-radius-xl);
        max-width: 350px;
        max-height: 350px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
      }
    }
    p {
      margin-bottom: 0;
    }
  }
  @include media-breakpoint-down(sm) {
    @include margin-right($spacer * 1.25);
    @include margin-left($spacer * 1.25);
  }
  @each $bp, $value in $grid-breakpoints {
    // Bootstrap only has sm/md/lg/xl/xxl versions
    @if $bp != xs {
      @include media-breakpoint-down($bp) {
        &.modal-fullscreen-#{$bp}-down {
          margin-right: 0;
          margin-left: 0;
          .modal-header {
            position: relative;
            padding: $spacer * .625;
            margin-top: $spacer;
            border-bottom: none;
            .btn-close {
              right: $spacer * 1.25;
              background-image: none;
            }
          }
          .image {
            width: 100%;
            img {
              display: block;
              margin: 0 auto;
            }
          }
        }
      }
    }
  }
}