.bio-properties-panel {
  --color-grey-225-10-50: hsl(225, 10%, 50%);

  --select-template-background-color: var(--color-blue-205-100-50);
  --select-template-hover-background-color: var(--color-blue-205-100-45);
  --select-template-fill-color: var(--color-white);
  --select-template-label-color: var(--color-white);

  --unknown-template-background-color: var(--color-red-360-100-45);
  --unknown-template-hover-background-color: var(--color-red-360-100-40);

  --incompatible-template-background-color: rgb(255, 131, 43);
  --incompatible-template-hover-background-color: hsl(25, 100%, 50%);
  --incompatible-template-fill-color: var(--color-grey-225-10-15);
  --incompatible-template-label-color: var(--color-grey-225-10-15);

  --select-template-information-text-color: var(--color-grey-225-10-55);

  --deprecated-template-hover-background-color: var(--color-grey-225-10-50);
  --deprecated-template-background-color: var(--color-grey-225-10-55);
}

.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(--select-template-label-color);
  fill: var(--select-template-fill-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 */
.bio-properties-panel-configuration-chooser {
  position: relative;
  margin: 2px 32px 6px 12px;
  padding-bottom: 10px;
}

/* constraint violation, cf. .bio-properties-panel-entry.has-error */
.bio-properties-panel-configuration-chooser.has-error .bio-properties-panel-configuration-chooser-placeholder,
.bio-properties-panel-configuration-chooser.has-error .bio-properties-panel-configuration-chooser-selected,
.bio-properties-panel-configuration-chooser.has-error .bio-properties-panel-configuration-chooser-loading,
.bio-properties-panel-configuration-chooser.has-error .bio-properties-panel-configuration-chooser-missing {
  border-color: var(--input-error-border-color);
  background-color: var(--input-error-background-color);
}

/* placeholder trigger (no selection) */
.bio-properties-panel-configuration-chooser-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px dashed var(--color-grey-225-10-75, #ccced0);
  border-radius: 4px;
  background-color: var(--color-white, #fff);
  color: var(--color-grey-225-10-35, #4d5258);
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

.bio-properties-panel-configuration-chooser-placeholder:hover:not(:disabled) {
  border-color: var(--color-grey-225-10-55, #7d8186);
  background-color: var(--color-grey-225-10-97, #f7f8f8);
}

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

.bio-properties-panel-configuration-chooser-unavailable {
  margin-top: 4px;
  color: var(--color-grey-225-10-55, #7d8186);
  font-size: 12px;
}

.bio-properties-panel-configuration-chooser-unavailable--error {
  color: #a66b00;
}

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

/* selected configuration card */
.bio-properties-panel-configuration-chooser-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--color-grey-225-10-75, #ccced0);
  border-radius: 4px;
  background-color: var(--color-white, #fff);
  cursor: default;
  outline: none;
}

.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-selected:hover {
  border-color: var(--color-blue-205-100-50, #1a75ff);
  background-color: var(--color-blue-205-100-95, #eef4ff);
}

.bio-properties-panel-configuration-chooser-selected--offline,
.bio-properties-panel-configuration-chooser-selected--offline:hover {
  cursor: default;
  border-color: var(--color-grey-225-10-75, #ccced0);
  background-color: var(--color-white, #fff);
}

/* loading state */
.bio-properties-panel-configuration-chooser-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--color-grey-225-10-75, #ccced0);
  border-radius: 4px;
  background-color: var(--color-grey-225-10-97, #f7f8f8);
}

.bio-properties-panel-configuration-chooser-refreshing {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-grey-225-10-85, #e5e6e7);
}

/* missing configuration state */
.bio-properties-panel-configuration-chooser-missing {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid #f0ad4e;
  border-radius: 4px;
  background-color: #fff8ed;
  cursor: default;
  outline: none;
}

.bio-properties-panel-configuration-chooser-missing:hover {
  border-color: #e09730;
  background-color: #fef3e0;
}

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

.bio-properties-panel-configuration-chooser-missing .bio-properties-panel-configuration-chooser-subtitle {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

/* 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(--color-grey-225-10-90, #e6e8ea);
  color: var(--color-grey-225-10-35, #4d5258);
  font-weight: 600;
}

.bio-properties-panel-configuration-chooser-logo--warning {
  background-color: #fce4bc;
  color: #a66b00;
}

/* 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(--color-grey-225-10-55, #7d8186);
  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(--color-grey-225-10-35, #4d5258);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}

.bio-properties-panel-configuration-chooser-menu:hover:not(:disabled) {
  background-color: var(--color-grey-225-10-90, #e6e8ea);
}

.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;
  left: 0;
  right: 0;
  margin-top: 4px;
  border: 1px solid var(--color-grey-225-10-75, #ccced0);
  border-radius: 4px;
  background-color: var(--color-white, #fff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  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(--color-blue-205-100-95, #eef4ff);
}

.bio-properties-panel-configuration-chooser-popover-row--selected {
  background-color: var(--color-blue-205-100-95, #eef4ff);
}

/* 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(--color-grey-225-10-90, #e6e8ea);
  background: none;
  color: var(--color-blue-205-100-50, #1a75ff);
  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(--color-blue-205-100-95, #eef4ff);
}

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

.bio-properties-panel-configuration-chooser-refreshing,
.bio-properties-panel-configuration-chooser-empty {
  color: var(--color-grey-225-10-45, #70757a);
  font-size: 13px;
}

/* context menu (... actions) */
.bio-properties-panel-configuration-chooser-context-menu {
  position: absolute;
  z-index: 11;
  right: 0;
  margin-top: 4px;
  min-width: 150px;
  border: 1px solid var(--color-grey-225-10-75, #ccced0);
  border-radius: 4px;
  background-color: var(--color-white, #fff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.bio-properties-panel-configuration-chooser-context-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--color-grey-225-10-15, #1a1d20);
  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(--color-grey-225-10-97, #f7f8f8);
}