Aislo/M01_MasterData/LogicBuilder/M01_LB_Steps.css

.m01-lbsteps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  font-size: var(--text-body);
  color: var(--color-text-body);
}

.m01-lbsteps-banner {
  margin: 0;
  padding: var(--spacing-8) var(--spacing-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-cards);
  background: var(--color-surface-raised);
  font-weight: var(--font-weight-medium);
}

.m01-lbsteps-banner.is-warn {
  border-left: 4px solid var(--color-warning);
}

.m01-lbsteps-banner p {
  margin: 0;
}

.m01-lbsteps-why {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
}

.m01-lbsteps-sec {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-cards);
  background: var(--color-surface);
  padding: var(--spacing-8) var(--spacing-16) var(--spacing-16);
}

.m01-lbsteps-title {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-bold);
}

.m01-lbsteps-list,
.m01-lbsteps-branches {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.m01-lbsteps-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-border);
}

.m01-lbsteps-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.m01-lbsteps-sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4) var(--spacing-8);
  min-width: 0;
}

.m01-lbsteps-ref,
.m01-lbsteps-cond,
.m01-lbsteps-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4);
}

.m01-lbsteps-shapes,
.m01-lbsteps-shape {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-left: var(--spacing-16);
  border-left: 2px solid var(--color-border);
}

.m01-lbsteps-branch {
  padding-left: var(--spacing-8);
}

.m01-lbsteps-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pills);
  font-weight: var(--font-weight-bold);
}

.m01-lbsteps-name,
.m01-lbsteps-tag {
  font-weight: var(--font-weight-bold);
}

.m01-lbsteps-chip {
  display: inline-block;
  padding: 2px var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pills);
  background: var(--color-surface-raised);
}

.m01-lbsteps-note {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.m01-lbsteps-value,
.m01-lbsteps-sum {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.m01-lbsteps-amount,
.m01-lbsteps-total {
  margin-left: auto;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.m01-lbsteps-amount.is-wait {
  opacity: 0.5;
  font-weight: var(--font-weight-regular);
}

.m01-lbsteps-pick {
  min-height: 44px;
  padding: 0 var(--spacing-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inputs);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.m01-lbsteps-pick:focus-visible {
  outline: 2px solid var(--color-focus-ring);
}

.m01-lbsteps .ui-input,
.m01-lbsteps .ui-select,
.m01-lbsteps .ui-btn {
  min-height: 44px;
  font-size: var(--text-body);
}

.m01-lbsteps-num {
  flex: none;
  width: 6em;
}

.m01-lbsteps-text {
  flex: none;
  width: 9em;
}

.m01-lbsteps-select {
  flex: none;
  width: auto;
  max-width: 100%;
}

.m01-lbsteps .ui-input.is-bad {
  border-color: var(--color-danger);
  border-style: dashed;
}

.m01-lbsteps-add {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
}

@media (max-width: 640px) {
  .m01-lbsteps-amount,
  .m01-lbsteps-total {
    margin-left: 0;
  }
}