.SearchWidgetAdvanced form {
  display: contents;
}

.SearchWidgetAdvanced li > btu-input input[type='text'] {
  width: auto;
}

.SearchWidgetAdvanced li > * {
  margin-left: var(--gap-l);
}

.SearchWidgetAdvanced .icon-action-remove {
  .IconButton;
  .IconButton.is-red;

  --IconButton-name: 'close';

  order: 2;
}

.SearchWidgetAdvanced .icon-action-add {
  margin-left: var(--gap-l);
  order: 1;
  position: initial;
}

.SearchWidgetAdvanced-scrollpane {
  margin-bottom: var(--gap-l);
  width: 100%;
}

// Contextual Widget styles:

.SearchWidgetAdvanced .ComboInput {
  order: 0;
  width: auto;
}

.SearchWidgetAdvanced-scrollpane > ul > li:not(.ComboInput-option) {
  .icon-action-add {
    // Display a vertical line to visually connect items.
    &::before {
      border-top: solid 1px var(--color-gray3);
      content: '';
      height: calc(100% - var(--gap-m));
      left: ~'calc(0px - (var(--gap-l) + 1px))';
      position: absolute;
      top: calc(var(--gap-l) - (var(--gap-l) - var(--lineHeight-s)));
      width: calc(var(--gap-l) / 2);
      z-index: 2;
    }
  }
}

.SearchWidgetAdvanced li {
  & > {
    .ComboInput {
      margin-left: 0;
    }
    // All ComboInputs except the first one get a margin between them.
    .ComboInput ~ .ComboInput {
      margin-left: 20px;
    }
  }

  & > .RCS {
    margin-left: 0;
    order: 3;
    width: 100%;
  }

  & > .RCS .ComboInput {
    min-width: 70%;
  }
}

.SearchWidgetAdvanced ul:not(.ComboInput-list, .RCS-list) {
  border-left: solid 1px var(--color-gray3);
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  margin-left: ~'calc(var(--gap-s) / 2)';
  margin-top: ~'calc((var(--gap-l) / 2) / 2)';
  order: 3;
  padding-left: var(--gap-l);
}

.SearchWidgetAdvanced li:not(.ComboInput-option, .RCS-item) {
  align-items: center;
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;

  &:first-child {
    margin-top: calc(var(--gap-m) / 2);
  }

  &:last-child {
    // Hide the dangling vertical line used to connect items
    // since the bottom item connects with a horizontal line.
    &::before {
      border-top: solid 1px var(--color-gray3);
      box-shadow: inset 1px 0 white;
      content: '';
      height: calc(100% - var(--gap-m));
      left: ~'calc(0px - (var(--gap-l) + 1px))';
      position: absolute;
      top: ~'calc((var(--lineHeight-m) + (2 * var(--gap-s))) / 2)';
      width: calc(var(--gap-l) / 2);
      z-index: 2;
    }
  }
}
