//compile

//compile

.md-list {
  margin: 0;
  padding: 8px 0;
  list-style-type: none;
  width: 100%;
  height: auto;

  .md-list-item {
    min-height: 48px;
    width: 100%;
    padding: 8px var(--md-side-margin);
    margin: 0;

    display: grid;
    grid-auto-rows: max-content;
    grid-auto-columns: max-content auto;
    grid-auto-flow: dense;
    grid-gap: 2px var(--md-side-margin);

    align-items: center;
    align-content: center;

    text-decoration: none !important;
    cursor: pointer;

    &:hover { background-color: var(--md-grey-100); }

    .material-icons {
      width: 24px;
      height: 24px;
    }

    .md-avatar {
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 50%;
      overflow: hidden;
    }

    .md-primary-text {
      font-weight: 400;
      font-size: 16px;
      color: var(--md-primary-text);
      line-height: 20px;
    }

    .md-secondary-text {
      font-weight: 400;
      font-size: 14px;
      color: var(--md-secondary-text);
      line-height: 20px;
    }

    // layout
    .md-primary-text,
    .md-secondary-text {
      grid-column: 1 / 3;

      & ~ .md-avatar,
      & ~ .material-icons { grid-column-start: 3; }
    }

    .md-avatar:first-child,
    .material-icons:first-child {
      grid-column-start: 1;

      & ~ .md-primary-text,
      & ~ .md-secondary-text { grid-column-start: 2; }
    }

    .material-icons:first-child { margin-right: 16px; }

    &.two-line {
      padding: 16px;

      .md-avatar,
      .material-icons { grid-row-end: span 2; }
    }

    &.multi-line {
      height: auto;
      padding: 16px;
    }

    &.offset {
      padding-left: 72px;
    }
  }

  .md-subheading {
    width: 100%;
    height: 48px;
    line-height: 48px;
    padding: 0 16px;
    margin-top: 7px;
    border-top: 1px solid var(--md-divider);
    color: var(--md-secondary-text);

    &.offset {
      padding-left: 72px;
    }
  }

  .md-divider {
    width: 100%;
    margin: 7px 0 8px;
    border-top: 1px solid var(--md-divider);

    &.offset {
      margin-left: 72px;
      width: calc(100% - 72px);
    }
  }
}