@import '../../sass/base.scss';

// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - positioning shell for the actual modal
// .modal-content   - actual modal bg and corners and stuff

$modal-sm:                 18rem !default;
$modal-md:                 32rem !default;
$modal-lg:                 50rem !default;

$modal-inner-padding:      1rem;
$modal-dialog-margin-y-up: 1.75rem;

$modal-fade-transform:     translate(0, -50px) !default;
$modal-show-transform:     none !default;
$modal-transition:         transform .3s ease-out !default;
$modal-scale-transform:    scale(1.02) !default;

$modal-content-bg:         #fff;
$modal-content-border:     1px solid rgba(#000, 0.175); // offcanvas
$modal-content-shadow:     0 .125rem .25rem rgba(#000, .075);

$modal-backdrop-bg:        #000;
$modal-backdrop-opacity:   .6;

// Shell div to position the modal with bottom padding
.bb-modal-dialog {
  .is-modal > & {
    @media (min-width: map-get($breakpoints, md )) {
      width: var(--bb--modal-width--md, #{$modal-md});

      &[style*="--bb--modal-height--md:"] {
        height: var(--bb--modal-height--md);
      }
    }

    @media (min-width: map-get($breakpoints, lg )) {
      width: var(--bb--modal-width--lg, #{$modal-lg});

      &[style*="--bb--modal-height--lg:"] {
        height: var(--bb--modal-height--lg);
      }
    }
  }
}

// Custom position
.modal--custom-position {
  @media (min-width: map-get($breakpoints, md )) {
    align-items: var(--bb--modal-v-align--md);
    justify-content: var(--bb--modal-h-align--md);
  }
  @media (min-width: map-get($breakpoints, lg )) {
    align-items: var(--bb--modal-v-align--lg);
    justify-content: var(--bb--modal-h-align--lg);
  }
}

// Modal/off-canvas preview
.is-modal-preview {
  .block-list-appender {
    display: none !important;
  }

  .wp-element-button {
    cursor: pointer;
  }
}

.toggle-preview-open .editor-editor-interface .interface-interface-skeleton__content {
  isolation: auto;
}

.toggle-preview-button {
  justify-content: center !important;
}