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

.jse-modal.jse-transform {
  .jse-contents {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: inherit;
    min-height: 0;
    padding: 0;

    .jse-main-contents {
      flex: 1;
      display: flex;
      gap: $padding-double;
      min-height: 0;
      box-sizing: border-box;

      padding: 0 $padding-double $padding;

      .jse-query-contents {
        flex: 1;
        display: flex;
        flex-direction: column;

        .jse-description {
          :global(p) {
            margin: $padding 0;

            &:first-child {
              margin-top: 0;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }

          :global(code) {
            background: var(--jse-modal-code-background);
            font-family: var(--jse-font-family-mono);
            font-size: var(--jse-font-size-mono);
          }
        }

        textarea.jse-query {
          flex: 1;
          outline: none;
          resize: vertical; // prevent resizing horizontally
        }
      }

      .jse-data-contents {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: $padding-double;

        .jse-original-data {
          flex: 1;
          display: flex;
          flex-direction: column;
          min-height: 0;
          box-sizing: border-box;

          &.jse-hide {
            flex: none;
          }
        }

        .jse-preview-data {
          flex: 1;
          display: flex;
          flex-direction: column;
          min-height: 0;
          box-sizing: border-box;
        }

        &.jse-hide-original-data {
          flex-direction: column;
          gap: 0;
          margin-bottom: 0;
        }
      }
    }

    .jse-actions {
      padding: $padding $padding-double $padding-double;
    }

    @media screen and (max-width: 1200px) {
      .jse-main-contents {
        flex-direction: column;
        overflow: auto;

        .jse-query-contents {
          textarea.jse-query {
            min-height: 150px;
            flex: none;
          }
        }

        .jse-data-contents {
          :global(.jse-tree-mode) {
            height: 300px;
            flex: none;
          }
        }
      }
    }
  }

  .jse-label {
    font-weight: bold;
    display: block;
    box-sizing: border-box;

    .jse-label-inner {
      margin-top: $padding-double;
      margin-bottom: $padding-half;
      box-sizing: border-box;

      button {
        @include jsoneditor-button;
        font-weight: bold;
        padding: 0;
      }
    }
  }

  :global(.jse-tree-mode) {
    flex: 1;
    background: var(--jse-input-background-readonly);
    box-shadow: none;
    box-sizing: border-box;

    --jse-main-border: var(--jse-input-border);
  }

  input,
  textarea {
    border: var(--jse-input-border);
    outline: none;
    box-sizing: border-box;
    padding: $padding-half;
    font-family: var(--jse-font-family-mono);
    font-size: var(--jse-font-size-mono);
    color: inherit;
    background: var(--jse-input-background);

    &:focus {
      border: var(--jse-input-border-focus);
    }

    &:read-only {
      background: var(--jse-input-background-readonly);
    }
  }

  .jse-preview.jse-error {
    flex: 1;
    background: var(--jse-input-background-readonly);
    border: var(--jse-input-border);
    color: var(--jse-error-color);
    padding: $padding-half;
  }

  :global(a) {
    color: var(--jse-a-color);
  }

  :global(a:hover) {
    color: var(--jse-a-color-highlight);
  }
}