.dmn-boxed-expression-container {
  --context-menu-background-color: var(--bio-surface);
  --context-menu-border-color: var(--bio-border);
  --context-menu-color: var(--bio-text);
  --context-menu-box-shadow-color: var(--bio-shadow-subtle);
  --context-menu-group-entry-border-color: var(--bio-border);
  --context-menu-group-entry-disabled-color: var(--bio-text-subtlest);
  --context-menu-group-entry-hover-background-color: var(--bio-surface-medium);
  --edit-button-color: var(--bio-text);
  --edit-button-background-color: var(--bio-surface-subtle);
  --edit-button-border-color: var(--bio-border);
  --edit-button-box-shadow-color: var(--bio-shadow-subtle);
  --edit-button-disabled-color: var(--bio-border);
}

/* common */
.dmn-boxed-expression-container button {
  background: var(--bio-surface);
  border: solid 1px var(--bio-border);
  border-radius: var(--button-border-radius);
  color: var(--bio-text);
  font-size: var(--font-size);
}

.dmn-boxed-expression-container button:hover {
  background-color: var(--bio-surface-subtle);
}

.dmn-boxed-expression-container .dms-input {
  width: 160px;
}

/* context-menu */

.dmn-boxed-expression-container .context-menu {
  position: absolute;
  background: var(--context-menu-background-color);
  border: solid 1px var(--context-menu-border-color);
  border-radius: var(--surface-border-radius);
  font-size: 14px;
  color: var(--context-menu-color);
  box-shadow: 1px 1px 1px 1px var(--context-menu-box-shadow-color);
}

.dmn-boxed-expression-container .context-menu .context-menu-container {
  margin: 8px;
}

.dmn-boxed-expression-container .context-menu .context-menu-flex {
  display: flex;
  flex-direction: column;
}

.dmn-boxed-expression-container .context-menu .context-menu-group .context-menu-group-entry {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  padding: 8px 16px;
  cursor: default;
  white-space: nowrap;
}

.dmn-boxed-expression-container .context-menu-group .context-menu-group-entry:hover {
  background-color: var(--context-menu-group-entry-hover-background-color);
}

.dmn-boxed-expression-container .context-menu .context-menu-group .context-menu-group-entry.disabled {
  pointer-events: none;
  color: var(--context-menu-group-entry-disabled-color);
}

.dmn-boxed-expression-container .context-menu .context-menu-group .context-menu-group-entry .context-menu-group-entry-icon {
  display: inline-block;
  text-align: center;
  width: 14px;
  margin-right: 6px;
}

.dmn-boxed-expression-container .context-menu .context-menu-group .context-menu-group-entry .context-menu-group-entry-icon::before {
  margin: 0;
}

.dmn-boxed-expression-container .context-menu-group:not(:last-child)::after {
  content: '';
  display: block;
  margin: 0 8px;
  border-bottom: 1px solid var(--context-menu-group-entry-border-color);
  height: 1px;
}

/* edit-button */

.dmn-boxed-expression-container .edit-button {
  color: var(--edit-button-color);
  background-color: var(--edit-button-background-color);
  position: absolute;
  top: 2px;
  left: 2px;
  padding: 4px;
  border-radius: var(--button-border-radius);
  border: solid 1px var(--edit-button-border-color);
  font-size: var(--font-size);
  box-shadow: 1px 1px 1px 1px var(--edit-button-box-shadow-color);
}

.dmn-boxed-expression-container :not(:hover, :focus-within) .edit-button {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* function-definition */
.dmn-boxed-expression-container .context-menu .function-definition-parameter button {
  border: none;
  padding: 1px 6px;
}

.dmn-boxed-expression-container .context-menu .formal-parameters table {
  /* do not inherit the user agent's 2px spacing: a host that collapses tables
     would shift the cells out from under the button below */
  border-collapse: separate;
  border-spacing: 0;
}

.dmn-boxed-expression-container .context-menu .formal-parameters .add-parameter {
  /* the cells pad by 1px; match it so the button lines up with the inputs above */
  margin-top: 6px;
  margin-left: 1px;
  padding: 1px 6px;
}

.dmn-boxed-expression-container .context-menu .context-menu-container th,
.dmn-boxed-expression-container .context-menu .context-menu-container td {
  padding: 1px;
}