.x-card-contact {
  @extend .d-flex;
}

.x-card-contact-details {
  @extend %align-self-center,
          %flex-auto,
          %overflow-hidden,
          %ml-3;

  h6 {
    @extend %cursor-pointer,
            %text-primary-lighter,
            .d-flex,
            .flex-column,
            %my-1;
    &:last-child {
      min-height: 2rem;
    }
  }
}
.x-card-contact-item {
  @extend %font-size-xs,
          %font-weight-bold,
          %d-flex,
          %mb-0,
          %align-items-center;

  .x-card-contact-item-icon {
    @extend %text-grey,
            %mr-2;

    .x-icon {
      @extend %x-icon-sm;
    }

    &:not(.d-flex) > * {
      top: 1px; // Make icon align to the first line
    }

  }
}

.x-card-contact-list {
  max-height: 20rem;
  overflow-y: auto;
  > * {
    @extend %d-block;
    .x-card-contact-details {
      @extend %pb-3;
    }
    &:not(:last-child) .x-card-contact-details {
      @extend %mb-3,
              .border-bottom;
    }
  }

  .lt-aside & {
    max-height: none;
  }
}