:host,stencila-parameter{
  /** @prop --background: Background color of the Parameter component */
  --background:var(--color-stock,#fff);
  /** @prop --background-buttons: Background color of the parameter validator section */
  --background-buttons:var(--color-neutral-50,#edf2f7);
  /** @prop --border: Border color around the component as well as internal section dividers */
  --border:var(--color-neutral-100,#e2e8f0)
}

:host,stencila-parameter{
  border-radius:.25rem;
  border-style:solid;
  border-width:1px;
  color:#4a4a4a;
  color:var(--color-key,#4a4a4a);
  display:inline-flex;
  font-size:.875rem;
  line-height:1.25rem;
  line-height:1;
  padding:0;
  vertical-align:text-bottom;
  white-space:nowrap
}

:host,stencila-parameter{
  background-color:var(--background);
  border-color:var(--border)
}

:host .actions,stencila-parameter .actions{
  background-color:var(--background-buttons);
  cursor:default;
  display:inline-block;
  overflow:hidden;
  transition-duration:.15s;
  transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-timing-function:cubic-bezier(0,0,.2,1);
  width:0
}

:host([mode=edit].hover) .actions,:host([mode=edit]:focus) .actions,:host([mode=edit]:focus-within) .actions,:host([mode=edit]:hover) .actions,stencila-parameter[mode=edit].hover .actions,stencila-parameter[mode=edit]:focus-within .actions,stencila-parameter[mode=edit]:focus .actions,stencila-parameter[mode=edit]:hover .actions{
  display:inline-flex;
  max-width:100%;
  width:100%
}

:host .actions form,stencila-parameter .actions form{
  display:flex;
  flex-direction:column;
  padding:.5rem
}

:host .actions form label,stencila-parameter .actions form label{
  color:var(--color-neutral-600);
  display:block;
  font-family:sans-serif;
  font-family:var(--font-family-body,sans-serif);
  font-size:.75rem;
  line-height:1rem
}

:host .actions form label:not(:first-of-type),stencila-parameter .actions form label:not(:first-of-type){
  margin-top:.5rem
}

:host .actions form label input,:host .actions form label select,stencila-parameter .actions form label input,stencila-parameter .actions form label select{
  border-radius:.25rem;
  border-style:solid;
  border-width:1px;
  display:block;
  font-family:monospace;
  font-family:var(--font-family-mono,monospace);
  font-size:.875rem;
  line-height:1.25rem;
  margin-top:.25rem;
  width:100%
}

:host .actions form label input,:host .actions form label select,stencila-parameter .actions form label input,stencila-parameter .actions form label select{
  border-color:var(--border)
}

:host .name,stencila-parameter .name{
  background-color:var(--background-buttons);
  cursor:text;
  font-family:monospace;
  font-family:var(--font-family-mono,monospace);
  padding:.25rem
}

:host .name::slotted(label),stencila-parameter .name::slotted(label){
  cursor:text
}

:host .value,stencila-parameter .value{
  background-color:var(--background);
  font-family:monospace;
  font-family:var(--font-family-mono,monospace);
  margin:0;
  padding:0 .25rem
}

:host .value::slotted(input),:host .value::slotted(select),stencila-parameter .value::slotted(input),stencila-parameter .value::slotted(select){
  border-width:0;
  display:inline-block;
  font-family:monospace;
  font-family:var(--font-family-mono,monospace)
}

:host ::slotted(input:invalid),:host input:invalid,stencila-parameter ::slotted(input:invalid),stencila-parameter input:invalid{
  border-radius:.25rem
}

:host ::slotted(input:invalid),:host input:invalid,stencila-parameter ::slotted(input:invalid),stencila-parameter input:invalid{
  box-shadow:0 0 0 2px var(--color-danger-500)
}

