.no-border {
  border: 0;
}

/**
 * A utility class used on a wrapper element such as a `div` to group two form elements
 * commonly a label and an input.
 * - Sets the display to grid.
 * - Sets the a 0.75rem gap between the elements.
 * - Sets the margin block end to 0.75rem.
 */
.form-field {
  display: grid;
  gap: var(--minimalist-form-field-gap, var(--size-12));
  margin-block-end: var(
    --minimalist-form-field-margin-block-end,
    var(--size-12)
  );
}

/**
 * CSS class to reset the default list styling.
 * - Removes bullet points or numbers from list items.
 * - Eliminates default margin and padding.
 */
.reset-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/*
 * A simple utility for setting a max width on an element that constrains its
 * width to what is commonly known to be a readable line length for prose.
 */
.readable-line-length {
  max-width: 40rem;
  max-width: 85ch;
}

/* https://www.tpgi.com/the-anatomy-of-visually-hidden/ */
.visually-hidden:not(:focus, :active) {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}