.list-item {
  width: 100%;
  min-height: 86px;
  margin: 0;
  background: #fff;
  padding: 24px 16px;

  @include Paragraph;

  border-top: 1px solid $mercury;
  border-bottom: 1px solid $mercury;
  color: $Black-100;
  display: grid;
  grid-template-columns: 0fr repeat(11, 1fr);
  grid-template-areas:
    'icon head     head     head     head     head     head     head     right right right right'
    'icon sub      sub      sub      sub      sub      sub      sub      right right right right'
    '.    actions  actions  actions  actions  actions  actions  actions  right right right right';
  align-items: start;
  cursor: pointer;

  &:hover,
  &:focus-within {
    background-color: $Grey-000;
  }

  &__icon {
    grid-area: icon;
    align-self: center;

    > * {
      margin: 0 16px 0 0;
    }
  }

  &__actions {
    grid-area: actions;
  }

  &__heading {
    @include H5;

    grid-area: head;
    position: relative;
    display: flex;
    align-items: center;

    & button {
      background: unset;
      font-size: unset;
      padding-inline-start: 0;
    }

    &-wrap {
      display: inline-block;
      margin-left: 8px;
    }
  }

  &__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__subheading {
    @include H7;

    grid-area: sub;
    color: $Grey-500;
    margin-top: 4px;
    // all direct descendants should be truncated with ellipses
    // allows flexibility in consuming components to use h3/other tag
    > * {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &:empty {
      display: none;
    }
  }

  &__mid-content {
    @include H7;

    grid-area: mid;
    color: $Grey-500;
  }

  &__right-content {
    grid-area: right;
    text-align: right;
    align-items: flex-end;
    overflow: hidden;
    white-space: nowrap;
  }

  @media (max-width: 575px) {
    &__mid-content {
      display: none;
    }
  }

  @media (min-width: 576px) {
    grid-template-areas:
      'icon head     head     head     head     mid mid mid mid right right right'
      'icon sub      sub      sub      sub      mid mid mid mid right right right'
      '.    actions  actions  actions  actions  mid mid mid mid right right right';
  }
}
