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

.s-discussion {
  display: flex;
  position: relative;
  flex-direction: column;

  &__tags {
    display: flex;
    flex-direction: row;
  }

  &__tag {
    display: block;
    margin-left: $co-component__spacing;
  }

  &__load-more {
    padding-top: $co-margin;
    text-align: center;
  }

  &__reply-excerpt,
  &__reply {
    @include breakpoint(small) {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      box-shadow: $co-shadow--higher;
    }
  }

  &__reply {
    @include breakpoint(small) {
      display: none;
    }
    @include breakpoint(medium) {
      display: block;
      position: static;
      box-shadow: none;
    }

    &--open {
      display: block;
    }
  }

  &__reply-excerpt {
    @include breakpoint(medium) {
      display: none;
    }

    &--close {
      display: none;
    }
  }

  &__goto-unread-button {
    max-width: 47rem;
    margin-right: auto;
    margin-bottom: $co-margin;
    margin-left: auto;
  }
}
