amis/scss/components/_condition-builder.scss

.#{$ns}CBGroup {
  &-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  &-field {
    position: relative;
    display: inline-block;
    min-width: px2rem(120px);
  }

  &-fieldCaret {
    transition: transform 0.3s ease-out;
    margin: 0 $gap-xs;
    display: flex;
    color: $icon-color;
    &:hover {
      color: $icon-onHover-color;
    }

    > svg {
      width: px2rem(12px);
      height: px2rem(12px);
      top: 0;
    }
  }

  &-fieldInput.is-active &-fieldCaret {
    transform: rotate(180deg);
  }
}

.#{$ns}CBItem {
  display: flex;
  margin-top: px2rem(10px);
  padding: 5px 10px;
  border-radius: 5px;
  flex-direction: row;
  align-items: center;
  margin-left: px2rem(30px);
  position: relative;
  background: rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease-out;

  &-dragbar {
    cursor: move;
    width: 20px;
    margin-left: -5px;
    opacity: 0;
    text-align: center;
    transition: opacity 0.3s ease-out;
    @include icon-color();
  }

  &:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  &:hover &-dragbar {
    opacity: 1;
  }

  &:before {
    position: absolute;
    content: '';
    top: -10px;
    left: -30px;
    width: 20px;
    border-left: solid 1px $borderColor;
    bottom: 0;
  }

  &:after {
    position: absolute;
    content: '';
    top: 50%;
    width: 20px;
    left: -30px;
    border-top: solid 1px $borderColor;
  }

  &:last-child {
    &:before {
      border-bottom-left-radius: 5px;
      border-bottom: solid 1px $borderColor;
      bottom: 50%;
    }

    &:after {
      display: none;
    }
  }
}

.#{$ns}CBInputSwitch {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  cursor: pointer;
  > a {
    @include icon-color();
  }

  svg {
    width: px2rem(10px);
    height: px2rem(10px);
  }
}