:host {
  display: block;
}

.rule-editor--disabled {
  opacity: 0.6;
  pointer-events: none;
}

.rule-editor__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(var(--contrast-1500));
  margin-bottom: 0.25rem;
}

.rule-editor__helper-text {
  font-size: 0.75rem;
  color: rgb(var(--contrast-1300));
  margin-top: 0.25rem;
}

.rule-node {
  border: 1px solid rgb(var(--contrast-500));
  border-radius: 0.5rem;
  margin: 0.25rem 0;
  overflow: hidden;
  background-color: rgb(var(--contrast-100));
}

.rule-node--invalid {
  border-color: rgb(var(--color-red-default));
}

.rule-node--all > .rule-node__header,
.rule-node--any > .rule-node__header {
  background-color: rgb(var(--contrast-300));
  padding: 0.375rem 0.75rem;
  border-bottom: 1px solid rgb(var(--contrast-500));
}

.rule-node__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rule-node__header-actions {
  margin-left: auto;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 0.5rem;
  padding: 0.125rem;
  align-items: center;
}

.rule-node__combinator-select {
  min-width: 6rem;
}

.rule-node__body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

limel-popover.rule-node__chips-popover {
  display: contents;
}

.rule-node__chips {
  display: block;
  width: 100%;
}

.rule-node__chips limel-picker {
  display: block;
  width: 100%;
}

.rule-node__children {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rule-node__footer {
  display: flex;
  justify-content: center;
}

.rule-node__issue {
  color: rgb(var(--color-red-default));
  font-size: 0.875rem;
}