.nixfubu-smart-paragraph-block {
  width: 100%;
  text-align: var(--nixfubu-smart-paragraph-align, left);
}

.nixfubu-smart-paragraph__text {
  margin: 0 0 var(--nixfubu-smart-paragraph-margin-bottom, 16px);
  color: var(--nixfubu-smart-paragraph-color, #334155);
  font-family: var(--nixfubu-smart-paragraph-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: var(--nixfubu-smart-paragraph-size, 16px);
  font-style: var(--nixfubu-smart-paragraph-style, normal);
  font-weight: var(--nixfubu-smart-paragraph-weight, 400);
  line-height: var(--nixfubu-smart-paragraph-line-height, 1.7);
  letter-spacing: var(--nixfubu-smart-paragraph-letter-spacing, 0);
  text-align: var(--nixfubu-smart-paragraph-align, left);
  text-decoration: var(--nixfubu-smart-paragraph-decoration, none);
  text-shadow: var(--nixfubu-smart-paragraph-shadow, none);
  text-transform: var(--nixfubu-smart-paragraph-transform, none);
  mix-blend-mode: var(--nixfubu-smart-paragraph-blend, normal);
  -webkit-text-stroke-color: var(--nixfubu-smart-paragraph-stroke-color, transparent);
  -webkit-text-stroke-width: var(--nixfubu-smart-paragraph-stroke-width, 0);
  transition: color .18s ease, text-shadow .18s ease, -webkit-text-stroke-color .18s ease;
}

.nixfubu-smart-paragraph__text:hover {
  color: var(--nixfubu-smart-paragraph-hover-color, var(--nixfubu-smart-paragraph-color, #334155));
  text-shadow: var(--nixfubu-smart-paragraph-hover-shadow, var(--nixfubu-smart-paragraph-shadow, none));
}

.nixfubu-smart-paragraph__mark {
  color: var(--nixfubu-smart-paragraph-mark-color, #2563eb);
}

.nixfubu-smart-paragraph__text:hover .nixfubu-smart-paragraph__mark {
  color: var(--nixfubu-smart-paragraph-mark-color, #2563eb);
}

.editor-styles-wrapper .nixfubu-smart-paragraph-block {
  width: 100%;
}

.editor-styles-wrapper .nixfubu-smart-paragraph__text {
  cursor: text;
}

.nixfubu-smart-paragraph-control .components-base-control__label,
.nixfubu-smart-paragraph-segment .components-base-control__label {
  margin-bottom: 7px;
}

.nixfubu-smart-paragraph-color {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #d6dce5;
  border-radius: 4px;
  background: #fff;
}

.nixfubu-smart-paragraph-color input[type="color"] {
  width: 38px;
  height: 34px;
  padding: 4px;
  border: 0;
  border-right: 1px solid #e2e8f0;
  background: #fff;
}

.nixfubu-smart-paragraph-color input[type="text"] {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 12px;
}

.nixfubu-smart-paragraph-segment__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #d6dce5;
  border-radius: 4px;
  background: #fff;
}

.nixfubu-smart-paragraph-segment__button.components-button {
  min-height: 32px;
  justify-content: center;
  border-radius: 0;
  box-shadow: none;
  color: #475569;
  font-size: 12px;
}

.nixfubu-smart-paragraph-segment__button.components-button + .nixfubu-smart-paragraph-segment__button.components-button {
  border-left: 1px solid #e2e8f0;
}

.nixfubu-smart-paragraph-segment__button.components-button.is-active {
  background: #d7dbe0;
  color: #111827;
}

@media (max-width: 767px) {
  .nixfubu-smart-paragraph__text {
    font-size: var(--nixfubu-smart-paragraph-size-mobile, var(--nixfubu-smart-paragraph-size, 16px));
    line-height: var(--nixfubu-smart-paragraph-line-height-mobile, var(--nixfubu-smart-paragraph-line-height, 1.7));
    letter-spacing: var(--nixfubu-smart-paragraph-letter-spacing-mobile, var(--nixfubu-smart-paragraph-letter-spacing, 0));
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .nixfubu-smart-paragraph__text {
    font-size: var(--nixfubu-smart-paragraph-size-tablet, var(--nixfubu-smart-paragraph-size, 16px));
    line-height: var(--nixfubu-smart-paragraph-line-height-tablet, var(--nixfubu-smart-paragraph-line-height, 1.7));
    letter-spacing: var(--nixfubu-smart-paragraph-letter-spacing-tablet, var(--nixfubu-smart-paragraph-letter-spacing, 0));
  }
}

.editor-styles-wrapper .nixfubu-smart-paragraph-block.is-preview-tablet .nixfubu-smart-paragraph__text {
  font-size: var(--nixfubu-smart-paragraph-size-tablet, var(--nixfubu-smart-paragraph-size, 16px));
  line-height: var(--nixfubu-smart-paragraph-line-height-tablet, var(--nixfubu-smart-paragraph-line-height, 1.7));
  letter-spacing: var(--nixfubu-smart-paragraph-letter-spacing-tablet, var(--nixfubu-smart-paragraph-letter-spacing, 0));
}

.editor-styles-wrapper .nixfubu-smart-paragraph-block.is-preview-mobile .nixfubu-smart-paragraph__text {
  font-size: var(--nixfubu-smart-paragraph-size-mobile, var(--nixfubu-smart-paragraph-size, 16px));
  line-height: var(--nixfubu-smart-paragraph-line-height-mobile, var(--nixfubu-smart-paragraph-line-height, 1.7));
  letter-spacing: var(--nixfubu-smart-paragraph-letter-spacing-mobile, var(--nixfubu-smart-paragraph-letter-spacing, 0));
}