@import url("../tools/selectors.css");

/* To scope these styles to main content (i.e. not header, not navbar) */
:where(:--main-content) {



/*
Form Content

Elements that create forms which allow users to enter and submit data.

```
<form> <fieldset> <legend> <label> <input> <select> <optgroup> <option> <textarea> <button> <output> <progress> <meter> <datalist>
```

Reference:

- [HTML element reference: Forms | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms)

Styleguide Elements.Forms
*/

/* To mimic Bootstrap */
& :is(button, input, optgroup, select, textarea) {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}



/*
Text Content

Elements that organize blocks or sections of content placed (includes lists).

```
<blockquote> <dd> <div> <dl> <dt> <figcaption> <figure> <hr> <li> <ol> <p> <pre> <ul>
```

Reference:

- [HTML element reference: Text content | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content)

Styleguide Elements.TextContent
*/

& blockquote {
  margin-inline: unset; /* undo browser */
}
& blockquote > p:last-child {
  margin-bottom: 0;
}

& figure {
  margin-inline: unset; /* undo browser */
}

/* To mimic Bootstrap */
& :is(dl, ol, ul, menu) {
  margin-top: 0;
  margin-bottom: 1rem;
}




/*
Interactive Elements

Elements that help to create interactive user interface objects.

```
<details> <summary> <dialog> <menu>
```

Reference:

- [HTML element reference: Interactive elements | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Interactive_elements)

Styleguide Elements.Interactive
*/

/* To mimic Bootstrap's <p> and <ul> margins */
& details {
  margin-top: 0;
  margin-bottom: 1rem;
}
& details > summary {
  cursor: pointer;
}



}