{"version":3,"sources":["docs\\scss\\pico.docs.scss","docs\\scss\\themes\\docs\\_icons.scss","docs\\css\\pico.docs.css","docs\\scss\\themes\\docs\\_light.scss","docs\\scss\\themes\\_docs.scss","docs\\scss\\themes\\docs\\_dark.scss","docs\\scss\\layout\\_document.scss","docs\\scss\\layout\\_main.scss","docs\\scss\\layout\\_aside.scss","docs\\scss\\layout\\_documentation.scss","docs\\scss\\content\\_typography.scss","docs\\scss\\content\\_code.scss","docs\\scss\\components\\_modal.scss","docs\\scss\\components\\_nav.scss","docs\\scss\\components\\_theme-switcher.scss"],"names":[],"mappings":"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","sourcesContent":["/*!\r\n * Pico: Customs styles for Docs\r\n */\r\n\r\n// Config\r\n@import \"../../scss/variables\";\r\n\r\n// Theming\r\n@import \"themes/docs\";\r\n\r\n// Layout\r\n@import \"layout/document\";\r\n@import \"layout/main\";\r\n@import \"layout/aside\";\r\n@import \"layout/documentation\";\r\n\r\n// Content\r\n@import \"content/typography\";\r\n@import \"content/code\";\r\n\r\n// Components\r\n@import \"components/modal\";\r\n@import \"components/nav\";\r\n@import \"components/theme-switcher\";","@import \"../../../../scss/functions\";\r\n\r\n// Icons\r\n// Source: https://feathericons.com/\r\n:root {\r\n  --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='#{to-rgb($grey-500)}' 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\");\r\n  --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='#{to-rgb($white)}' 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\");\r\n  --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($black, 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\");\r\n}\r\n","/*!\n * Pico: Customs styles for Docs\n */\n/**\n * Theme: Additions for docs\n */\n:root {\n  --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='rgb(115, 130, 140)' 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\");\n  --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='rgb(255, 255, 255)' 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\");\n  --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\");\n}\n\n[data-theme=light],\n:root:not([data-theme=dark]) {\n  --invalid-color: #c62828;\n  --valid-color: #388e3c;\n  --nav-background-color: rgba(255, 255, 255, 0.7);\n  --nav-border-color: rgba(115, 130, 140, 0.2);\n  --nav-logo-color: #fff;\n  --article-code-background-color: #f9fafb;\n}\n\n@media only screen and (prefers-color-scheme: dark) {\n  :root:not([data-theme=light]) {\n    --invalid-color: rgba(183, 28, 28, 0.5);\n    --valid-color: rgba(46, 125, 50, 0.5);\n    --nav-background-color: rgba(16, 24, 30, 0.8);\n    --nav-border-color: rgba(115, 130, 140, 0.2);\n    --nav-logo-color: #0e1419;\n    --article-code-background-color: var(--code-background-color);\n  }\n}\n[data-theme=dark] {\n  --invalid-color: rgba(183, 28, 28, 0.5);\n  --valid-color: rgba(46, 125, 50, 0.5);\n  --nav-background-color: rgba(16, 24, 30, 0.8);\n  --nav-border-color: rgba(115, 130, 140, 0.2);\n  --nav-logo-color: #0e1419;\n  --article-code-background-color: var(--code-background-color);\n}\n\n/**\n * Docs: Document\n */\nhtml {\n  scroll-behavior: smooth;\n}\n\n/**\n * Docs: Main (Grid)\n */\nbody > main {\n  padding-top: calc(var(--block-spacing-vertical) + 3.5rem);\n}\n@media (min-width: 992px) {\n  body > main {\n    --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n    grid-column-gap: calc(var(--block-spacing-horizontal) * 3);\n    display: grid;\n    grid-template-columns: 200px auto;\n  }\n}\n@media (min-width: 1200px) {\n  body > main {\n    --block-spacing-horizontal: calc(var(--spacing) * 2);\n  }\n}\nbody > main > aside,\nbody > main div[role=document] {\n  min-width: 0;\n}\n\ndiv[role=document] section a[href*=\"//\"]:not([href*=\"https://picocss.com\"], [role])::after {\n  display: inline-block;\n  width: 1rem;\n  height: 1rem;\n  background-image: var(--icon-external);\n  background-position: top center;\n  background-size: 0.66rem auto;\n  background-repeat: no-repeat;\n  content: \"\";\n}\n\nsvg {\n  height: 1rem;\n}\n\n/**\n * Docs: Aside\n */\nmain > aside nav {\n  width: 100%;\n  padding-bottom: var(--block-spacing-vertical);\n}\n@media (min-width: 992px) {\n  main > aside nav {\n    position: fixed;\n    width: 200px;\n    max-height: calc(100vh - 5.5rem);\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n}\nmain > aside nav a#toggle-docs-navigation {\n  display: block;\n  margin: 0;\n  margin-bottom: var(--spacing);\n  padding: 0;\n  padding-bottom: var(--spacing);\n  border-bottom: var(--border-width) solid var(--accordion-border-color);\n}\nmain > aside nav a#toggle-docs-navigation svg {\n  margin-right: calc(var(--spacing) * 0.5);\n  vertical-align: -3px;\n}\n@media (min-width: 992px) {\n  main > aside nav a#toggle-docs-navigation {\n    display: none;\n  }\n}\nmain > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {\n  display: none;\n}\nmain > aside nav.closed-on-mobile details {\n  display: none;\n}\n@media (min-width: 992px) {\n  main > aside nav.closed-on-mobile details {\n    display: block;\n  }\n  main > aside nav.closed-on-mobile > a#toggle-docs-navigation {\n    display: none;\n  }\n}\nmain > aside nav.open a#toggle-docs-navigation svg.expand {\n  display: none;\n}\nmain > aside details {\n  padding-bottom: 0;\n}\nmain > aside details summary {\n  padding-bottom: 0.5rem;\n}\nmain > aside li,\nmain > aside summary {\n  padding-top: 0;\n  padding-bottom: 0;\n  font-size: 16px;\n}\nmain > aside ul {\n  padding-left: 0.25rem;\n}\nmain > aside li a {\n  --nav-link-spacing-vertical: 0.25rem;\n  --nav-link-spacing-horizontal: 0.75rem;\n}\nmain > aside li a svg {\n  vertical-align: middle;\n}\nmain > aside a.secondary:focus {\n  background-color: transparent;\n  color: var(--primary-hover);\n}\nmain > aside a[aria-current],\nmain > aside a[aria-current]:hover {\n  color: var(--primary);\n}\nmain > aside details {\n  border-bottom: none;\n}\nmain > aside details summary {\n  color: var(--h1-color);\n  font-weight: 300;\n  font-size: 14px;\n  text-transform: uppercase;\n}\nmain > aside details summary::after {\n  display: none;\n}\nmain > aside details[open] > summary {\n  margin-bottom: 0;\n}\nmain > aside details[open] > summary:not([role=button], :focus) {\n  color: var(--h1-color);\n}\n\n/**\n * Docs: Documentation\n */\n#themes button.theme-switcher:first-of-type {\n  --font-weight: bold;\n}\n#themes button.theme-switcher i {\n  font-style: normal;\n}\n\n#customization figure {\n  display: grid;\n  grid-template-rows: repeat(2, 1fr);\n  grid-template-columns: repeat(9, 1fr);\n  margin-bottom: 0;\n  overflow: hidden;\n}\n@media (min-width: 576px) {\n  #customization figure {\n    grid-template-rows: 1fr;\n    grid-template-columns: repeat(18, 1fr);\n    border-top-right-radius: var(--border-radius);\n    border-top-left-radius: var(--border-radius);\n  }\n}\n#customization figure ~ article {\n  margin-top: 0;\n  border-top-right-radius: 0;\n  border-top-left-radius: 0;\n}\n#customization figure button {\n  margin-bottom: 0;\n  padding: 0;\n  padding-top: 100%;\n  border: none;\n  border-radius: 0;\n}\n#customization figure button:focus {\n  box-shadow: none;\n}\n#customization figure button.picked {\n  background-image: var(--icon-check);\n  background-position: center;\n  background-size: 0.66rem auto;\n  background-repeat: no-repeat;\n  box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);\n}\n#customization figure button[data-color=lime].picked, #customization figure button[data-color=yellow].picked, #customization figure button[data-color=amber].picked {\n  background-image: var(--icon-check-dark);\n}\n#customization h4 {\n  transition: color var(--transition);\n}\n#customization pre[data-theme=generated] {\n  border-color: var(--primary);\n}\n\n#grid {\n  --grid-spacing-vertical: 1rem;\n}\n#grid button {\n  display: block;\n  width: 100%;\n  margin-bottom: var(--spacing);\n}\n@media (min-width: 576px) {\n  #grid button {\n    display: inline-block;\n    width: auto;\n    margin-right: 0.5rem;\n  }\n}\n#grid button svg {\n  stroke: var(--secondary);\n  margin-right: 0.5rem;\n  border: 2px solid currentColor;\n  border-radius: 1rem;\n  background: currentColor;\n}\n#grid .grid > * {\n  padding: calc(var(--spacing) / 2) 0;\n  border-radius: var(--border-radius);\n  background: var(--code-background-color);\n  font-size: 87.5%;\n  text-align: center;\n}\n#grid details {\n  margin-top: calc(var(--typography-spacing-vertical) * 2);\n}\n#grid details svg {\n  vertical-align: bottom;\n}\n\n#buttons a[role=button] {\n  margin-right: calc(var(--spacing) * 0.5);\n}\n\n#forms div.grid {\n  grid-row-gap: 0;\n}\n\n#modal button {\n  --font-weight: bold;\n}\n\n/**\n * Docs: Typography\n */\nh1 {\n  margin-top: -0.25em;\n}\n\nsection > hgroup {\n  margin-bottom: calc(var(--typography-spacing-vertical) * 2);\n}\n\n[role=document] section > h1,\n[role=document] section > h2,\n[role=document] section > h3 {\n  line-height: 1;\n}\n\n/**\n * Docs: Code\n */\narticle > footer.code {\n  background: var(--article-code-background-color);\n}\n\narticle pre,\narticle pre code {\n  margin-bottom: 0;\n  background: transparent;\n}\n\nsection > pre {\n  margin: var(--block-spacing-vertical) 0;\n  padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);\n  background: var(--article-code-background-color);\n  box-shadow: var(--card-box-shadow);\n}\n\n[data-theme=invalid],\n[data-theme=valid] {\n  position: relative;\n  margin-bottom: 0 !important;\n}\n[data-theme=invalid]:before,\n[data-theme=valid]:before {\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 0.375rem 0.75rem;\n  border-radius: 0;\n  color: var(--primary-inverse);\n  font-size: 14px;\n  line-height: 1;\n}\n@media (min-width: 992px) {\n  [data-theme=invalid]:before,\n  [data-theme=valid]:before {\n    top: var(--spacing);\n    right: var(--spacing);\n  }\n}\n[data-theme=invalid] code,\n[data-theme=valid] code {\n  padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);\n}\n\n[data-theme=invalid]:before {\n  background: var(--invalid-color);\n  content: \"Not so great\";\n}\n\n[data-theme=valid]:before {\n  background: var(--valid-color);\n  content: \"Great\";\n}\n\n/**\n * Docs: Modal\n */\ndialog.example {\n  display: block;\n  z-index: inherit;\n  position: relative;\n  top: inherit;\n  right: inherit;\n  bottom: inherit;\n  left: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n  width: inherit;\n  min-width: inherit;\n  height: inherit;\n  min-height: inherit;\n  padding: 0;\n  background-color: inherit;\n}\ndialog.example article {\n  max-width: inherit;\n}\ndialog.example:not([open]), dialog.example[open=false] {\n  display: none;\n}\n\n.dialog-is-open body > button {\n  filter: blur(0.125rem);\n}\n\n/**\n * Docs: Navs\n */\nbody > nav {\n  --nav-link-spacing-vertical: 1rem;\n  -webkit-backdrop-filter: saturate(180%) blur(20px);\n  z-index: 99;\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  backdrop-filter: saturate(180%) blur(20px);\n  background-color: var(--nav-background-color);\n  box-shadow: 0px 1px 0 var(--nav-border-color);\n}\nbody > nav.container-fluid {\n  padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px));\n}\nbody > nav a {\n  border-radius: 0;\n}\nbody > nav svg {\n  vertical-align: text-bottom;\n}\nbody > nav ul:first-of-type {\n  margin-left: calc(var(--spacing) * -1);\n}\nbody > nav ul:first-of-type li {\n  padding: 0;\n}\nbody > nav ul:first-of-type li:first-of-type a {\n  display: block;\n  margin: 0;\n  padding: 0;\n  background: var(--h1-color);\n  color: var(--nav-logo-color);\n}\nbody > nav ul:first-of-type li:first-of-type a svg {\n  display: block;\n  width: 3.5rem;\n  height: 3.5rem;\n}\nbody > nav ul:first-of-type li:nth-of-type(2) {\n  display: none;\n  margin-left: calc(var(--spacing) * 1.5);\n  color: var(--h1-color);\n}\n@media (min-width: 992px) {\n  body > nav ul:first-of-type li:nth-of-type(2) {\n    display: inline;\n  }\n}\n\n/**\n * Docs: Theme switcher\n */\n.switcher {\n  position: fixed;\n  right: calc(var(--spacing) / 2 + var(--scrollbar-width, 0px));\n  bottom: var(--spacing);\n  width: auto;\n  margin-bottom: 0;\n  padding: 0.75rem;\n  border-radius: 2rem;\n  box-shadow: var(--card-box-shadow);\n  line-height: 1;\n  text-align: right;\n}\n.switcher::after {\n  display: inline-block;\n  width: 1rem;\n  height: 1rem;\n  border: 0.15rem solid currentColor;\n  border-radius: 50%;\n  background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);\n  content: \"\";\n  vertical-align: bottom;\n  transition: transform var(--transition);\n}\n.switcher i {\n  display: inline-block;\n  max-width: 0;\n  padding: 0;\n  overflow: hidden;\n  font-style: normal;\n  font-size: 0.875rem;\n  white-space: nowrap;\n}\n.switcher:hover, .switcher:focus {\n  max-width: 100%;\n  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);\n}\n.switcher:hover::after {\n  transform: rotate(180deg);\n}\n.switcher:hover i {\n  max-width: 100%;\n  padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);\n  transition: max-width var(--transition), padding var(--transition);\n}\n.switcher:focus {\n  box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);\n}\n@media (min-width: 576px) {\n  .switcher {\n    right: calc(var(--spacing) + var(--scrollbar-width, 0px));\n  }\n}\n\n/*# sourceMappingURL=pico.docs.css.map */","// Light theme (Default) [Additions for docs]\r\n// Can be forced with data-theme=\"light\"\r\n[data-theme=\"light\"],\r\n:root:not([data-theme=\"dark\"]) {\r\n  --invalid-color: #{$red-800};\r\n  --valid-color: #{$green-700};\r\n  --nav-background-color: #{rgba($white, 0.7)};\r\n  --nav-border-color: #{rgba($grey-500, 0.2)};\r\n  --nav-logo-color: #{$white};\r\n  --article-code-background-color: #{mix($grey-50, $white, 33%)};\r\n}\r\n","/**\r\n * Theme: Additions for docs\r\n */\r\n\r\n@import \"../../../scss/themes/default/colors\";\r\n@import \"docs/icons\";\r\n\r\n// Light theme (Default)\r\n// Can be forced with data-theme=\"light\"\r\n@import \"docs/light\";\r\n\r\n// Dark theme (Auto)\r\n// Automatically enabled if user has Dark mode enabled\r\n@import \"docs/dark\";\r\n@media only screen and (prefers-color-scheme: dark) {\r\n  :root:not([data-theme=\"light\"]) {\r\n    @include dark;\r\n  }\r\n}\r\n\r\n// Dark theme (Forced)\r\n// Enabled if forced with data-theme=\"dark\"\r\n[data-theme=\"dark\"] {\r\n  @include dark;\r\n}\r\n","// Dark theme [Additions for docs]\r\n@mixin dark {\r\n  --invalid-color: #{rgba($red-900, 0.5)};\r\n  --valid-color: #{rgba($green-800, 0.5)};\r\n  --nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)};\r\n  --nav-border-color: #{rgba($grey-500, 0.2)};\r\n  --nav-logo-color: #{mix($black, $grey-900)};\r\n  --article-code-background-color: var(--code-background-color);\r\n}\r\n","/**\r\n * Docs: Document\r\n */\r\n\r\nhtml {\r\n  scroll-behavior: smooth;\r\n}\r\n","/**\r\n * Docs: Main (Grid)\r\n */\r\n\r\n// Config\r\n$navHeight: 3.5rem;\r\n\r\n// Main grid\r\nbody > main {\r\n  padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});\r\n\r\n  @if map-get($breakpoints, \"lg\") {\r\n    @media (min-width: map-get($breakpoints, \"lg\")) {\r\n      --block-spacing-horizontal: calc(var(--spacing) * 1.75);\r\n      grid-column-gap: calc(var(--block-spacing-horizontal) * 3);\r\n      display: grid;\r\n      grid-template-columns: 200px auto;\r\n    }\r\n  }\r\n\r\n  @if map-get($breakpoints, \"xl\") {\r\n    @media (min-width: map-get($breakpoints, \"xl\")) {\r\n      --block-spacing-horizontal: calc(var(--spacing) * 2);\r\n    }\r\n  }\r\n\r\n  > aside,\r\n  div[role=\"document\"] {\r\n    min-width: 0;\r\n  }\r\n}\r\n\r\n// External links\r\ndiv[role=\"document\"] section a[href*=\"//\"]:not([href*=\"https://picocss.com\"], [role])::after\r\n{\r\n  display: inline-block;\r\n  width: 1rem;\r\n  height: 1rem;\r\n  background-image: var(--icon-external);\r\n  background-position: top center;\r\n  background-size: 0.66rem auto;\r\n  background-repeat: no-repeat;\r\n  content: \"\";\r\n}\r\n\r\n// Embedded SVG\r\nsvg {\r\n  height: 1rem;\r\n}\r\n","/**\r\n * Docs: Aside\r\n */\r\n\r\nmain > aside {\r\n\r\n  nav {\r\n    width: 100%;\r\n    padding-bottom: var(--block-spacing-vertical);\r\n  \r\n    @media (min-width: map-get($breakpoints, \"lg\")) {\r\n      position: fixed;\r\n      width: 200px;\r\n      max-height: calc(100vh - 5.5rem);\r\n      overflow-x: hidden;\r\n      overflow-y: auto;\r\n    }\r\n\r\n    a#toggle-docs-navigation {\r\n      display: block;\r\n      margin: 0;\r\n      margin-bottom: var(--spacing);\r\n      padding: 0;\r\n      padding-bottom: var(--spacing);\r\n      border-bottom: var(--border-width) solid var(--accordion-border-color);\r\n\r\n      svg {\r\n        margin-right: calc(var(--spacing) * 0.5);\r\n        vertical-align: -3px;\r\n      }\r\n\r\n      @media (min-width: map-get($breakpoints, \"lg\")) {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    &.closed-on-mobile {\r\n\r\n      a#toggle-docs-navigation {\r\n        svg.collapse {\r\n          display: none;\r\n        }\r\n      }\r\n\r\n      details {\r\n        display: none;\r\n      } \r\n\r\n      @media (min-width: map-get($breakpoints, \"lg\")) {\r\n        details {\r\n          display: block;\r\n        }\r\n\r\n        > a#toggle-docs-navigation {\r\n          display: none;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.open {\r\n      a#toggle-docs-navigation {\r\n        svg.expand {\r\n          display: none;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  details {\r\n    padding-bottom: 0;\r\n\r\n    summary {\r\n      padding-bottom: 0.5rem;\r\n    }\r\n  }\r\n\r\n  li,\r\n  summary {\r\n    padding-top: 0;\r\n    padding-bottom: 0;\r\n    font-size: 16px;\r\n  }\r\n\r\n  ul {\r\n    padding-left: 0.25rem;\r\n  }\r\n\r\n  li a {\r\n    --nav-link-spacing-vertical: 0.25rem;\r\n    --nav-link-spacing-horizontal: 0.75rem;\r\n\r\n    svg {\r\n      vertical-align: middle;\r\n    }\r\n  }\r\n\r\n  a.secondary:focus {\r\n    background-color: transparent;\r\n    color: var(--primary-hover);\r\n  }\r\n\r\n  a[aria-current],\r\n  a[aria-current]:hover {\r\n    color: var(--primary);\r\n  }\r\n\r\n  details {\r\n    border-bottom: none;\r\n\r\n    summary {\r\n      color: var(--h1-color);\r\n      font-weight: 300;\r\n      font-size: 14px;\r\n      text-transform: uppercase;\r\n\r\n      &::after {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    &[open] {\r\n      > summary {\r\n        margin-bottom: 0;\r\n\r\n        &:not([role=button], :focus) {\r\n          color: var(--h1-color);\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n","/**\r\n * Docs: Documentation\r\n */\r\n\r\n// Docs: Themes\r\n#themes {\r\n  button.theme-switcher {\r\n    &:first-of-type {\r\n      --font-weight: bold;\r\n    }\r\n    \r\n    i {\r\n      font-style: normal;\r\n    }\r\n  }\r\n}\r\n\r\n// Docs: Customization\r\n#customization {\r\n  figure {\r\n    display: grid;\r\n    grid-template-rows: repeat(2, 1fr);\r\n    grid-template-columns: repeat(9, 1fr);\r\n    margin-bottom: 0;\r\n    overflow: hidden;\r\n\r\n    @media (min-width: map-get($breakpoints, \"sm\")) {\r\n      grid-template-rows: 1fr;\r\n      grid-template-columns: repeat(18, 1fr);\r\n      border-top-right-radius: var(--border-radius);\r\n      border-top-left-radius: var(--border-radius);\r\n    }\r\n\r\n    ~ article {\r\n      margin-top: 0;\r\n      border-top-right-radius: 0;\r\n      border-top-left-radius: 0;\r\n    }\r\n\r\n    button {\r\n      margin-bottom: 0;\r\n      padding: 0;\r\n      padding-top: 100%;\r\n      border: none;\r\n      border-radius: 0;\r\n\r\n      &:focus {\r\n        box-shadow: none;\r\n      }\r\n\r\n      &.picked {\r\n        background-image: var(--icon-check);\r\n        background-position: center;\r\n        background-size: 0.66rem auto;\r\n        background-repeat: no-repeat;\r\n        box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);\r\n      }\r\n      &[data-color=\"lime\"],\r\n      &[data-color=\"yellow\"],\r\n      &[data-color=\"amber\"] {\r\n        &.picked {\r\n          background-image: var(--icon-check-dark);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  h4 {\r\n    transition: color var(--transition);\r\n  }\r\n\r\n  pre[data-theme=\"generated\"] {\r\n    border-color: var(--primary);\r\n  }\r\n}\r\n\r\n// Docs: Grid\r\n#grid {\r\n  --grid-spacing-vertical: 1rem;\r\n\r\n  button {\r\n    display: block;\r\n    width: 100%;\r\n    margin-bottom: var(--spacing);\r\n\r\n    @media (min-width: map-get($breakpoints, \"sm\")) {\r\n      display: inline-block;\r\n      width: auto;\r\n      margin-right: 0.5rem;\r\n    }\r\n\r\n    svg {\r\n      stroke: var(--secondary);\r\n      margin-right: 0.5rem;\r\n      border: 2px solid currentColor;\r\n      border-radius: 1rem;\r\n      background: currentColor;\r\n    }\r\n  }\r\n\r\n  .grid {\r\n    > * {\r\n      padding: calc(var(--spacing) / 2) 0;\r\n      border-radius: var(--border-radius);\r\n      background: var(--code-background-color);\r\n      font-size: 87.5%;\r\n      text-align: center;\r\n    }\r\n  }\r\n\r\n  details {\r\n    margin-top: calc(var(--typography-spacing-vertical) * 2);\r\n\r\n    svg {\r\n      vertical-align: bottom;\r\n    }\r\n  }\r\n}\r\n\r\n// Docs: Buttons\r\n#buttons {\r\n  a[role=\"button\"] {\r\n    margin-right: calc(var(--spacing) * 0.5);\r\n  }\r\n}\r\n\r\n// Docs: Forms\r\n#forms div.grid {\r\n  grid-row-gap: 0;\r\n}\r\n\r\n// Docs: Modal\r\n#modal {\r\n  button {\r\n    --font-weight: bold;\r\n  }\r\n}\r\n","/**\r\n * Docs: Typography\r\n */\r\n\r\nh1 {\r\n  margin-top: -0.25em;\r\n}\r\n\r\nsection > hgroup {\r\n  margin-bottom: calc(var(--typography-spacing-vertical) * 2);\r\n}\r\n\r\n[role=\"document\"] {\r\n  section > h1,\r\n  section > h2,\r\n  section > h3 {\r\n    line-height: 1;\r\n  }\r\n}\r\n","/**\r\n * Docs: Code\r\n */\r\n\r\n// Code block inside article\r\narticle > footer.code {\r\n  background: var(--article-code-background-color);\r\n}\r\narticle pre,\r\narticle pre code {\r\n  margin-bottom: 0;\r\n  background: transparent;\r\n}\r\n\r\n// Code block outside article\r\n// Horizontally aligned with <article> content\r\nsection > pre {\r\n  margin: var(--block-spacing-vertical) 0;\r\n  padding: calc(var(--block-spacing-vertical) / 1.5)\r\n    var(--block-spacing-horizontal);\r\n  background: var(--article-code-background-color);\r\n  box-shadow: var(--card-box-shadow);\r\n}\r\n\r\n// Badge for Valid & Invalid code\r\n[data-theme=\"invalid\"],\r\n[data-theme=\"valid\"] {\r\n  position: relative;\r\n  margin-bottom: 0 !important;\r\n\r\n  // Label\r\n  &:before {\r\n    display: block;\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    padding: 0.375rem 0.75rem;\r\n    border-radius: 0;\r\n    color: var(--primary-inverse);\r\n    font-size: 14px;\r\n    line-height: 1;\r\n\r\n    @media (min-width: map-get($breakpoints, \"lg\")) {\r\n      top: var(--spacing);\r\n      right: var(--spacing);\r\n    }\r\n  }\r\n\r\n  // Spacing for Valid & Invalid badge\r\n  code {\r\n    padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)\r\n      var(--block-spacing-horizontal);\r\n  }\r\n}\r\n\r\n// Color for Valid & Invalid code\r\n[data-theme=\"invalid\"] {\r\n  &:before {\r\n    background: var(--invalid-color);\r\n    content: \"Not so great\";\r\n  }\r\n}\r\n\r\n[data-theme=\"valid\"] {\r\n  &:before {\r\n    background: var(--valid-color);\r\n    content: \"Great\";\r\n  }\r\n}\r\n","/**\r\n * Docs: Modal\r\n */\r\n\r\ndialog.example {\r\n  display: block;\r\n  z-index: inherit;\r\n  position: relative;\r\n  top: inherit;\r\n  right: inherit;\r\n  bottom: inherit;\r\n  left: inherit;\r\n  align-items: inherit;\r\n  justify-content: inherit;\r\n  width: inherit;\r\n  min-width: inherit;\r\n  height: inherit;\r\n  min-height: inherit;\r\n  padding: 0;\r\n  background-color:inherit;\r\n\r\n  article {\r\n    max-width: inherit;\r\n  }\r\n\r\n  &:not([open]),\r\n  &[open=false] {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.dialog-is-open body > button {\r\n  filter: blur(0.125rem);\r\n}","/**\r\n * Docs: Navs\r\n */\r\n\r\nbody > nav {\r\n  --nav-link-spacing-vertical: 1rem;\r\n\r\n  -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n  z-index: 99;\r\n  position: fixed;\r\n  top: 0;\r\n  right: 0;\r\n  left: 0;\r\n  backdrop-filter: saturate(180%) blur(20px);\r\n  background-color: var(--nav-background-color);\r\n  box-shadow: 0px 1px 0 var(--nav-border-color);\r\n\r\n  &.container-fluid {\r\n    padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px));\r\n  }\r\n\r\n  a {\r\n    border-radius: 0;\r\n  }\r\n\r\n  svg {\r\n    vertical-align: text-bottom;\r\n  }\r\n\r\n  // Band & Title\r\n  ul:first-of-type {\r\n    margin-left: calc(var(--spacing) * -1);\r\n\r\n    li {\r\n      padding: 0;\r\n  \r\n      // Brand\r\n      &:first-of-type {\r\n        a {\r\n          display: block;\r\n          margin: 0;\r\n          padding: 0;\r\n          background: var(--h1-color);\r\n          color: var(--nav-logo-color);\r\n  \r\n          svg {\r\n            display: block;\r\n            width: 3.5rem;\r\n            height: 3.5rem;\r\n          }\r\n        }\r\n      }\r\n  \r\n      // Title\r\n      &:nth-of-type(2) {\r\n        display: none;\r\n        margin-left: calc(var(--spacing) * 1.5);\r\n        color: var(--h1-color);\r\n  \r\n        @media (min-width: map-get($breakpoints, \"lg\")) {\r\n          display: inline;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n","/**\r\n * Docs: Theme switcher\r\n */\r\n\r\n.switcher {\r\n  position: fixed;\r\n  right: calc(var(--spacing) / 2 + var(--scrollbar-width, 0px));\r\n  bottom: var(--spacing);\r\n  width: auto;\r\n  margin-bottom: 0;\r\n  padding: 0.75rem;\r\n  border-radius: 2rem;\r\n  box-shadow: var(--card-box-shadow);\r\n  line-height: 1;\r\n  text-align: right;\r\n\r\n  &::after {\r\n    display: inline-block;\r\n    width: 1rem;\r\n    height: 1rem;\r\n    border: 0.15rem solid currentColor;\r\n    border-radius: 50%;\r\n    background: linear-gradient(\r\n      to right,\r\n      currentColor 0%,\r\n      currentColor 50%,\r\n      transparent 50%\r\n    );\r\n    content: \"\";\r\n    vertical-align: bottom;\r\n    transition: transform var(--transition);\r\n  }\r\n\r\n  i {\r\n    display: inline-block;\r\n    max-width: 0;\r\n    padding: 0;\r\n    overflow: hidden;\r\n    font-style: normal;\r\n    font-size: 0.875rem;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  &:hover,\r\n  &:focus {\r\n    max-width: 100%;\r\n    transition: background-color var(--transition),\r\n      border-color var(--transition), color var(--transition),\r\n      box-shadow var(--transition);\r\n  }\r\n\r\n  &:hover {\r\n    &::after {\r\n      transform: rotate(180deg);\r\n    }\r\n\r\n    i {\r\n      max-width: 100%;\r\n      padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);\r\n      transition: max-width var(--transition), padding var(--transition);\r\n    }\r\n  }\r\n\r\n  &:focus {\r\n    box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);\r\n  }\r\n\r\n  @media (min-width: map-get($breakpoints, \"sm\")) {\r\n    right: calc(var(--spacing) + var(--scrollbar-width, 0px));\r\n  }\r\n}\r\n"]}