.novamath-mathfield {
  --hue: 212;
  --text-font-family: inherit;
  display: inline-block;
  width: max-content;
  max-width: 100%;
}

.novamath-mathfield[data-render-path="outline"] .novamath-mathfield__input {
  -webkit-text-stroke: 0.35px currentColor;
  paint-order: stroke fill;
}

.novamath-mathfield__input {
  --primary: hsl(var(--muted-foreground) / 0.45);
  display: block;
  width: max-content;
  max-width: 100%;
  min-width: 12rem;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  font-size: inherit;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.novamath-mathfield__input:focus-within {
  --primary: hsl(var(--muted-foreground) / 0.65);
  border-color: hsl(var(--ring) / 0.35);
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.15);
}

.novamath-mathfield__input::part(container) {
  gap: 0.125rem;
  align-items: center;
}

.novamath-mathfield__input::part(virtual-keyboard-toggle),
.novamath-mathfield__input::part(menu-toggle) {
  margin-inline-start: 0.125rem;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease;
}

.novamath-mathfield__input:hover::part(virtual-keyboard-toggle),
.novamath-mathfield__input:hover::part(menu-toggle) {
  opacity: 0.62;
  pointer-events: auto;
}

.novamath-mathfield__input::part(virtual-keyboard-toggle):hover,
.novamath-mathfield__input::part(menu-toggle):hover {
  opacity: 0.88;
  background-color: hsl(var(--muted) / 0.55);
}