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

:root {
  --comments-background-color: var(--beo-light);
  --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;
  }
}
