/**
 * @file
 * Nodes, comments and content previews.
 */

.node--unpublished {
  background-color: light-dark(#fff4f4, #362428);
}

.node--view-mode-teaser {
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border);
}

.node__submitted,
p.comment__submitted,
.submitted {
  margin: 0;
  font-size: 0.9em;
}

.node__content .field--name-body {
  margin-block: 1rem;
}

/* CKEditor embedded media alignment. */

.field--name-body > .align-left {
  margin: 0 1.25rem 1rem 0;
}

.field--name-body > .align-right {
  margin: 0 0 1rem 1.25rem;
}

.field--name-body > .align-center {
  display: table;
  clear: both;
  margin: 0 auto 1rem;
}

.node__content ul {
  padding-inline: 2rem 0;
}

.node__links {
  clear: both;
  margin-block: 0.5rem;
}

.node__links > ul.links.inline {
  padding-inline: 0;
}

.node__links li:first-child {
  padding-inline-start: 0;
}

.field--type-entity-reference.is-term .field__item,
.node__links li {
  display: inline;
  padding-inline: 0.5rem;
  border-inline-end: 1px solid var(--border);
}

.field--type-entity-reference .field__item:last-of-type,
.node__links li:last-of-type {
  border: 0;
}

/* Comments. */

.comment {
  margin-bottom: 1rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
}

.comment-title {
  padding: 0.1rem 1rem;
}

/* Preview bar. */

.node-preview-container {
  position: fixed;
  z-index: 499;
  width: 100%;
  padding: 1.875rem 0 0.625rem;
  text-align: center;
  background: var(--surface);
}

.node-preview-container .form-item-view-mode {
  display: inline-block;
  margin: 0.3125rem;
}

.node-preview-backlink {
  display: inline-block;
  box-sizing: border-box;
  margin: 0.3125rem 0.625rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  background: light-dark(#d3eda3, #26482e);
}

.node-preview-backlink:is(:hover, :focus-visible) {
  background: var(--surface);
}

.rnd :is(.comment, .node-preview-backlink) {
  border-radius: var(--control-radius);
}

/* Small screens. */

@media screen and (width < 48em) {
  /* center all media */
  .node.node--view-mode-teaser .node__content > .field--name-field-media,
  .field--name-body > .align-left,
  .field--name-body > .align-right {
    float: none;
    display: table;
    margin: 0 auto 1rem;
  }
}