.software-installer-card {
  @include vertical-card-layout;
  justify-content: space-between;
  align-items: center;

  &__actions {
    display: flex;
    align-items: center;

    .component__tooltip-wrapper__element {
      display: flex; // Required for vertical align icons that have and don't have tooltip
    }
  }

  &__installer-status-table,
  &__installer-policies-table {
    width: 100%;
  }

  &__installer-header,
  &__row-1 {
    display: flex;
    width: 100%;
    gap: $pad-medium;
  }

  &__row-1--responsive-wrap {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
  }

  // Lots of data (10 items) on one line responsive fix (#29397)
  @media (max-width: ($table-controls-break)) {
    .installer-details-widget__details {
      flex-wrap: wrap;
    }
    // SoftwareDetailsWidget and Tags wrap onto 2 lines on low widths
    &__row-1--responsive-wrap {
      flex-direction: column;
      gap: $pad-medium;
    }

    // Buttons align top of card when alone (not middle with pills/yaml button)
    &__actions {
      .children-wrapper {
        align-self: start;
      }
    }
    // View YAML (gitops) button wrapped onto third line
    &__installer-header {
      flex-direction: column;
      gap: $pad-medium;
    }
  }

  &__tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: $pad-medium; // Between tags
  }

  &__installer-statuses {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 6px;
    border: 1px solid $ui-fleet-black-10;
    font-size: $x-small;
  }

  &__actions-wrapper {
    display: flex;
    gap: $pad-medium;
  }

  &__download-icon {
    display: flex;
    justify-content: center;
    width: 44px;
  }

  @media (max-width: $break-md) {
    align-items: flex-start;

    &__main-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: $pad-large;
    }
  }
}
