/*
 * Built on Lexxy's --lexxy-* variables, so it follows the host's Lexxy theme.
 * The README's Styling section lists the classes and how to override them.
 *
 * Rules wrapped in :where() have zero specificity, so any host rule for the
 * class wins. The rest use a single class because they have to beat Lexxy's
 * own styles.
 */

:where(.lexxy-variable) {
  background: var(--lexxy-variable-background, var(--lexxy-color-selected));
  border-radius: var(--lexxy-radius);
  color: var(--lexxy-variable-color, var(--lexxy-color-text));
  display: inline-block;
  font-size: 0.875em;
  padding: 0 0.4em;
  white-space: nowrap;
}

/* Lexxy shows selection by coloring the attachment around the chip, whose
   corners would show behind a rounder chip. Paint the selection on the chip
   instead, so it keeps the chip's shape. */
action-text-attachment[content-type].node--selected:has(> .lexxy-variable) {
  --lexxy-attachment-bg-color: transparent;
}

.node--selected > .lexxy-variable {
  background: var(--lexxy-variable-selected-background, var(--lexxy-color-accent-dark));
  color: var(--lexxy-variable-selected-color, var(--lexxy-color-ink-inverted));
}

:where(.lexxy-variable--block) {
  border: var(--lexxy-variable-block-border, 1px dashed var(--lexxy-color-accent-medium));
}

/* Lexxy styles the panel itself. Extension buttons sit at the end of the
   toolbar, so the panel opens toward the editor instead of past its edge. */
.lexxy-variables-menu {
  border-start-end-radius: 0;
  flex-direction: column;
  font-family: var(--lexxy-font-base);
  inset-inline-end: 0;
  max-block-size: var(--lexxy-variables-menu-max-height, 20rem);
  max-inline-size: var(--lexxy-variables-menu-max-width, min(20rem, 85vw));
  min-inline-size: 14rem;
  overflow-y: auto;
}

.lexxy-variables-menu__item {
  color: var(--lexxy-color-text);
  display: flex;
  font: inherit;
  padding: 1ch;
  text-align: start;
}

/* Lexxy caps every prompt popup at 20ch, which wraps names and truncates keys.
   Widen only the variables popup, and leave Lexxy's edge clipping alone. */
.lexxy-prompt-menu:has(.lexxy-variables-option):not([data-clipped-at-right]) {
  max-inline-size: min(
    var(--lexxy-variables-prompt-max-width, 24rem),
    calc(100% - var(--lexxy-prompt-offset-x, 0px))
  );
}

:where(.lexxy-variables-option) {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  max-inline-size: 100%;
  min-inline-size: 0;
}

:where(.lexxy-variables-option__header) {
  align-items: baseline;
  display: flex;
  gap: 0.5rem;
  inline-size: 100%;
  justify-content: space-between;
}

:where(.lexxy-variables-option__name) {
  font-size: var(--lexxy-text-small);
  min-inline-size: 0;
}

:where(.lexxy-variables-option__type) {
  background: var(--lexxy-color-ink-lightest);
  border-radius: 9999px;
  color: var(--lexxy-color-text-subtle);
  flex-shrink: 0;
  font-size: 0.6875rem;
  line-height: 1.4;
  padding: 0.0625rem 0.375rem;
  white-space: nowrap;
}

/* A single class, since it has to beat Lexxy's inline code styles. */
.lexxy-variables-option__code {
  background: transparent;
  color: var(--lexxy-color-ink-light);
  font-family: var(--lexxy-font-mono);
  font-size: 0.75rem;
  max-inline-size: 100%;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}