.software-name-cell {
  // TODO: we do not want to use !important but have to for now. We need to pull
  // the .link-cell styles into the LinkCell component in order to
  // decrease the specificity of the styles. This will allow us to remove the
  // !important from here.
  display: flex !important;
  align-items: center;
  gap: $pad-small;

  .software-icon {
    width: 24px;
    height: 24px;
  }

  .software-name {
    @include ellipse-text();
    max-width: 300px;
  }

  @media (max-width: ($break-md - 1)) {
    .software-name {
      max-width: 250px;
    }
  }

  &__install-icon {
    // TODO: we do not want to use !important but have to for now. This is
    // the same issue as the .software-name-cell class display value.
    display: inline-flex !important;
  }

  &__install-tooltip-text {
    font-weight: $regular;
    font-size: $xx-small;
  }
}