.boows-value-creator {
  max-width: 350px;
}

.bwns-tools-value-creator-container {
  width: 100%; /* Width of the outside container */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap:var(--boows-whitespace-l2);
}
.bwns-tools-value-creator-container > input.boows-value-creator-id {
  max-width: 35%;
  display: none;
}

.boows-value-creator.boows-expert-mode .bwns-tools-value-creator-container > input.boows-value-creator-id {
  display: inline-block;
}

.bwns-tools-value-creator-container > input.boows-value-creator-value {
  max-width: 45%;
}

.bwns-tools-value-creator-container > button.boows-value-creator-btn {
  max-width: 20%;
  max-width: 20%;
  margin: 0;
  max-height: 42px;
  min-height: 42px;
  line-height: 42px;
  padding: 0;
  width: max-content;
  min-width: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bwns-tools-value-creator-container .boows-input-inner-box:first-child {
  display: none;
}

.boows-expert-mode .bwns-tools-value-creator-container .boows-input-inner-box:first-child {
  display: block;
}

.boows-value-creator-values {
  margin-top:var(--boows-whitespace-l2);
}

.boows-value-creator-item {
  margin: var(--boows-whitespace-l0) 0;
  align-items: center;
  display: flex;
  justify-content: flex-start;
  background: var(--boows-col-primary-20);
  border-radius: var(--boows-border-radius);
  padding: var(--boows-whitespace-l1) var(--boows-whitespace-l2);
  line-height: 24px;
  user-select: none;
  -webkit-user-select: none;
}
.boows-value-creator-item * {
  user-select: none;
  -webkit-user-select: none;
}

.boows-value-creator-item .creator-item-value {
  margin-right: var(--boows-whitespace-l2);
}

.boows-value-creator-item span.creator-item-id {
  font-family: 'Courier New', Courier, monospace !important;
}

.boows-value-creator-item .creator-item-id , .boows-value-creator-item .creator-item-id-bracket {
  display: none;
}

.boows-value-creator.boows-expert-mode .boows-value-creator-item .creator-item-id, .boows-value-creator.boows-expert-mode  .boows-value-creator-item .creator-item-id-bracket  {
  display: inline-block;
  color: var(--boows-col-text-60);
}

.boows-value-creator-item .value-creator-edit, .boows-value-creator-item .value-creator-delete {
  font-size: 24px;
  cursor: pointer;
}

.boows-value-creator-item .value-creator-drag-handle {
  font-size: 20px;
  color: var(--boows-col-text-60);
  cursor: grab;
  margin-right: var(--boows-whitespace-l1);
}
.boows-value-creator-values.is-sorting .boows-value-creator-item .value-creator-drag-handle {
  cursor: grabbing;
}
.boows-value-creator-item.is-dragging {
  opacity: 0.85;
  box-shadow: 0 8px 20px rgba(0,0,0,0.16);
}
.boows-value-creator-placeholder {
  border: 2px dashed rgba(var(--boows-col-primary-rgb), 0.45);
  background: rgba(var(--boows-col-primary-rgb), 0.08);
  border-radius: var(--boows-whitespace-l1);
  min-height: 42px;
  margin: var(--boows-whitespace-l0) 0;
}

.boows-value-creator-item .value-creator-edit:hover, .boows-value-creator-item .value-creator-delete:hover {
  opacity: 0.7;
}

.boows-value-creator-item .value-creator-edit {
  margin-left: auto;
}

.boows-value-creator-item .value-creator-delete {
  color: rgba(var(--boows-col-error-rgb),1);
}