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

$s-discussion-item__spacing: 0.5rem;

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

  position: relative;
  align-items: center;
  min-height: $co-component__height;
  padding-top: $co-component__spacing;
  padding-right: $co-component__spacing;
  padding-bottom: $co-component__spacing;
  border-left: 0.5rem solid $co-color__fg__back--lower;
  background-color: $co-color__fg__back--low;

  @include breakpoint(medium) {
    padding-top: $co-component__spacing * 2;
    padding-bottom: $co-component__spacing * 2;
  }

  &--ugly {
    border-left: 0.5rem solid map_get($privacy-palette, 'ugly');
  }

  &--bad {
    border-left: 0.5rem solid map_get($privacy-palette, 'bad');
  }

  &--good {
    border-left: 0.5rem solid map_get($privacy-palette, 'good');
  }

  &--super {
    border-left: 0.5rem solid map_get($privacy-palette, 'super');
  }

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

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

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

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

  &__select {
    display: inline-block;
    flex-grow: 0;
    flex-shrink: 0;
    margin: auto $s-discussion-item__spacing auto 1rem;

    @include breakpoint(small) {
      display: none;
    }
  }
}

.m-participants-icon {
  flex: 0 0 auto;
  margin: auto $s-discussion-item__spacing;
  color: $co-color__contrast__text;
  line-height: 2rem;

  .fa {
    color: $co-color__contrast__text--lower;
  }
}
