/**
 * Use this mixin to change the inherited font declaration 
 * of an element or container.
 */
/**
 * Overwrite elements whose properties are declared by a 3rd
 * party by setting all the font properties again.
 *
 * Examples: sales badges inherit font rules from WooCommerce plugin
 */
/**
 * Use this mixin on containers or elements, when you need 
 * to overwrite the universal selector (*) specificity
 *
 * Examples: input fields, image captions
 */
.novablocks-conversations {
  --avatar-column-size: 45px;
  --comments-grid-gap: 10px;
  --component-accent-color: var(--sm-current-accent-color);
  --nb-conversations-width: 48em;
  --field-description-color: var(--sm-current-fg2-color);
  --conversations-bg-color: var(--sm-current-bg-color);
  --conversations-reply-bg-color: var(--sm-current-bg-color);
  --comment-author-color: var(--sm-current-accent-color);
  --comment-links-color: var(--sm-current-accent-color);
  --comment-highlighted-color: #FFF2CE;
  --label-bg-color: var(--sm-current-fg2-color);
  --label-highlighted-bg-color: var(--sm-current-accent-color);
  --label-border-radius: 999em;
  --nb-spacing: var(--theme-spacing-fluid-large);
  --element-spacing: var(--theme-spacing-normal) !important;
}
@media only screen and (min-width: 768px) {
  .novablocks-conversations {
    --avatar-column-size: 2.8rem;
    --comments-grid-gap: 1.3rem;
  }
}
.novablocks-conversations {
  width: 100%;
}
.novablocks-conversations[class][class] input,
.novablocks-conversations[class][class] button {
  padding: var(--theme-input-padding);
}
.novablocks-conversations .comment-list[class] {
  --nb-element-spacing-multiplier: 1;
}
.novablocks-conversations .commenter-background[class] {
  margin-top: calc(var(--theme-spacing-smallest) / 2);
}
.novablocks-conversations .comment-footer-highlights[class],
.novablocks-conversations .commenter-background-label {
  --font-size: var(--theme-input-font-size);
  --current-font-family: var(--theme-input-font-family);
  --current-font-weight: var(--theme-input-font-weight);
  --current-font-style: var(--theme-input-font-style);
  --current-line-height: var(--theme-input-line-height);
  --current-letter-spacing: var(--theme-input-letter-spacing);
  --current-text-transform: var(--theme-input-text-transform);
  --font-size: 12;
  --current-font-weight: regular;
}
.novablocks-conversations .comment-footer-highlights[class] {
  --font-size: 13;
  --current-font-weight: bold;
}
.novablocks-conversations .comment-dropdown-toggle {
  --font-size-modifier: 0.90;
  --current-font-weight: regular;
}
.novablocks-conversations .comment-content {
  --font-size-modifier: 0.9;
}
.novablocks-conversations .comment-footer-meta[class] {
  --font-size: var(--theme-input-font-size);
  --current-font-family: var(--theme-input-font-family);
  --current-font-weight: var(--theme-input-font-weight);
  --current-font-style: var(--theme-input-font-style);
  --current-line-height: var(--theme-input-line-height);
  --current-letter-spacing: var(--theme-input-letter-spacing);
  --current-text-transform: var(--theme-input-text-transform);
  --font-size: 13;
}
.novablocks-conversations .comment-form label {
  --font-size-modifier: 1;
}
.novablocks-conversations .comment-form label + .field-description:not(:empty) {
  margin-top: calc(-1 * var(--theme-input-vertical-spacing));
}
.novablocks-conversations .comment-form .field-description[class] {
  --font-size-modifier: 0.88;
}
.novablocks-conversations .comment-highlightedby-humans {
  padding-left: 0;
}
.novablocks-conversations .comment-form p:not(:last-child) {
  margin-bottom: 0;
}
.novablocks-conversations .comment-dropdown-menu[class] {
  min-width: 220px;
  --font-size: var(--theme-input-font-size);
  --current-font-family: var(--theme-input-font-family);
  --current-font-weight: var(--theme-input-font-weight);
  --current-font-style: var(--theme-input-font-style);
  --current-line-height: var(--theme-input-line-height);
  --current-letter-spacing: var(--theme-input-letter-spacing);
  --current-text-transform: var(--theme-input-text-transform);
}
.novablocks-conversations .form-submit {
  width: 100%;
}
.novablocks-conversations [id=submit] {
  --current-font-weight: regular !important;
}
.novablocks-conversations .comment-footer-highlights {
  --current-font-weight: bold;
}
.novablocks-conversations .comment .comment-highlighted,
.novablocks-conversations .comment .comment-highlighted .comment-dropdown-toggle {
  color: var(--sm-current-fg1-color);
}
@media not screen and (min-width: 1024px) {
  .novablocks-conversations .comment {
    margin-left: calc(-1 * var(--theme-wrapper-sides-spacing));
    margin-right: calc(-1 * var(--theme-wrapper-sides-spacing));
  }
  .novablocks-conversations .comment > .comment-wrapper {
    padding-left: var(--theme-wrapper-sides-spacing);
    padding-right: var(--theme-wrapper-sides-spacing);
  }
  .novablocks-conversations .comment.parent > .comment {
    margin-left: 0;
    margin-right: 0;
  }
  .novablocks-conversations .comment.parent > .comment-wrapper {
    color: var(--sm-current-fg2-color);
  }
  .novablocks-conversations .comment .comment-respond {
    padding-left: var(--theme-wrapper-sides-spacing);
    padding-right: var(--theme-wrapper-sides-spacing);
  }
}
.novablocks-conversations .comment-author-name {
  --font-size: var(--theme-input-font-size);
  --current-font-family: var(--theme-input-font-family);
  --current-font-weight: var(--theme-input-font-weight);
  --current-font-style: var(--theme-input-font-style);
  --current-line-height: var(--theme-input-line-height);
  --current-letter-spacing: var(--theme-input-letter-spacing);
  --current-text-transform: var(--theme-input-text-transform);
  --font-size: 19.5;
  --font-size-modifier: 0.89;
}
.novablocks-conversations .comment-dropdown-menu {
  background-color: var(--sm-current-bg-color);
  color: var(--sm-current-fg2-color);
}
.novablocks-conversations .comment-dropdown-menu:after {
  border-color: transparent transparent var(--sm-current-bg-color);
}
@media only screen and (min-width: 768px) {
  .novablocks-conversations .comment-dropdown-menu {
    top: calc(var(--current-line-height) * var(--current-font-size));
  }
}
.novablocks-conversations .commenter-background-label[class] {
  position: relative;
  background: none;
  overflow: hidden;
  z-index: 1;
  color: var(--sm-current-bg-color);
}
.novablocks-conversations .commenter-background-label[class]:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--label-bg-color);
  z-index: -1;
  opacity: 0.5;
}
.novablocks-conversations .comment-highlighted .commenter-background-label:before,
.novablocks-conversations .bypostauthor .commenter-background-label:before {
  opacity: 1;
}
.novablocks-conversations .bypostauthor .commenter-background-label:before {
  background-color: var(--label-bg-color);
  color: var(--theme-light-primary);
  opacity: 1;
}
.novablocks-conversations .comment-dropdown-toggle {
  color: currentColor;
  margin-top: 0;
  margin-bottom: 0;
}
.novablocks-conversations .comments-pagination .page-numbers > li {
  margin-top: 0;
}
.novablocks-conversations .comments-pagination .page-numbers .page-numbers:not(.current) {
  border-color: var(--sm-current-fg2-color);
}
.novablocks-conversations .comments-pagination .page-numbers .page-numbers:not(.current):hover {
  border-color: var(--component-accent-color);
  color: var(--theme-light-primary);
}
.novablocks-conversations .fake-form-placeholder {
  --nb-spacing: var(--theme-spacing-fluid-larger);
}
.novablocks-conversations .comment-form-comment .field-description {
  margin-bottom: var(--theme-input-vertical-spacing);
}
.novablocks-conversations .trix-hidden-input {
  box-shadow: none;
}
.novablocks-conversations .novablocks-conversations__notification-text span {
  padding: 0.5em 1em;
  border-radius: 999em;
}
.novablocks-conversations .fake-input-button {
  grid-row: 1/span 2;
}
.novablocks-conversations #cancel-comment-reply-link {
  color: var(--theme-button-background-color);
}
@media not screen and (min-width: 480px) {
  .novablocks-conversations .comment-form-cookies-consent[class] {
    display: block;
  }
  .novablocks-conversations .comment-form-cookies-consent[class] label {
    margin-left: calc(var(--theme-checkbox-width) + 10px);
  }
  .novablocks-conversations .comment-form-cookies-consent[class] input[type=checkbox] {
    margin-top: 5px;
  }
  .novablocks-conversations input {
    line-height: normal;
  }
  .novablocks-conversations .commenter-background-label[class] {
    padding-top: 0.2em;
  }
}

.novablocks-conversations__header {
  display: flex;
  align-items: baseline;
  border-bottom: 4px solid;
  padding-bottom: 0.3em;
}

.novablocks-conversations__title {
  --current-font-weight: bold;
  padding-right: 0.25em;
}

.novablocks-conversations__comments-count {
  --font-size-modifier:0.65;
  color: var(--field-description-color);
  opacity: 0.5;
}

.novablocks-conversations__notification-text[class] span {
  background-color: var(--sm-current-fg2-color);
  color: var(--sm-current-bg-color);
}

@media not screen and (min-width: 1024px) {
  .novablocks-conversation__starter {
    margin-left: calc(-1 * var(--theme-wrapper-sides-spacing));
    margin-right: calc(-1 * var(--theme-wrapper-sides-spacing));
  }
}

.novablocks-conversation__starter-subtitle {
  --font-size: var(--theme-lead-font-size);
  --current-font-family: var(--theme-lead-font-family);
  --current-font-style: var(--theme-lead-font-style);
  --current-line-height: var(--theme-lead-line-height);
  --current-letter-spacing: var(--theme-lead-letter-spacing);
  --current-text-transform: var(--theme-lead-text-transform);
  --font-size-modifier: 0.95;
  --component-accent-color: var(--sm-current-accent-color);
}

.novablocks-conversation__starter-message[class] {
  margin-top: calc(var(--theme-spacing-smallest) / 2);
  --font-size: var(--theme-lead-font-size);
  --current-font-family: var(--theme-lead-font-family);
  --current-font-style: var(--theme-lead-font-style);
  --current-line-height: var(--theme-lead-line-height);
  --current-letter-spacing: var(--theme-lead-letter-spacing);
  --current-text-transform: var(--theme-lead-text-transform);
  color: var(--sm-current-fg1-color);
}

.comments-area .entry-content {
  padding-left: 0;
  padding-right: 0;
}

.fake-input-button {
  width: 100%;
  height: auto;
  max-width: 100%;
  padding: var(--theme-input-padding);
  margin: 0;
  color: var(--sm-current-fg1-color);
  border-radius: var(--theme-input-border-radius);
  background-color: var(--sm-current-bg-color);
  box-shadow: var(--theme-input-box-shadow);
  border: 0;
  transition: all 0.2s ease-in-out;
  --font-size: var(--theme-input-font-size);
  --current-font-family: var(--theme-input-font-family);
  --current-font-weight: var(--theme-input-font-weight);
  --current-font-style: var(--theme-input-font-style);
  --current-line-height: var(--theme-input-line-height);
  --current-letter-spacing: var(--theme-input-letter-spacing);
  --current-text-transform: var(--theme-input-text-transform);
  -webkit-font-smoothing: initial;
  -webkit-appearance: none;
}
.fake-input-button:hover {
  --theme-input-box-shadow: var(--theme-input-hover-box-shadow);
}
.fake-input-button:focus, .fake-input-button:active {
  --theme-input-border-color: var(--theme-input-focus-border-color);
  --theme-input-box-shadow: var(--theme-input-focus-box-shadow);
  outline: 0;
}
.fake-input-button[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}
[class*=invalid] .fake-input-button {
  --theme-input-box-shadow: var(--theme-input-error-box-shadow);
  --theme-input-color: var(--theme-input-error-color);
  --theme-input-placeholder-color: var(--theme-input-error-color);
  --theme-input-placeholder-opacity: 0;
}
[class*=invalid] .fake-input-button:hover {
  --theme-input-box-shadow: var(--theme-input-error-box-shadow);
}
[class*=invalid] .fake-input-button:focus, [class*=invalid] .fake-input-button:active {
  --theme-input-box-shadow: var(--theme-input-focus-error-box-shadow);
}
.fake-input-button[class] {
  color: rgba(0, 0, 0, 0.5);
}
.is-dark .fake-input-button {
  color: rgba(255, 255, 255, 0.5);
}

.trix-contained-input[class] {
  --trix-input-bg-color: var(--theme-input-background-color);
  --trix-toolbar-border-color: rgba(0, 0, 0, 0.3);
}
.is-dark .trix-contained-input[class] {
  --trix-toolbar-border-color: rgb(255, 255, 255);
}

trix-editor[id][id][id]:before {
  color: var(--theme-input-placeholder-color);
  opacity: var(--theme-input-placeholder-opacity);
  --current-font-weight: regular;
}
trix-editor h1 {
  --font-size: var(--theme-heading-4-font-size);
  --current-font-family: var(--theme-heading-4-font-family);
  --current-font-weight: var(--theme-heading-4-font-weight);
  --current-font-style: var(--theme-heading-4-font-style);
  --current-line-height: var(--theme-heading-4-line-height);
  --current-letter-spacing: var(--theme-heading-4-letter-spacing);
  --current-text-transform: var(--theme-heading-4-text-transform);
  --current-color: var(--theme-heading-4-color);
}

trix-editor,
trix-toolbar {
  width: 100%;
  height: auto;
  max-width: 100%;
  padding: var(--theme-input-padding);
  margin: 0;
  color: var(--sm-current-fg1-color);
  border-radius: var(--theme-input-border-radius);
  background-color: var(--sm-current-bg-color);
  box-shadow: var(--theme-input-box-shadow);
  border: 0;
  transition: all 0.2s ease-in-out;
  --font-size: var(--theme-input-font-size);
  --current-font-family: var(--theme-input-font-family);
  --current-font-weight: var(--theme-input-font-weight);
  --current-font-style: var(--theme-input-font-style);
  --current-line-height: var(--theme-input-line-height);
  --current-letter-spacing: var(--theme-input-letter-spacing);
  --current-text-transform: var(--theme-input-text-transform);
  -webkit-font-smoothing: initial;
  -webkit-appearance: none;
}
trix-editor:hover,
trix-toolbar:hover {
  --theme-input-box-shadow: var(--theme-input-hover-box-shadow);
}
trix-editor:focus, trix-editor:active,
trix-toolbar:focus,
trix-toolbar:active {
  --theme-input-border-color: var(--theme-input-focus-border-color);
  --theme-input-box-shadow: var(--theme-input-focus-box-shadow);
  outline: 0;
}
trix-editor[disabled],
trix-toolbar[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}
[class*=invalid] trix-editor,
[class*=invalid] trix-toolbar {
  --theme-input-box-shadow: var(--theme-input-error-box-shadow);
  --theme-input-color: var(--theme-input-error-color);
  --theme-input-placeholder-color: var(--theme-input-error-color);
  --theme-input-placeholder-opacity: 0;
}
[class*=invalid] trix-editor:hover,
[class*=invalid] trix-toolbar:hover {
  --theme-input-box-shadow: var(--theme-input-error-box-shadow);
}
[class*=invalid] trix-editor:focus, [class*=invalid] trix-editor:active,
[class*=invalid] trix-toolbar:focus,
[class*=invalid] trix-toolbar:active {
  --theme-input-box-shadow: var(--theme-input-focus-error-box-shadow);
}
trix-editor,
trix-toolbar {
  max-width: none;
}
trix-editor[id],
trix-toolbar[id] {
  border: 0;
}

trix-toolbar[id] {
  padding: 0;
  box-shadow: none;
  border: 1px solid var(--trix-toolbar-border-color);
  border-bottom: 0;
}

.is-dark .trix-button--icon:before {
  filter: invert(1);
}

/**
 * Remove the border-radius between Toolbar and Editor to always make
 * them look connected, independent of the Design System border-radius
 */
trix-toolbar#comment_trix_toolbar {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

trix-editor#commentTrixEditor {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}