.mf-field-container {
  font-family: system-ui, sans-serif;
}

.mf-field-container img {
  max-width: 100%;
  height: auto;
  display: block;
}

.mf-field-required {
  display: flex;
  width: fit-content;
  margin-bottom: 4px;
  font-size: var(--wp--preset--font-size--x-small);
  color: white;
  border-radius: 4px;
  padding: 1px 6px 2px;
  background-color: #c44e4f;
  line-height: 1.4;
}

.mf-field-title {
  font-size: var(--wp--preset--font-size--small);
  margin: 0;
  margin: 0 0 2px 0;
  font-weight: 500;
}

.mf-field-description {
  font-size: var(--wp--preset--font-size--small);
  color: #757575;
}

.mf-field-description:not(:last-child) {
  margin: 0 0 12px 0;
}

.mf-field-description:last-child {
  margin: 8px 0 0 0;
}

/* Toggle field styles */
.mf-field-toggle {
  display: flex;
  align-items: start;
}

/* Rich text field styles */
.mf-field-richtext {
  padding: 12px;
  border: 1px solid var(--wp-components-color-gray-600, #949494);
  font-size: var(--wp--preset--font-size--medium);
  border-radius: var(--wp-components-border-radius-x-small, 2px);
}

.mf-field-richtext-wrapper {
  max-width: 100%;
  overflow-x: scroll;
}

.mf-field-richtext strong {
  font-weight: 600;
}

/* Rich text field styles */
.mf-richtext-toolbar {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: scroll;
}

.mf-richtext-toolbar-section {
  display: flex;
  padding: 3px;
  gap: 2px;
  align-items: center;
  flex-wrap: nowrap;
  border: 1px solid var(--wp-components-color-gray-600, #949494);
  border-radius: var(--wp-components-border-radius-x-small, 2px);
}

.mf-richtext-link-popover-content {
  width: min(200px, 100%);
}

.mf-richtext-color-picker-panel .components-popover__content {
  padding: 0 !important;
}

.mf-richtext-color-tab-content {
  width: 260px;
  padding: 16px;
}

.mf-field-richtext {
  margin-top: 2px;
  padding: 12px;
  font-size: var(--wp--preset--font-size--medium);
  field-sizing: content;
  border: 1px solid var(--wp-components-color-gray-600, #949494);
  border-radius: var(--wp-components-border-radius-x-small, 2px);
  background: #fff;
  outline: none;
  transition:
    border-color 0.1s ease-in-out,
    box-shadow 0.1s ease-in-out;

  &:focus {
    border-color: var(--wp-components-color-accent, #2271b1);
    box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, #2271b1);
    outline: none;
  }

  /* Paragraph styling */
  p {
    font-size: 15px;
    margin: 0 0 0.6em 0;

    &:last-child {
      margin-bottom: 0;
    }

    &:empty:before {
      content: "\200B";
      /* Zero-width space to maintain paragraph height */
    }
  }
}

/* Spacing field styles */
.mf-spacing-field {
  margin-top: -44px;
}

.mf-spacing-field .components-base-control__label {
  pointer-events: none;
}

.mf-spacing-field:not(.mf-spacing-field--allow-custom) .components-button.has-icon.is-small:not(.component-box-control__linked-button) {
  display: none;
}

/* Email field styles */
.mf-email-field {
  &.is-invalid input {
    border-color: var(--wp-components-color-accent, #cc1818);
  }
}