@scope (.negotiation-controls) {
  :scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
  }

  .negotiation-controls__form {
    display: contents;
  }

  .negotiation-controls__option,
  .negotiation-controls__clear {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding-inline: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-none);
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;

    &:hover {
      background: var(--color-surface-muted);
      border-color: var(--color-border);
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .negotiation-controls__option--active {
    background: var(--color-warning-muted);
    border-color: transparent;
    color: var(--color-warning-text);
    box-shadow: none;
  }

  .negotiation-controls__clear {
    color: var(--color-text-secondary);
  }
}