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

.#{$iot-prefix}--hierarchy-list-bulk {
  &-header {
    width: 100%;
    background-color: $focus;

    display: flex;

    &--title {
      padding-left: $spacing-05;
      margin: auto;
      flex-grow: 1;
      color: $ui-background;

      html[dir='rtl'] & {
        padding-left: 0;
        padding-right: $spacing-05;
      }
    }

    &--button-container {
      display: flex;
      flex-direction: row;
    }

    &--divider {
      height: $spacing-04;
      padding-right: $spacing-02;
      margin: auto 0 auto $spacing-02;
      border-left: 1px solid $ui-background;
    }

    &--button-no-icon,
    html[dir='rtl'] &--button-no-icon.#{$iot-prefix}--btn {
      padding: 0 $spacing-05;
    }
  }

  &-modal {
    .breadcrumb--container {
      padding: $spacing-05 0;
    }

    &--breadcrumb > button {
      appearance: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
    }

    &--breadcrumb:last-child > button {
      cursor: default;
    }

    &--list {
      display: flex;

      width: 100%;

      align-items: flex-start;
      margin-top: rem(6px);
      flex-direction: column;

      &-item {
        display: flex;
        position: relative;
        width: 100%;
        background-color: $ui-background;

        &:hover {
          background-color: $hover-ui;
        }

        &::after {
          height: 1px;

          content: '';
          background: $ui-03;
          position: absolute;
          bottom: 0px;
          right: $spacing-08;
          left: 0;
        }

        &-button {
          align-content: flex-start;
          cursor: pointer;
          display: flex;
          flex-grow: 1;
          padding: 0 $spacing-03;

          &:focus {
            z-index: 1;
          }
        }

        &-value {
          margin: auto 0;
        }
      }
    }

    & .#{$iot-prefix}--hierarchy-list-bulk-modal--radio {
      padding: $spacing-05;
      margin-right: 0;
    }

    &--radio .#{$prefix}--radio-button__appearance {
      margin-right: 0;
    }
  }
}