@import '../../styles';

.jse-modal {
  // styling for the select box, svelte-select
  // see docs: https://github.com/rob-balfre/svelte-select#styling
  --height: 36px;
  --multiItemHeight: 28px;
  --multiItemMargin: 2px;
  --multiItemPadding: 2px 8px;
  --multiClearTop: 5px;
  --multiItemBorderRadius: 6px;
  --clearSelectTop: 2px;
  --clearSelectBottom: 2px;
  --indicatorTop: 8px;

  flex: 1;
  display: flex;
  flex-direction: column;

  font-family: var(--jse-font-family);
  font-size: var(--jse-font-size);
  line-height: normal;
  background: var(--jse-modal-background);
  color: var(--jse-text-color);

  .jse-contents {
    padding: 20px;
    overflow: auto;

    .jse-actions {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;

      padding-top: $padding;

      button {
        @include jsoneditor-button-primary;
      }
    }
  }
}

// custom styling for the modal.
:global(.bg.jse-modal-bg) {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--jse-modal-overlay-background);
}

:global(.bg.jse-modal-bg .jse-modal-window-wrap) {
  margin: 0;
}

:global(.bg.jse-modal-bg .jse-modal-window) {
  max-width: 90%;
  margin: 4rem auto 2rem auto;
  border-radius: 2px;
}

:global(.bg.jse-modal-bg .jse-modal-window.jse-modal-window-sort) {
  width: 400px;
}

:global(.bg.jse-modal-bg .jse-modal-window.jse-modal-window-transform) {
  width: 1200px;
  height: 1200px;
  max-height: 80%;
  display: flex;
}

:global(.bg.jse-modal-bg .jse-modal-content) {
  flex: 1;
  display: flex;
  max-height: calc(100vh - 6rem);
  padding: 0;
}