.editor-object {
  display: inline-block;
  width: calc(50vw - 10px);
  height: calc(100vh - 120px);
}

#editable-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

#bottom-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

#editor-area:not([data-editor="ace"]) #ace-editor {
  display: none;
}

#editor-area:not([data-editor="plain"]) #plain-editor {
  display: none;
}

#ace-editor {
  border-radius: 4px;
}

#plain-editor textarea {
  width: calc(100% - 12px);
  height: calc(100% - 8px);
  margin: 0;
  resize: none;
}

#preview {
  outline: 1px solid rgb(var(--surface0));
  overflow: scroll;
  text-align: left;
  padding: 10px;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  border-radius: 4px;
}

#preview table {
  border-collapse: collapse;
}

#preview table th,
#preview table td {
  border: 1px solid rgb(var(--surface2));
  padding: 3px;
}

#preview table tr:nth-child(even) {
  background-color: rgb(var(--mantle));
}

@media (max-width: 100vh) {
  .editor-object {
    width: calc(100vw - 20px);
    height: calc(50vh - 60px);
  }

  #editable-container {
    flex-direction: column;
  }
}