//
// Comments
// ----------------------------
@import "../global";

:root {
  --comments-background-color: #{$violet-lightest};
  --comments-border-color: #{$violet-light};
  --comments-form-background-color: #{$light};
}

  // Comments
  .field--comment {
    @include bust-out-bg(var(--comments-background-color));

    margin-top: 3rem;
    background-color: var(--comments-background-color);
    padding: 5rem 0;

    > h2 {
      margin-block: 0 4rem;
      text-align: center;

      @include underline;
    }

    .comment {
      border-bottom: 1px solid var(--comments-border-color);
      padding-bottom: 2rem;
      margin-bottom: 2rem;

      + h2 {
        margin-top: 5rem;
      }
    }

    // Comment body
    .field--name-comment-body {
      font-weight: $font-weight-bold;
    }

    // Comment byline
    footer {
      margin-bottom: 1.5rem;

      p {
        margin-bottom: 0;
      }

      @include media-breakpoint-up(md) {
        display: flex;
      }
    }

    .comment__permalink {
      margin-left: auto;
      font-size: 0.875rem;
      color: $gray-600;
    }

    // Comment links
    .links {
      margin-top: 2rem;
    }

    // Comment form
    .comment-form {
      background-color: var(--comments-form-background-color);
      padding: 2rem;
    }

    .editor.form-select {
      width: auto;
    }
  }
