.#{$iot-prefix}--rule-builder-wrap {
  background: $ui-01;
  border: 1px solid $ui-03;
  display: flex;
  flex-direction: column;
  min-height: 100%;

  &--header {
    border-bottom: 1px solid $ui-03;
    display: flex;
    justify-content: space-between;
    padding: $spacing-05;

    .#{$iot-prefix}--card--toolbar-svg-wrapper {
      height: $spacing-07;
      width: $spacing-07;
    }

    &-title {
      @include type-style('productive-heading-03');
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &-metatext {
      @include type-style('body-short-01');
    }

    & div:first-child {
      align-self: center;
    }

    & div:last-child {
      align-items: center;
      display: flex;
    }

    &-actions-save {
      margin-left: $spacing-03;
    }
  }

  &--body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: $spacing-05;

    .#{$prefix}--tab-content {
      flex: 1;
      padding: 0;
    }

    .#{$prefix}--accordion {
      padding-top: 0;
    }

    .#{$prefix}--accordion__item {
      border-top: 0;
      border-bottom: 1px solid $ui-03;

      &--active {
        border-bottom: 0;

        .#{$prefix}--accordion__content {
          border-top: 1px solid $ui-03;
          padding: $spacing-05 0;
        }
      }
    }

    .#{$iot-prefix}--filtertags-container {
      position: relative;
    }

    .#{$iot-prefix}--filtertags-overflow-menu {
      position: relative;
      bottom: 0;
    }

    .#{$prefix}--accordion__heading {
      padding: $spacing-06 0;
    }

    .#{$prefix}--accordion__title {
      @include type-style('productive-heading-02');
      margin-left: 0;
    }
  }

  &--tabs {
    border-bottom: 2px solid #e0e0e0;
    width: 100%;

    .#{$iot-prefix}--rule-builder--tab {
      width: auto;
      &:not(.#{$prefix}--tabs__nav-item--selected),
      &:not(:hover) {
        border-bottom: none;
      }
    }

    & + .#{$prefix}--tab-content {
      padding-top: $spacing-06;
      padding-right: $spacing-12;
    }
  }

  &--footer {
    border-top: 1px solid $ui-03;
    display: flex;
    justify-content: flex-end;
    margin: auto 0 0;
    padding: $spacing-05;

    .#{$iot-prefix}--btn:not(:last-child) {
      margin-right: $spacing-03;
    }
  }

  &--title-input {
    margin-bottom: $spacing-06;
  }

  &--tag-container {
    height: 0;
    padding-left: $spacing-02;
    display: inline-block;
    position: absolute;
    bottom: 38px;
  }

  &--user-list {
    > li > span {
      flex: 1;
    }
  }

  &--user-list__item,
  &--user-list__header {
    display: flex;
    flex-direction: row;
    padding: $spacing-02 $spacing-04;

    justify-content: flex-start;
    align-items: center;
  }

  &--user-list__header {
    background-color: $ui-03;
    font-weight: bold;
  }

  &--user-container {
    display: grid;
    padding: $spacing-06 0;
    align-items: center;
    grid-template-columns: auto auto;
    grid-row-start: 3;
    column-gap: $spacing-12;
  }
}