.uex-dialog-viewer-content {
  background: $gray-400;
}

.uex-dialog-viewer-dialog {
  min-width: 40rem;
  width: auto;

  img {
    max-width: calc(100vw - #{$modal-dialog-margin-y-sm-up * 2});
    min-height: calc(30rem - #{$modal-dialog-margin-y-sm-up * 2});
    max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
  }

  .embed-responsive {
    width: 100%;
    max-width: calc(100vw - #{$modal-dialog-margin-y-sm-up * 2});
  }

  .uex-button[dialog-close] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    opacity: 0.25;
    transition: $btn-transition, opacity 0.3s;
    z-index: 1;

    &:hover {
      opacity: 1;
    }
  }

  &.uex-dialog-viewer-dialog-embed {
    max-width: calc(100vw - #{$modal-dialog-margin-y-sm-up * 2});
    width: 100%;

    @include media-breakpoint-up(md) {
      max-width: 50vw;
    }
  }
}