ManageIQ/manageiq-ui-classic

.miq-structured-list {
  @import '~@carbon/themes/scss/themes';
  $carbon--theme: $carbon--theme--white;

  @include carbon--theme();

  margin-bottom: 0;

  .display_flex {
    display: flex;
  }
  .cursor_pointer {
    cursor: pointer;
  }

  .list_cell {
    padding: 5px 0 5px 0;
  }

  .clickable {
    cursor: pointer;

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

  .list_header {
    .sortable_header {
      display: flex;
    }

    &.bx--structured-list-th {
      padding: 0.8em 0.5rem 0.5rem 0.3rem;
    }
  }

  .bx--structured-list-td {
    padding: 0.3rem;
  }

  .label_header {
    font-weight: 600;
    width: 250px;
    padding-left: 0;
    overflow-wrap: anywhere;
  }

  .cell {
    &.image {
      margin: 0 10px 0 0;

      img {
        max-height: 80px;
      }
    }

    &.button_wrapper {
      margin: 20px 0;

      a {
        width: max-content;
      }

      button {
        padding: 10px 30px;
      }
    }
  }

  .content_value {
    &.array_item:first-child {
      width: 250px;
    }
    .content {
      display: flex;
      flex-direction: row;
      align-items: flex-start;

      &.color_black {
        color: $text-primary;
      }

      &.color_red {
        color: $button-danger-primary;
      }
    }

    .cell_link {
      display: flex;
      color: $link-01;
      cursor: pointer;
      text-decoration: none;
    }

    .multi_row_cell {
      display: flex;
      flex-direction: column;
      width: 100%;

      .sub_row_item {
        width: 100%;
        display: flex;
        margin-bottom: 5px;

        .cell {
          align-items: flex-start;
        }

        .sub_label {
          width: 45%;
          font-weight: 600;
          display: inline-block;
          text-overflow: ellipsis;
          white-space: pre-wrap;
          overflow: hidden;
        }

        .sub_value {
          display: flex;
          width: 50%;
        }
      }
    }

    .cell {
      margin-right: 10px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        min-width: 20px;
        width: 20px;
        height: 15px;
      }

      i {
        min-width: 20px;
        min-height: 20px;
        width: 20px;
        height: 20px;
        font-size: 15px;
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: center;
        padding: 5px;
      }
      .settings-icn {
        width: 70px !important;
        height: 80px !important;
        font-size: 5em !important;
      }
    }
  }

  .wrap_text {
    width: 100%;
    word-break: break-all;
  }

  &.bordered-list {
    border: 1px solid $selected-ui;

    .bx--structured-list-row {
      border-bottom: 1px solid $selected-ui;

      .label_header {
        padding-left: 0.3rem;
      }
    }
  }

  .react-tree-view {
    ul li {
      margin: 10px;
    }
  }

  &.tag_group {
    .bx--structured-list-row {
      display: flex;
      flex-direction: column;

      .label_header {
        width: 100%;
        min-width: 100%;
        padding: 1rem;
      }

      .content_value {
        padding-left: 1rem;

        .multi_row_cell {
          .sub_row_item {
            .icon {
              width: 5%;
            }
            .sub_label {
              width: 38%;
              margin-right: 2%;
            }
            .sub_value {
              padding-left: 5px;
            }
          }
        }
      }
    }
  }
}

.miq-structured-list-accordion {
  border: 1px solid $selected-ui;
  margin-bottom: 15px;

  li {
    button.bx--accordion__heading{
      background: $selected-ui;
    }

    .bx--accordion__content {
      padding: 0 0 0 0 !important;
      margin: 0 !important;

      .miq-structured-list .bx--structured-list-tbody .bx--structured-list-row {

        &:last-child {
          border-bottom: 0;
        }
      }
    }
  }

  li:last-child {
    border-bottom: 0;
  }

  &.operation_ranges,
  &.multilink_table,
  &.tag_group,
  &.simple_table {
    .bx--accordion__content {
      padding-right: 0;
    }
  }

  .miq-structured-list-notification {
    display: flex;
    width: 100%;
    padding: 10px;

    .alert {
      width: 100%;
      margin-top: 20px;
    }
  }
}

.templates-summary-page {
  .col-lg-6 {
    width: 100%;
  }

  .miq-structured-list-accordion {      
    .list_header {
      width: 50%;
    }

    width: 50%;
  }
  
  .survey-table {
    width: 100%;
  }
}