/**
 * Semantic tokens, copied from `@bpmn-io/theme` to style the components
 * according to this theme.
 *
 * Names and values of the tokens should stay intact with the `@bpmn-io/theme`
 * source of truth, to ensure matching styles and allow overrides with an
 * alternative theme.
 */
.bio-theme-parent {
  --bio-surface-strong: hsl(225, 10%, 90%);
  --bio-text-subtle: hsl(225, 10%, 35%);
  --bio-text-subtlest: hsl(225, 10%, 55%);
  --bio-border-subtle: hsl(225, 10%, 85%);
  --bio-neutral: hsl(225, 10%, 35%);
  --bio-neutral-hover: hsl(225, 10%, 30%);
  --bio-shadow: hsla(0, 0%, 0%, 30%);
  --bio-radius-lg: 4px;
}

.bio-properties-panel {
  /* the badge variables come from @bpmn-io/properties-panel, so these badges follow its own */
  --select-template-background-color: var(--accent-badge-background-color);
  --select-template-hover-background-color: var(--accent-badge-hover-background-color);
  --select-template-fill-color: var(--accent-badge-fill-color);
  --select-template-label-color: var(--accent-badge-color);

  --unknown-template-background-color: var(--error-badge-background-color);
  --unknown-template-hover-background-color: var(--error-badge-hover-background-color);

  --incompatible-template-background-color: var(--warning-badge-background-color);
  --incompatible-template-hover-background-color: var(--warning-badge-hover-background-color);
  --incompatible-template-fill-color: var(--warning-badge-color);
  --incompatible-template-label-color: var(--warning-badge-color);

  --select-template-information-text-color: var(--bio-text-subtlest);

  --deprecated-template-hover-background-color: var(--bio-neutral-hover);
  --deprecated-template-background-color: var(--bio-neutral);

  --surface-border-radius: var(--bio-radius-lg);
}

.bio-properties-panel-header-template-icon {
  object-fit: contain;
}

.bio-properties-panel-templates-group .bio-properties-panel-group-header {
  position: initial;
}

.bio-properties-panel-templates-group .bio-properties-panel-group-header-button:not(.bio-properties-panel-arrow) {
  padding-right: 6px;
  padding-left: 9px;
  border-radius: 11px;
}

.bio-properties-panel-applied-template-button .bio-properties-panel-group-header-button,
.bio-properties-panel-template-update-available .bio-properties-panel-group-header-button,
.bio-properties-panel-group-header-button.bio-properties-panel-select-template-button {
  background-color: var(--select-template-background-color);
  color: var(--select-template-label-color);
  fill: var(--select-template-fill-color);
}

.bio-properties-panel-applied-template-button .bio-properties-panel-group-header-button:hover,
.bio-properties-panel-template-update-available .bio-properties-panel-group-header-button:hover,
.bio-properties-panel-group-header-button.bio-properties-panel-select-template-button:hover {
  background-color: var(--select-template-hover-background-color);
}

.bio-properties-panel-templates-group .bio-properties-panel-group-header-button * {
  color: inherit;
}

.bio-properties-panel-templates-group .bio-properties-panel-group-header-button * + * {
  margin-left: 2px;
}

.bio-properties-panel-group-header-button.bio-properties-panel-select-template-button:last-child {
  padding-right: 9px;
  padding-left: 6px;
  margin-right: 22px;
}

.bio-properties-panel-template-update-available:last-child,
.bio-properties-panel-applied-template-button:last-child,
.bio-properties-panel-template-not-found:last-child,
.bio-properties-panel-template-incompatible:last-child {
  margin-right: 32px;
}

.bio-properties-panel-remove-template {
  color: var(--text-error-color);
}

.bio-properties-panel-deprecated-template-button .bio-properties-panel-group-header-button {
  background-color: var(--deprecated-template-background-color);
  color: var(--select-template-label-color);
  fill: var(--select-template-fill-color);
}

.bio-properties-panel-deprecated-template-button:hover .bio-properties-panel-group-header-button:hover {
  background-color: var(--deprecated-template-hover-background-color);
}

.bio-properties-panel-template-not-found .bio-properties-panel-group-header-button {
  background-color: var(--unknown-template-background-color);
  color: var(--error-badge-color);
  fill: var(--error-badge-color);
}

.bio-properties-panel-template-not-found .bio-properties-panel-group-header-button:hover {
  background-color: var(--unknown-template-hover-background-color);
}

.bio-properties-panel-template-incompatible .bio-properties-panel-group-header-button {
  background-color: var(--incompatible-template-background-color);
  color: var(--incompatible-template-label-color);
  fill: var(--incompatible-template-fill-color);
}

.bio-properties-panel-template-incompatible .bio-properties-panel-group-header-button:hover {
  background-color: var(--incompatible-template-hover-background-color);
}

.bio-properties-panel-template-not-found-text,
.bio-properties-panel-template-update-available-text,
.bio-properties-panel-template-incompatible-text {
  color: var(--select-template-information-text-color);
}

.bio-properties-panel-template-not-found-text,
.bio-properties-panel-template-update-available-text,
.bio-properties-panel-deprecated-template-text,
.bio-properties-panel-template-incompatible-text {
  width: 216px;
}

/* configuration chooser; spacing comes from the standard .bio-properties-panel-entry.
   Component-scoped semantic tokens give themers one seam to re-skin the chooser.
   They exist only for roles without a semantically fitting properties-panel token
   (a mismatch, e.g. the collapse-arrow or input-fill token borrowed for a value);
   where a panel token already matches the meaning it is used directly. */
.bio-properties-panel-configuration-chooser {
  position: relative;

  --configuration-chooser-card-hover-background-color: var(--arrow-hover-background-color);
  --configuration-chooser-option-hover-background-color: var(--input-background-color);
  --configuration-chooser-menu-button-hover-background-color: var(--bio-surface-strong);
  --configuration-chooser-logo-background-color: var(--bio-surface-strong);
  --configuration-chooser-subtitle-color: var(--bio-text-subtlest);
  --configuration-chooser-status-color: var(--bio-text-subtle);
  --configuration-chooser-separator-color: var(--bio-border-subtle);
}

/* one card box shared across every state via .…-chooser-card; state modifiers
   (--placeholder / --selected / --missing / --offline / --error) carry only
   their deltas. Mirrors the .bio-properties-panel-entry + .has-error convention. */
.bio-properties-panel-configuration-chooser-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--input-border-color);
  border-radius: var(--surface-border-radius);
  background-color: var(--group-background-color);
  cursor: default;
  outline: none;
}

/* severity mirrors the standard entry states; .has-warning first so error wins
   when both are set (matching @bpmn-io/properties-panel) */
.bio-properties-panel-configuration-chooser.has-warning .bio-properties-panel-configuration-chooser-card {
  border-color: var(--input-warning-border-color);
  background-color: var(--input-warning-background-color);
}

.bio-properties-panel-configuration-chooser.has-error .bio-properties-panel-configuration-chooser-card {
  border-color: var(--input-error-border-color);
  background-color: var(--input-error-background-color);
}

/* interactive cards get the standard panel-button hover; loading opts out */
.bio-properties-panel-configuration-chooser-card--placeholder:hover:not(:disabled),
.bio-properties-panel-configuration-chooser-card--selected:hover,
.bio-properties-panel-configuration-chooser-card--missing:hover {
  background-color: var(--configuration-chooser-card-hover-background-color);
}

/* focus adds the standard input focus treatment; placed after hover so it wins
   when a card is both hovered and focused */
.bio-properties-panel-configuration-chooser-card--selected:focus-within,
.bio-properties-panel-configuration-chooser-card--missing:focus-within {
  border-color: var(--input-focus-border-color);
  background-color: var(--input-focus-background-color);
}

/* placeholder (no selection): a dashed action button */
.bio-properties-panel-configuration-chooser-card--placeholder {
  justify-content: center;
  gap: 6px;
  width: 100%;
  border-style: dashed;
  color: var(--description-color);
  font-size: 13px;
  cursor: pointer;
}

.bio-properties-panel-configuration-chooser-card--placeholder:disabled {
  cursor: default;
  opacity: 0.5;
}

/* control wrapper: anchors the popover / actions menu directly below the card */
.bio-properties-panel-configuration-chooser-control {
  position: relative;
}

.bio-properties-panel-configuration-chooser-create-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.bio-properties-panel-configuration-chooser-trigger {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.bio-properties-panel-configuration-chooser-trigger:disabled {
  cursor: default;
}

.bio-properties-panel-configuration-chooser-refreshing {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--configuration-chooser-separator-color);
}

/* logo */
.bio-properties-panel-configuration-chooser-logo {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: contain;
}

.bio-properties-panel-configuration-chooser-logo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--configuration-chooser-logo-background-color);
  color: var(--description-color);
  font-weight: 600;
}

/* text block */
.bio-properties-panel-configuration-chooser-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.bio-properties-panel-configuration-chooser-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bio-properties-panel-configuration-chooser-subtitle {
  font-size: 12px;
  color: var(--configuration-chooser-subtitle-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bio-properties-panel-configuration-chooser-varname {
  font-family: monospace;
}

/* menu (...) button */
.bio-properties-panel-configuration-chooser-menu {
  flex: 0 0 auto;
  padding: 0 6px;
  border: none;
  background: none;
  color: var(--description-color);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--surface-border-radius);
}

.bio-properties-panel-configuration-chooser-menu:hover:not(:disabled) {
  background-color: var(--configuration-chooser-menu-button-hover-background-color);
}

.bio-properties-panel-configuration-chooser-menu:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* popover */
.bio-properties-panel-configuration-chooser-popover {
  position: absolute;
  z-index: 100;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  border: 1px solid var(--input-border-color);
  border-radius: var(--surface-border-radius);
  background-color: var(--group-background-color);
  box-shadow: 0 2px 6px var(--bio-shadow);
  overflow: hidden;
}

.bio-properties-panel-configuration-chooser-popover-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  outline: none;
}

.bio-properties-panel-configuration-chooser-popover-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  outline: none;
}

.bio-properties-panel-configuration-chooser-popover-row:hover,
.bio-properties-panel-configuration-chooser-popover-row--active {
  background-color: var(--configuration-chooser-option-hover-background-color);
}

/* create configuration footer */
.bio-properties-panel-configuration-chooser-create {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-top: 1px solid var(--configuration-chooser-separator-color);
  background: none;
  color: var(--link-color);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.bio-properties-panel-configuration-chooser-create:hover,
.bio-properties-panel-configuration-chooser-create--active,
.bio-properties-panel-configuration-chooser-create:focus-visible {
  background-color: var(--configuration-chooser-option-hover-background-color);
}

.bio-properties-panel-configuration-chooser-empty {
  padding: 10px 12px;
}

.bio-properties-panel-configuration-chooser-refreshing,
.bio-properties-panel-configuration-chooser-empty {
  color: var(--configuration-chooser-status-color);
  font-size: 13px;
}

/* context menu (... actions) */
.bio-properties-panel-configuration-chooser-context-menu {
  position: absolute;
  z-index: 11;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 150px;
  border: 1px solid var(--input-border-color);
  border-radius: var(--surface-border-radius);
  background-color: var(--group-background-color);
  box-shadow: 0 2px 6px var(--bio-shadow);
  overflow: hidden;
}

.bio-properties-panel-configuration-chooser-context-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--text-base-color);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.bio-properties-panel-configuration-chooser-context-menu-item:hover,
.bio-properties-panel-configuration-chooser-context-menu-item:focus-visible {
  background-color: var(--configuration-chooser-option-hover-background-color);
}