.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;
}

/* Char counter */
.mf-field-characters-left {
  margin: 0;
  font-size: 12px;
  color: #757575;
  text-align: right;
}

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

/* Rich text field styles */
.mf-field-richtext-wrapper {
  container-type: inline-size;
  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;
  margin-bottom: 2px;
}

.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-field-richtext {
  padding: 12px;
  font-size: var(--wp--preset--font-size--medium, 15px);
  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 */
    }
  }
}

@container (width < 300px) {
  .mf-richtext-toolbar {
    .components-button.has-icon {
      padding: 2px;
      width: 26px;
      min-width: 26px !important;
      height: 26px;
    }

    .components-dropdown {
      height: 26px;
    }

    svg {
      width: 22px;
      height: 22px;
    }
  }
}

/* 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);
  }
}

/* Image field styles */
.mf-image-wrapper {
  margin: 0;
  position: relative;
}

.mf-image-wrapper:hover .mf-image-actions {
  display: block;
}

.mf-image-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
}

.mf-media-upload__preview img {
  cursor: pointer;
}
