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

.jse-modal.jse-sort {
  .jse-contents {
  }

  table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;

    th,
    td {
      text-align: left;
      vertical-align: middle;
      font-weight: normal;
      padding-bottom: $padding;

      input.jse-path {
        width: 100%;
        box-sizing: border-box;
        padding: 6px 16px; // TODO: define variables for those props
        border: var(--jse-input-border);
        border-radius: var(--jse-input-radius);
        font-family: inherit;
        font-size: inherit;
        background: inherit;
        color: inherit;
        outline: none;

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

      :global(.selectContainer input) {
        box-sizing: border-box;
      }
    }
  }

  .jse-space {
    height: 200px; // Trick for the property select box dropdown to be fully visible

    .jse-error {
      color: var(--jse-error-color);
    }
  }
}