.panel-header {
  display: flex;
  align-items: center;
  justify-items: center;
  flex-wrap: wrap;
  color: rgb(var(--text-muted));
  margin-top: scale.$base; // Align with non-detail pages e.g. page-header
  
  h1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    @include Typography.Interface(M);
    margin-bottom: 0; // Override h1 margin

    .badge {
      margin-left: scale.$sm-3;
    }
  }

  .hds-icon-tile {
    margin-right: scale.$base;
  }

  &.icon-header {
    margin-bottom: scale.$lg-4;

    h1 {
      @include Typography.Heading(1);
      color: rgb(var(--text));

      b {
        @include Typography.Heading(2);
        font-weight: 500;
        margin-left: scale.$sm-2;
        padding: scale.$sm-3 scale.$sm-1;
      }
    }
  }

  .actions {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
    margin: scale.$sm-4 0;
    margin-left: auto;

    .button-group {
      display: flex;
      max-width: 100%;

      .button:first-child {
        flex-shrink: 1;
        overflow: hidden;
      }
    }

    .button {
      margin: scale.$sm-3 0;

      span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
      }

      & + .button {
        margin-left: scale.$base;
      }
    }
  }
}