/*!
 * Pico: Customs styles for Docs
 */:root {
 --icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
 --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
 --icon-check-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")
}
:root:not([data-theme=dark]),
[data-theme=light] {
 --invalid-color:#c62828;
 --valid-color:#388e3c;
 --nav-background-color:rgba(255, 255, 255, 0.7);
 --nav-border-color:rgba(115, 130, 140, 0.2);
 --nav-logo-color:#fff;
 --article-code-background-color:#f9fafb
}
@media only screen and (prefers-color-scheme:dark) {
 :root:not([data-theme=light]) {
  --invalid-color:rgba(183, 28, 28, 0.5);
  --valid-color:rgba(46, 125, 50, 0.5);
  --nav-background-color:rgba(16, 24, 30, 0.8);
  --nav-border-color:rgba(115, 130, 140, 0.2);
  --nav-logo-color:#0e1419;
  --article-code-background-color:var(--code-background-color)
 }
}
[data-theme=dark] {
 --invalid-color:rgba(183, 28, 28, 0.5);
 --valid-color:rgba(46, 125, 50, 0.5);
 --nav-background-color:rgba(16, 24, 30, 0.8);
 --nav-border-color:rgba(115, 130, 140, 0.2);
 --nav-logo-color:#0e1419;
 --article-code-background-color:var(--code-background-color)
}
html {
 scroll-behavior:smooth
}
body>main {
 padding-top:calc(var(--block-spacing-vertical) + 3.5rem)
}
@media (min-width:992px) {
 body>main {
  --block-spacing-horizontal:calc(var(--spacing) * 1.75);
  grid-column-gap:calc(var(--block-spacing-horizontal) * 3);
  display:grid;
  grid-template-columns:200px auto
 }
}
@media (min-width:1200px) {
 body>main {
  --block-spacing-horizontal:calc(var(--spacing) * 2)
 }
}
body>main div[role=document],
body>main>aside {
 min-width:0
}
div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
 display:inline-block;
 width:1rem;
 height:1rem;
 background-image:var(--icon-external);
 background-position:top center;
 background-size:.66rem auto;
 background-repeat:no-repeat;
 content:""
}
svg {
 height:1rem
}
main>aside nav {
 width:100%;
 padding-bottom:var(--block-spacing-vertical)
}
@media (min-width:992px) {
 main>aside nav {
  position:fixed;
  width:200px;
  max-height:calc(100vh - 5.5rem);
  overflow-x:hidden;
  overflow-y:auto
 }
}
main>aside nav a#toggle-docs-navigation {
 display:block;
 margin:0;
 margin-bottom:var(--spacing);
 padding:0;
 padding-bottom:var(--spacing);
 border-bottom:var(--border-width) solid var(--accordion-border-color)
}
main>aside nav a#toggle-docs-navigation svg {
 margin-right:calc(var(--spacing) * .5);
 vertical-align:-3px
}
@media (min-width:992px) {
 main>aside nav a#toggle-docs-navigation {
  display:none
 }
}
main>aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {
 display:none
}
main>aside nav.closed-on-mobile details {
 display:none
}
@media (min-width:992px) {
 main>aside nav.closed-on-mobile details {
  display:block
 }
 main>aside nav.closed-on-mobile>a#toggle-docs-navigation {
  display:none
 }
}
main>aside nav.open a#toggle-docs-navigation svg.expand {
 display:none
}
main>aside details {
 padding-bottom:0
}
main>aside details summary {
 padding-bottom:.5rem
}
main>aside li,
main>aside summary {
 padding-top:0;
 padding-bottom:0;
 font-size:16px
}
main>aside ul {
 padding-left:.25rem
}
main>aside li a {
 --nav-link-spacing-vertical:0.25rem;
 --nav-link-spacing-horizontal:0.75rem
}
main>aside li a svg {
 vertical-align:middle
}
main>aside a.secondary:focus {
 background-color:transparent;
 color:var(--primary-hover)
}
main>aside a[aria-current],
main>aside a[aria-current]:hover {
 color:var(--primary)
}
main>aside details {
 border-bottom:none
}
main>aside details summary {
 color:var(--h1-color);
 font-weight:300;
 font-size:14px;
 text-transform:uppercase
}
main>aside details summary::after {
 display:none
}
main>aside details[open]>summary {
 margin-bottom:0
}
main>aside details[open]>summary:not([role=button]):not(:focus) {
 color:var(--h1-color)
}
#themes button.theme-switcher:first-of-type {
 --font-weight:bold
}
#themes button.theme-switcher i {
 font-style:normal
}
#customization figure {
 display:grid;
 grid-template-rows:repeat(2,1fr);
 grid-template-columns:repeat(9,1fr);
 margin-bottom:0;
 overflow:hidden
}
@media (min-width:576px) {
 #customization figure {
  grid-template-rows:1fr;
  grid-template-columns:repeat(18,1fr);
  border-top-right-radius:var(--border-radius);
  border-top-left-radius:var(--border-radius)
 }
}
#customization figure~article {
 margin-top:0;
 border-top-right-radius:0;
 border-top-left-radius:0
}
#customization figure button {
 margin-bottom:0;
 padding:0;
 padding-top:100%;
 border:none;
 border-radius:0
}
#customization figure button:focus {
 box-shadow:none
}
#customization figure button.picked {
 background-image:var(--icon-check);
 background-position:center;
 background-size:.66rem auto;
 background-repeat:no-repeat;
 box-shadow:inset 0 0 1rem 0 rgba(0,0,0,.25)
}
#customization figure button[data-color=amber].picked,
#customization figure button[data-color=lime].picked,
#customization figure button[data-color=yellow].picked {
 background-image:var(--icon-check-dark)
}
#customization h4 {
 transition:color var(--transition)
}
#customization pre[data-theme=generated] {
 border-color:var(--primary)
}
#grid {
 --grid-spacing-vertical:1rem
}
#grid button {
 display:block;
 width:100%;
 margin-bottom:var(--spacing)
}
@media (min-width:576px) {
 #grid button {
  display:inline-block;
  width:auto;
  margin-right:.5rem
 }
}
#grid button svg {
 stroke:var(--secondary);
 margin-right:.5rem;
 border:2px solid currentColor;
 border-radius:1rem;
 background:currentColor
}
#grid .grid>* {
 padding:calc(var(--spacing)/ 2) 0;
 border-radius:var(--border-radius);
 background:var(--code-background-color);
 font-size:87.5%;
 text-align:center
}
#grid details {
 margin-top:calc(var(--typography-spacing-vertical) * 2)
}
#grid details svg {
 vertical-align:bottom
}
#buttons a[role=button] {
 margin-right:calc(var(--spacing) * .5)
}
#forms div.grid {
 grid-row-gap:0
}
#modal button {
 --font-weight:bold
}
h1 {
 margin-top:-.25em
}
section>hgroup {
 margin-bottom:calc(var(--typography-spacing-vertical) * 2)
}
[role=document] section>h1,
[role=document] section>h2,
[role=document] section>h3 {
 line-height:1
}
article>footer.code {
 background:var(--article-code-background-color)
}
article pre,
article pre code {
 margin-bottom:0;
 background:0 0
}
section>pre {
 margin:var(--block-spacing-vertical) 0;
 padding:calc(var(--block-spacing-vertical)/ 1.5) var(--block-spacing-horizontal);
 background:var(--article-code-background-color);
 box-shadow:var(--card-box-shadow)
}
[data-theme=invalid],
[data-theme=valid] {
 position:relative;
 margin-bottom:0!important
}
[data-theme=invalid]:before,
[data-theme=valid]:before {
 display:block;
 position:absolute;
 top:0;
 right:0;
 padding:.375rem .75rem;
 border-radius:0;
 color:var(--primary-inverse);
 font-size:14px;
 line-height:1
}
@media (min-width:992px) {
 [data-theme=invalid]:before,
 [data-theme=valid]:before {
  top:var(--spacing);
  right:var(--spacing)
 }
}
[data-theme=invalid] code,
[data-theme=valid] code {
 padding:calc(var(--block-spacing-vertical)/ 1.5 + 14px + .75rem) var(--block-spacing-horizontal)
}
[data-theme=invalid]:before {
 background:var(--invalid-color);
 content:"Not so great"
}
[data-theme=valid]:before {
 background:var(--valid-color);
 content:"Great"
}
dialog.example {
 display:block;
 z-index:inherit;
 position:relative;
 top:inherit;
 right:inherit;
 bottom:inherit;
 left:inherit;
 align-items:inherit;
 justify-content:inherit;
 width:inherit;
 min-width:inherit;
 height:inherit;
 min-height:inherit;
 padding:0;
 background-color:inherit
}
dialog.example article {
 max-width:inherit
}
dialog.example:not([open]),
dialog.example[open=false] {
 display:none
}
.dialog-is-open body>button {
 filter:blur(.125rem)
}
body>nav {
 --nav-link-spacing-vertical:1rem;
 -webkit-backdrop-filter:saturate(180%) blur(20px);
 z-index:99;
 position:fixed;
 top:0;
 right:0;
 left:0;
 backdrop-filter:saturate(180%) blur(20px);
 background-color:var(--nav-background-color);
 box-shadow:0 1px 0 var(--nav-border-color)
}
body>nav.container-fluid {
 padding-right:calc(var(--spacing) + var(--scrollbar-width,0px))
}
body>nav a {
 border-radius:0
}
body>nav svg {
 vertical-align:text-bottom
}
body>nav ul:first-of-type {
 margin-left:calc(var(--spacing) * -1)
}
body>nav ul:first-of-type li {
 padding:0
}
body>nav ul:first-of-type li:first-of-type a {
 display:block;
 margin:0;
 padding:0;
 background:var(--h1-color);
 color:var(--nav-logo-color)
}
body>nav ul:first-of-type li:first-of-type a svg {
 display:block;
 width:3.5rem;
 height:3.5rem
}
body>nav ul:first-of-type li:nth-of-type(2) {
 display:none;
 margin-left:calc(var(--spacing) * 1.5);
 color:var(--h1-color)
}
@media (min-width:992px) {
 body>nav ul:first-of-type li:nth-of-type(2) {
  display:inline
 }
}
.switcher {
 position:fixed;
 right:calc(var(--spacing)/ 2 + var(--scrollbar-width,0px));
 bottom:var(--spacing);
 width:auto;
 margin-bottom:0;
 padding:.75rem;
 border-radius:2rem;
 box-shadow:var(--card-box-shadow);
 line-height:1;
 text-align:right
}
.switcher::after {
 display:inline-block;
 width:1rem;
 height:1rem;
 border:.15rem solid currentColor;
 border-radius:50%;
 background:linear-gradient(to right,currentColor 0,currentColor 50%,transparent 50%);
 content:"";
 vertical-align:bottom;
 transition:transform var(--transition)
}
.switcher i {
 display:inline-block;
 max-width:0;
 padding:0;
 overflow:hidden;
 font-style:normal;
 font-size:.875rem;
 white-space:nowrap
}
.switcher:focus,
.switcher:hover {
 max-width:100%;
 transition:background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition)
}
.switcher:hover::after {
 transform:rotate(180deg)
}
.switcher:hover i {
 max-width:100%;
 padding:0 calc(var(--spacing)/ 2) 0 calc(var(--spacing)/ 4);
 transition:max-width var(--transition),padding var(--transition)
}
.switcher:focus {
 box-shadow:var(--card-box-shadow),0 0 0 .2rem var(--secondary-focus)
}
@media (min-width:576px) {
 .switcher {
  right:calc(var(--spacing) + var(--scrollbar-width,0px))
 }
}
/*# sourceMappingURL=pico.docs.min.css.map */