.math-answer-field {
  box-sizing: border-box;
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  margin: 0;
  padding: 0 12px;
  text-align: center;
  font-size: 20px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-1);
  box-shadow: var(--field-shadow);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.math-answer-field.mq-editable-field.mq-focused {
  border-color: var(--border-1);
  outline: none;
  box-shadow: var(--field-focus-shadow);
}

.math-answer-field .mq-root-block {
  width: 100%;
  padding: 2px 0;
  text-align: inherit;
}

.math-answer-field .mq-selection {
  --markov-math-selection-background: var(--math-selection-background);
  display: inline-block;
  background: var(--markov-math-selection-background) !important;
  box-shadow: 0 -2px 0 var(--markov-math-selection-background);
}

.math-answer-field .mq-selection.mq-blur {
  --markov-math-selection-background: var(--math-selection-background-muted);
}

[data-theme="dark"] .math-answer-field .mq-cursor {
  color: var(--color-white-0);
}

.math-answer-field[data-markov-empty][data-answer-placeholder]::before {
  content: attr(data-answer-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: inherit;
  color: var(--text-3);
  font-family: "Times New Roman", Symbola, serif;
  font-size: 17px;
  font-style: normal;
  pointer-events: none;
}

.math-answer-field:not([data-markov-math-field-ready]) {
  cursor: text;
  font-family: "Times New Roman", Symbola, serif;
  font-style: normal;
}

.math-answer-field:not([data-markov-math-field-ready])[data-pending-typed-text]::before {
  content: attr(data-pending-typed-text);
  color: var(--text-1);
}

.math-answer-field[data-expanded-math-field] {
  height: 60px;
  min-height: 60px;
  max-height: 60px;
}