:root {
  --builder-font-sans:
    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --builder-font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

.builder-root {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem;
  font-family: var(--builder-font-sans);
}

.builder-header {
  display: flex;
  justify-content: space-between;
  column-gap: 1rem;
  flex-wrap: wrap;
}

.builder-title {
  margin: 0 0 0.5rem;
}

.builder-actions {
  display: inline-flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.builder {
  margin-top: 0.5rem;

  .builder {
    margin-left: 0.35rem;
    padding-left: 1rem;
    border-left: 2px solid rgba(181, 181, 181, 0.5);
  }
}

.builder-empty {
  margin: 0.5rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
  color: gray;
  transition: outline ease-in-out 0.1s;

  &[data-over] {
    outline: 2px dashed gray;
  }
}

.builder-dragged {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  background-color: rgba(181, 181, 181, 0.5);
  font-family: var(--builder-font-mono);
  cursor: grabbing;
}

.builder-input {
  font-size: inherit;
  padding: 0.25rem;
  min-width: 10px;

  &:not(button) {
    font-family: var(--builder-font-mono);
  }
}

.builder-package-name {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.builder-package[value=""]:not(:focus) {
  &,
  & ~ .builder-operator {
    display: none;
  }
}

.builder-package:is(:not([value=""]), :focus) + .builder-edit-package {
  display: none;
}

.builder-package-prefix,
.builder-operator {
  opacity: 0.5;
}

.builder-children {
  padding-left: 0;
  margin: 0.5rem 0;
}

.builder-child {
  list-style-type: none;
  padding: 0.25rem 0 0.25rem 0.5rem;
  border-radius: 0.5rem;
  transition: background-color ease-in-out 0.2s;
  touch-action: none;

  &:is(:hover, :focus-within) {
    background-color: rgba(147, 147, 147, 0.25);
  }

  &:is(:hover, :focus-within):has(.builder-child:is(:hover, :focus-within)) {
    background-color: initial;
  }
}

.builder-child-content {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.builder-icon-button,
.builder-child-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font-size: inherit;
  background-color: transparent;
}

.builder-icon-button {
  cursor: default;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  transition: opacity ease-in-out 0.1s;

  &.builder-action {
    width: 2rem;
    height: 2rem;
  }

  &:hover,
  &:focus {
    background-color: rgba(159, 159, 159, 0.5);
  }

  &:active {
    background-color: rgba(159, 159, 159, 0.75);
  }
}

#builder-config-popover:popover-open {
  position: absolute;
  inset: unset;
  left: max(
    calc(var(--anchor-left) - var(--width) / 2 + var(--anchor-width) / 2),
    0.5rem
  );
  top: calc(var(--anchor-bottom) + 0.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgba(135, 135, 135, 0.5);
  box-shadow: 0 0 1rem rgba(58, 58, 58, 0.25);
}

.builder-config-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.builder-child-marker {
  width: 1rem;
  height: auto;
}

.builder-child-droppable {
  margin-left: 1rem;
  list-style-type: none;
  border: 0 dashed transparent;
  transition: all ease-in-out 0.1s;

  &[data-over] {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom-width: 2px;
    border-color: gray;
  }
}