@import '../../../../styles/common';
@import '../../../../styles/vendor/bootstrap_foundation-sites';

.s-message-result-item {
  @include flex-grid-row($size: expand);

  align-items: center;
  min-height: $co-component__height;
  padding-top: $co-component__spacing;
  padding-bottom: $co-component__spacing;
  background-color: $co-color__fg__back--low;
  color: $co-color__fg__text--high;
  font-size: $co-font__size--small;

  &:hover {
    color: $co-color__fg__text--lower;
  }

  &--draft,
  &--unread {
    background-color: $co-color__fg__back;
  }

  &__col-avatar {
    @include flex-grid-column(shrink);
  }

  &__col-title {
    @include flex-grid-size;

    min-width: 0; // https://github.com/zurb/foundation-sites/pull/8511
  }

  &__col-date {
    @include flex-grid-column(shrink);

    display: none;
    margin-left: auto;
  }

  &__subject {
    color: $co-color__fg__text--lower;
  }

  &__author {
    color: $co-color__primary--lower;
    font-size: $co-font__size;
    font-weight: 600;
  }

  &__topic {
    padding-left: $co-component__spacing;

    &--unread {
      color: $co-color__fg__text--lower;
      font-weight: 600;
    }

    &--draft {
      font-style: italic;
    }
  }

  &__tags {
    padding-left: $co-component__spacing;
  }

  &__highlights {
    @include flex-grid-column(12);

    padding-top: $co-component__spacing;
  }

  @include breakpoint(medium) {
    &__col-date {
      display: block;
    }
  }
}
