.rulesContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--grapes-unit-8) var(--grapes-unit-16);
  margin-top: var(--grapes-unit-8);
  padding: var(--grapes-unit-8);
  background-color: var(--grapes-color-background-secondary-default);
  border-radius: var(--grapes-border-radius-8);
}

.rulesContainerValid {
  background-color: var(--grapes-color-background-secondary-success-default);
}

.rulesContainerInvalid {
  background-color: var(--grapes-color-background-secondary-alert-default);
}

.rule {
  display: flex;
  gap: var(--grapes-unit-8);
  align-items: center;
  font: var(--grapes-body-m);
  color: var(--grapes-color-content-secondary-bg-secondary);

  .ruleIcon {
    color: var(--grapes-color-content-decorative-icon);
  }
}

.ruleIsValid,
.ruleIsValid .ruleIcon {
  color: var(--grapes-color-content-success-default);
}

.ruleIsInvalid,
.ruleIsInvalid .ruleIcon {
  color: var(--grapes-color-content-alert-default);
}