/*! Sass Fairy v1 | (c) roydukkey | https://sass-fairy.com/license */@layer bootstrap, rk, demo;@layer demo{/*! Sass Fairy v1 | (c) roydukkey | https://sass-fairy.com/license *//*! Sass Fairy v1 | (c) roydukkey | https://sass-fairy.com/license */.color-section{padding:var(--component-padding-vertical) var(--component-padding-horizontal);border-radius:var(--component-radius);border:var(--component-border-width) solid var(--component-border-color)}.color-section h1,.color-section h2,.color-section h3,.color-section h4,.color-section h5,.color-section h6{font:var(--typography-heading-xs)}.demo-palette{display:grid;grid-auto-columns:1fr;grid-auto-flow:row;gap:var(--space-inset-xs)}.demo-palette .row{display:flex;flex-direction:row;flex-wrap:nowrap;margin:0;align-items:center}.demo-palette .row h3{font:var(--typography-heading-xxs);width:7rem;overflow:hidden;text-overflow:ellipsis;margin:0}.demo-palette .row .colors{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;margin:unset;gap:0;width:auto;padding:0;margin:0}.demo-debug{transition-duration:450ms;transition-property:outline-color;outline:1px dashed rgba(0,0,0,0)}.demo-debug>*{transition-duration:450ms;transition-property:outline-color;outline:1px dashed rgba(0,0,0,0)}body.debug .demo-debug{outline:1px dashed red}body.debug .demo-debug>*{outline:1px dashed orange}.dropdown.demo .dropdown-menu{position:static;display:block;max-width:22rem}.ds-product{display:block;max-width:432px}.fake-cart{width:411px;background-color:var(--color-neutral-5);padding:1rem .5rem}.demo-item{background-color:#ccdbee;padding:.25rem .75rem}.layout-teaser{--teaser-bg: var(--color-neutral-2);--teaser-color: var(--color-neutral-10);--teaser-hover-color: var(--color-primary-40);--teaser-active-color: var(--color-primary-60);background-color:var(--teaser-bg);padding:var(--space-inset-sm);border-radius:var(--component-radius);border:var(--component-border-width) solid var(--component-border-color);aspect-ratio:4/3;min-width:7rem}.layout-teaser:hover{--teaser-color: var(--teaser-hover-color)}.layout-teaser.active{--teaser-color: var(--teaser-active-color);pointer-events:none}.layout-teaser .wrapper{display:grid;gap:var(--space-inset-xs);height:100%;pointer-events:none}.layout-teaser .header,.layout-teaser .content,.layout-teaser .sidebar,.layout-teaser .secondary-sidebar{transition-duration:300ms;transition-property:background-color;background-color:var(--teaser-color);border-radius:var(--component-radius);height:100%;width:100%}.layout-teaser .header{grid-area:header}.layout-teaser .sidebar{grid-area:sidebar}.layout-teaser .content{grid-area:content}.layout-teaser .secondary-sidebar{grid-area:secondary-sidebar}.layout-teaser[data-align~=left] .wrapper{max-width:67%;margin-left:0;margin-right:auto}.layout-teaser[data-align~=center] .wrapper{max-width:67%;margin-left:auto;margin-right:auto}.layout-teaser[data-layout~=vertical] .wrapper{grid-template-areas:"header" "content";grid-template-rows:1rem 1fr;grid-template-columns:1fr}.layout-teaser[data-layout~=vertical] .sidebar,.layout-teaser[data-layout~=vertical] .secondary-sidebar{display:none}.layout-teaser[data-layout~=horizontal] .wrapper{grid-template-areas:"sidebar content";grid-template-rows:1fr;grid-template-columns:1rem 1fr}.layout-teaser[data-layout~=horizontal] .header,.layout-teaser[data-layout~=horizontal] .secondary-sidebar{display:none}.layout-teaser[data-layout~=three][data-primary~=header] .wrapper{grid-template-areas:"header header" "sidebar content";grid-template-rows:1rem 1fr;grid-template-columns:1rem 1fr}.layout-teaser[data-layout~=three][data-primary~=sidebar] .wrapper{grid-template-areas:"sidebar header" "sidebar content";grid-template-rows:1rem 1fr;grid-template-columns:1rem 1fr}.layout-teaser[data-layout~=three] .secondary-sidebar{display:none}.layout-teaser[data-layout~=four][data-primary~=header] .wrapper{grid-template-areas:"header header header" "sidebar content secondary-sidebar";grid-template-rows:1rem 1fr;grid-template-columns:1rem 1fr 1rem}.layout-teaser[data-layout~=four][data-primary~=sidebar] .wrapper{grid-template-areas:"sidebar header secondary-sidebar" "sidebar content secondary-sidebar";grid-template-rows:1rem 1fr;grid-template-columns:1rem 1fr 1rem}.dev-space-showcase .visualization{aspect-ratio:1/1;border:1px solid #222;position:relative;display:flex}.dev-space-showcase .visualization::before{position:absolute;content:"";left:0;right:0;top:0;bottom:0;background:repeating-linear-gradient(135deg, #fff, #fff 4px, #eee 4px, #eee 10px)}.dev-space-showcase .visualization .inner{position:relative;height:100%;width:100%}.dev-space-showcase .name{font-size:.75rem;color:#777;margin-top:.5rem}.dev-space-grid{display:grid;grid-template-columns:repeat(6, 1fr);gap:.5rem}.dev-space-inset .inner{background-color:var(--color-secondary-60)}.dev-space-inset .dev-inset-xs .visualization{padding:var(--space-inset-xs)}.dev-space-inset .dev-inset-sm .visualization{padding:var(--space-inset-sm)}.dev-space-inset .dev-inset-md .visualization{padding:var(--space-inset-md)}.dev-space-inset .dev-inset-lg .visualization{padding:var(--space-inset-lg)}.dev-space-inset .dev-inset-xl .visualization{padding:var(--space-inset-xl)}.dev-space-squish .inner{background-color:var(--color-secondary-60)}.dev-space-squish .dev-squish-sm .visualization{padding:var(--space-squish-sm)}.dev-space-squish .dev-squish-md .visualization{padding:var(--space-squish-md)}.dev-space-squish .dev-squish-lg .visualization{padding:var(--space-squish-lg)}.dev-space-stretch .inner{background-color:var(--color-secondary-60)}.dev-space-stretch .dev-stretch-sm .visualization{padding:var(--space-stretch-sm)}.dev-space-stretch .dev-stretch-md .visualization{padding:var(--space-stretch-md)}.dev-space-stack .dev-stack-xxs .inner{background-image:repeating-linear-gradient(to bottom, var(--color-secondary-60), var(--color-secondary-60) 1rem, transparent 1rem, transparent calc(1rem + var(--space-stack-xxs)))}.dev-space-stack .dev-stack-xs .inner{background-image:repeating-linear-gradient(to bottom, var(--color-secondary-60), var(--color-secondary-60) 1rem, transparent 1rem, transparent calc(1rem + var(--space-stack-xs)))}.dev-space-stack .dev-stack-sm .inner{background-image:repeating-linear-gradient(to bottom, var(--color-secondary-60), var(--color-secondary-60) 1rem, transparent 1rem, transparent calc(1rem + var(--space-stack-sm)))}.dev-space-stack .dev-stack-md .inner{background-image:repeating-linear-gradient(to bottom, var(--color-secondary-60), var(--color-secondary-60) 1rem, transparent 1rem, transparent calc(1rem + var(--space-stack-md)))}.dev-space-stack .dev-stack-lg .inner{background-image:repeating-linear-gradient(to bottom, var(--color-secondary-60), var(--color-secondary-60) 1rem, transparent 1rem, transparent calc(1rem + var(--space-stack-lg)))}.dev-space-stack .dev-stack-xl .inner{background-image:repeating-linear-gradient(to bottom, var(--color-secondary-60), var(--color-secondary-60) 1rem, transparent 1rem, transparent calc(1rem + var(--space-stack-xl)))}.dev-space-inline .dev-inline-xxs .inner{background-image:repeating-linear-gradient(to right, var(--color-secondary-60), var(--color-secondary-60) 1rem, transparent 1rem, transparent calc(1rem + var(--space-inline-xxs)))}.dev-space-inline .dev-inline-xs .inner{background-image:repeating-linear-gradient(to right, var(--color-secondary-60), var(--color-secondary-60) 1rem, transparent 1rem, transparent calc(1rem + var(--space-inline-xs)))}.dev-space-inline .dev-inline-sm .inner{background-image:repeating-linear-gradient(to right, var(--color-secondary-60), var(--color-secondary-60) 1rem, transparent 1rem, transparent calc(1rem + var(--space-inline-sm)))}.dev-space-inline .dev-inline-md .inner{background-image:repeating-linear-gradient(to right, var(--color-secondary-60), var(--color-secondary-60) 1rem, transparent 1rem, transparent calc(1rem + var(--space-inline-md)))}.dev-space-inline .dev-inline-lg .inner{background-image:repeating-linear-gradient(to right, var(--color-secondary-60), var(--color-secondary-60) 1rem, transparent 1rem, transparent calc(1rem + var(--space-inline-lg)))}.dev-space-inline .dev-inline-xl .inner{background-image:repeating-linear-gradient(to right, var(--color-secondary-60), var(--color-secondary-60) 1rem, transparent 1rem, transparent calc(1rem + var(--space-inline-xl)))}.demo-typography td{vertical-align:middle}.size-25{font-size:0.125rem}.size-50{font-size:0.25rem}.size-100{font-size:0.5rem}.size-150{font-size:0.75rem}.size-200{font-size:1rem}.size-250{font-size:1.25rem}.size-300{font-size:1.5rem}.size-400{font-size:2rem}.size-500{font-size:4rem}.icon-size-sm{font-size:var(--icon-size-sm)}.icon-size-md{font-size:var(--icon-size-md)}.icon-size-lg{font-size:var(--icon-size-lg)}.demo-hover{pointer-events:none;background-color:var(--hover-bg);color:var(--hover-color);border-color:var(--hover-border-color)}.demo-hover span{text-decoration:underline}.demo-active{background-color:var(--active-bg);color:var(--active-color);border-color:var(--active-border-color);pointer-events:none}.demo-selected{background-color:var(--selected-bg);color:var(--selected-color);border-color:var(--selected-border-color);pointer-events:none}.demo-focus{outline:2px solid var(--focus-color);outline-offset:-1px;pointer-events:none}.demo-table{width:fit-content}.demo-table th,.demo-table td{padding:2px 4px}.demo-table th{font-style:italic;font-weight:400;color:#777;font-size:.75rem;text-align:center}.demo-table th.size{font-weight:500;text-transform:uppercase;white-space:nowrap;padding:1rem;font-style:unset;color:#222}.demo-table tbody th{padding:2px 8px 2px 4px}.demo-table .cg-sm,.demo-table .cg-lg{background-color:#fafafa}.demo-table .cg-start{padding-left:1rem}.demo-table .cg-end{padding-right:1rem}.demo-table tbody tr:first-child td{padding-top:.75rem}.demo-table tbody tr:last-child td{padding-bottom:.75rem}}