#logseq-live-math--popup-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

div[data-ref='logseq-live-math'] {
  & .ls-ui-float-content,
  .draggable-handle {
    background-color: var(--ls-secondary-background-color, var(--rx-gray-02));
  }

  & .actions {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 5px 0;

    & button {
      font-family: tabler-icons, ui-font, system-ui;
      font-weight: bold;
      font-size: small;

      &.clear-button {
        color: var(--ls-error-color, var(--rx-red-10));
      }
      &.reset-button {
        color: var(--ls-warning-color, var(--rx-orange-10));
      }
      &.confirm-button {
        color: var(--ls-success-color, var(--rx-green-10));
      }
      &:disabled {
        color: var(--ls-secondary-text-color, var(--rx-gray-11));
      }
    }
  }

  & math-field {
    outline: none;
    margin: 0px 5px;
    border-radius: 0;
    color: var(--ls-primary-text-color, hsl(var(--primary)));
    background-color: var(--ls-secondary-background-color, var(--rx-gray-02));
    --contains-highlight-background-color: var(--ls-block-highlight-color);
    --selection-background-color: var(--ls-selection-background-color, var(--rx-blue-10));
    --primary: var(--ls-primary-theme-color, var(--ls-wb-text-color-blue));
    --text-font-family: KaTeX_Main, 'Times New Roman', serif;
    --ui-menu-bg: var(--ls-secondary-background-color, var(--rx-gray-02));
    --ui-menu-bg-active: var(--ls-selection-background-color, var(--rx-blue-10));
    --ui-menu-text-active: var(--ls-selection-text-color, var(--rx-gray-01));
    --neutral-200: var(--ls-secondary-background-color, var(--rx-gray-02));
    --neutral-100: var(--ls-secondary-background-color, var(--rx-gray-02));

    &::part(virtual-keyboard-toggle):hover {
      background-color: var(--ls-primary-background-color, var(--rx-gray-01));
      color: var(--ls-primary-text-color, hsl(var(--primary)));
    }
    /* Hide 'Toggle Virtual Keyboard' tooltip which spoils popup layout */
    &::part(virtual-keyboard-toggle)::after {
      display: none !important;
    }
    &::part(menu-toggle)::after {
      display: none !important;
    }
    &::part(container) {
      min-width: 200px; /* for inline math-field */
    }
  }
}

.ML__keyboard {
  --keyboard-background: var(--ls-secondary-background-color, var(--rx-gray-02));
  --keyboard-accent-color: var(--ls-primary-theme-color, var(--ls-wb-text-color-blue));
  --keyboard-toolbar-text: var(--ls-primary-text-color, hsl(var(--primary)));
  --keyboard-toolbar-background-hover: var(
    --ls-primary-background-color,
    var(--rx-gray-01)
  ) !important;
  --keycap-background: var(--ls-primary-background-color, var(--rx-gray-01));
  --keycap-text: var(--ls-secondary-text-color, var(--rx-gray-11));
  --keycap-secondary-background: var(--ls-tertiary-background-color, var(--rx-gray-03));
  --keycap-secondary-text: var(--ls-secondary-text-color, var(--rx-gray-11));
}

div#mathlive-suggestion-popover {
  background-color: var(--ls-primary-background-color, var(--rx-gray-01));
  z-index: var(--ls-z-index-level-2);

  & ul {
    padding: 8px;
    /* Limit min-width to reduce clutter */
    min-width: 16ch;
    gap: 0.25rem;
  }

  & li {
    /* Suggestion item */
    margin: 0;
    padding: 0.25rem;
    border-radius: 4px;
    width: 100%;
    gap: 0;
    color: var(--ls-secondary-text-color, var(--rx-gray-11));

    &.ML__popover__current {
      background-color: var(--ls-selection-background-color, var(--rx-blue-10));
      color: var(--ls-selection-text-color, var(--rx-gray-01));
    }

    & .ML__popover__latex {
      flex-grow: 1;
      text-align: start;
      margin-right: 0.5rem;
    }

    & .ML__popover__command {
      font-size: 1rem;
    }
  }
}

div#mathlive-suggestion-popover.top-tip::after {
  border-bottom-color: var(--ls-primary-background-color, var(--rx-gray-01));
}

div#mathlive-suggestion-popover.bottom-tip::after {
  border-top-color: var(--ls-primary-background-color, var(--rx-gray-01));
}
