@import '../../globals/vars';

.#{$iot-prefix}--rule-builder-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex: 1;

  > div {
    flex: 1;
  }
}

.#{$iot-prefix}--rule-builder-header__dropdown {
  display: inline-block;
}

.#{$iot-prefix}--rule-builder-header__buttons {
  justify-content: flex-end;
  display: flex;
}

.#{$iot-prefix}--rule-builder-rule,
%#{$iot-prefix}--rule-builder-rule {
  display: grid;
  align-items: center;
  column-gap: $spacing-04;
  padding: $spacing-04 0 0 $spacing-06;
  grid-template-columns: 1fr 1fr 1fr minmax(145px, 0.5fr);
  margin-left: $spacing-04;
  position: relative;
  &:before {
    content: ' ';
    width: 2px;
    height: 100%;
    background-color: $blue-70;
    position: absolute;
    top: 0;
    left: 0;
  }

  &:last-child {
    &:before {
      height: 60%;
    }
  }

  &:after {
    content: ' ';
    width: $spacing-06;
    height: 2px;
    background-color: $blue-70;
    position: absolute;
    top: 60%;
    left: 0;
    transform: translateY(-50%);
  }

  html[dir='rtl'] & {
    margin-right: $spacing-04;
    padding: $spacing-04 $spacing-06 0 0;

    &:before,
    &:after {
      right: 0;
    }
  }
}

.#{$iot-prefix}--rule-builder-rule--group {
  @extend %#{$iot-prefix}--rule-builder-rule;
  grid-template-columns: repeat(1, 1fr);

  &:last-child {
    &:before {
      height: $spacing-07;
    }
  }

  &:after {
    top: $spacing-07;
    transform: translateY(0);
  }
}

.#{$iot-prefix}--rule-builder-rule__actions {
  justify-self: end;
}