.reply-form-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.5rem;
  width: 100%;

  form {
    flex: 1;
  }
}

.interaction-forms-wrapper, .edit-comment-form-wrapper, .reply-form-wrapper {
  align-items: flex-start;
  background: var(--theme-color-grad);
  border-radius: var(--border-radius);
  padding: 0.5rem;
  gap: 0.5rem;

  form {
    background-color: var(--pure-white);
    border-radius: 0 var(--border-radius) var(--border-radius);
    width: 100%;

    &.comment-form {
      padding: 0.5rem;
    }

    .comment-field {
      margin-bottom: 0 !important;

      textarea.form-input-no-label {
        border: unset;
        box-shadow: unset;
        padding-left: 0;
        padding-right: 0;

        &:focus, &:focus-visible {
          border: none !important;
          box-shadow: unset;
        }
      }
    }
  }
}

.comment-replies {
  margin-left: 4rem; /* Indents reply comments under main comment */
  margin-top: 0.25rem;

  .comment-replies-wrapper > turbo-frame {
    width: 100%;
  }

  .reply-form-wrapper {
    margin-bottom: 0.25rem;
  }
}

@media screen and (max-width: 768px ){ /* var(--screen-md) */

  .comment-replies {
    margin-left: 2rem; // Indents reply comments under main comment
  }
}