.discussion {
  margin-bottom: 2vw;

  .discussion-date {
    color: var(--darker-grey);
    margin-left: 0.5em;
  }

  .discussion-title {
    display: flex;
    h4 {
      margin-right: 0.5em;
    }
  }
  .discussion-comment {
    padding: 0 0 1vw 1vw;
    display: flex;
    flex-direction: row;

    @media (max-width: 749px) {
      flex-direction: column;
    }

    img {
      height: 52px;
      width: 52px;
    }

    div:first-child {
      padding-right: 1vw;
    }
  }

  .discussion-comment + .discussion-comment {
    padding: 1vw 0 1vw 1vw;
  }

  .discussion-comment__content p:last-child {
    margin-bottom: 0;
  }

  .discussion__post {
    padding-top: 2em;
  }

  .discussion-form {
    padding-bottom: 5vh;
  }

  .label--role {
    margin-left: 1em;
  }
}

.discussion-modal, .discussion {
  textarea {
    min-height: 10em;
  }
}

.discussion-modal {
  display: none;
  &:target {
    display: block;
  }
}

// Auto expanding textarea, deeply inspired by https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
.autoexpand {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;

  &::after {
    /* Note the weird space! Needed to preventy jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
  }

  > textarea {
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;

    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
  }

  &::after, > textarea {
    /* Identical styling required!! */
    font: inherit;
    padding: 0.5em 0.875em;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-border-radius);

    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
  }
}
