:root{--preview-device-size-width: "1240px";--preview-device-size: calc(100% - 24px) ;--preview-device-size-height: "500px";--v-nav-horizontal-justify: space-between}.pattern-layout__body{display:grid;grid-template-rows:80px 1fr auto;min-block-size:100lvh;background-color:#fff}.pattern-layout__main-content{block-size:100%;margin:0;padding-block-start:16px;background-size:12px 12px;display:flex;flex-direction:column}.pattern-page{display:flex;flex-direction:column;block-size:100%}.skipToContent{background:var(--palette-default-surface-highlight);block-size:0;display:flex;grid-area:skip-to-content;justify-content:center;inline-size:100vw;overflow:hidden;z-index:10}.skipToContent:focus-within{block-size:fit-content;padding:16px}.layout__banner--nav{min-block-size:80px;z-index:5;position:relative}.layout__nav--logo{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-inline:auto;gap:4px}.layout__nav--logo svg{flex-shrink:0;inline-size:auto;block-size:100%;max-block-size:18px;overflow:visible}.layout__nav--title{--typography-font-family: var(--typography-body-2-font-family);--typography-font-size: var(--typography-body-2-font-size);--typography-font-weight: var(--typography-body-2-font-weight);--typography-letter-spacing: var(--typography-body-2-letter-spacing);--typography-line-height: var(--typography-body-2-line-height);--typography-text-decoration: var(--typography-body-2-text-decoration);--typography-text-transform: var(--typography-body-2-text-transform);font-family:var(--typography-font-family);font-size:var(--typography-font-size);font-weight:var(--typography-font-weight);letter-spacing:var(--typography-letter-spacing);line-height:var(--typography-line-height);text-decoration:var(--typography-text-decoration);text-transform:var(--typography-text-transform)}.v-nav-app-name{white-space:nowrap}.content{padding:var(--size-responsive-24);overflow-inline:auto}.top-style{padding-inline:24px;flex:0 0 0;border-bottom:1px solid var(--palette-default-border, rgba(0, 0, 0, .1))}.bottom-style{display:flex;flex-direction:column;padding-inline:24px;padding-block-end:16px;background-color:#fcfcfc;background-image:radial-gradient(circle,#cbcbcb 1px,transparent 1px);background-size:12px 12px;flex:1 1}.pattern-actionbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:8px 16px;margin-block-end:16px;background-color:var(--palette-default-surface-2, #f5f5f5)}.varient-selector{inline-size:260px;margin-block:4px}.pattern-actionbar-page-actions{display:flex;align-items:end;justify-content:start;gap:8px;flex-wrap:wrap}.pattern-actionbar-page-actions .code-switcher-controls{margin-block-end:0;gap:8px}.size-controls-inputs{margin-bottom:4px}.device-controls-fieldset{display:flex;gap:8px;align-items:self-end}.size-controls-separator{inline-size:1px;block-size:38px;display:inline-block;border-inline-start:var(--palette-default-border) 1px solid;margin-block-end:4px}@media screen and (max-width: 462px){.size-controls-separator{display:none}}.pattern-actionbar .v-toggle-container{margin-block:4px}.v-toggle-container button[aria-selected=true]{background-color:var(--v-toggle-active-background);color:var(--v-primary, #000);--typography-font-family: var(--typography-label-active-font-family);--typography-font-weight: var(--typography-label-active-font-weight);border-block-end:var(--v-toggle-indicator-size) var(--v-toggle-indicator-style) var(--v-toggle-indicator-color);box-shadow:var(--v-toggle-elevation)}.v-toggle-container .v-toggle.preview{border-inline-end:var(--size-responsive-1) solid var(--palette-default-active)}.pattern-actionbar-page-actions .v-toggle-icon svg{pointer-events:none;user-select:none}.api-toggle-button{margin-block-end:4px}.preview-wrapper{display:block;position:relative;resize:horizontal;inline-size:100%;block-size:100%;max-inline-size:100%;min-block-size:198px;min-inline-size:300px}.pattern-code-box{--v-content-card-background-color: var(--palette-default-surface-1);--v-content-card-border-color: var(--palette-default-border);--v-content-card-color: var(--palette-default-text);block-size:60dvh;display:flex;inline-size:100%;flex-direction:column;overflow:hidden}.preview-area{position:relative;block-size:100%;min-block-size:inherit;display:flex;flex-direction:column}.patterns-preview-container{display:flex;flex-direction:column;block-size:100%;inline-size:100%;flex:1}.patterns-preview-container .library-example{flex:1}.preview-width-handle{inline-size:24px;background-color:var(--palette-default-surface-3);display:grid;place-content:center;position:absolute;inset-block:0;inset-inline-end:0;cursor:ew-resize}.preview-width-handle:hover{background-color:#e3f1fe}.preview-width-handle:active{background-color:#d1e6fe}.preview-width-handle img{pointer-events:none;user-select:none}.preview-width-handle:hover img{filter:brightness(0) saturate(100%) invert(28%) sepia(98%) saturate(7472%) hue-rotate(217deg) brightness(97%) contrast(101%) opacity(1)}.preview-width-handle.preview-width-handle:active img{filter:brightness(0) saturate(100%) invert(17%) sepia(94%) saturate(7472%) hue-rotate(217deg) brightness(97%) contrast(101%) opacity(1)}.dark .preview-width-handle:hover{background-color:#495861}.dark .preview-width-handle:active{background-color:#252c2f}.dark .preview-width-handle img{filter:brightness(0) saturate(100%) invert(94%) sepia(0%) saturate(0%) hue-rotate(0deg)}.dark .preview-width-handle:hover img{filter:brightness(0) saturate(100%) invert(87%) sepia(13%) saturate(749%) hue-rotate(163deg) brightness(101%) contrast(101%) opacity(1)}.dark .preview-width-handle:active img{filter:brightness(0) saturate(100%) invert(77%) sepia(51%) saturate(749%) hue-rotate(163deg) brightness(101%) contrast(101%) opacity(1)}.dark .v-tooltip.v-surface{filter:invert();border:1px solid #ccc}@media screen and (min-width: 1108px){.layout__nav--desktop{display:unset}.layout__banner--nav-button{display:none}.layout__nav--logo{flex-direction:row;justify-content:unset;flex-grow:1;gap:16px}.layout__nav--logo svg{max-block-size:23px}.layout__nav--title{--typography-font-family: var(--typography-headline-3-font-family);--typography-font-size: var(--typography-headline-3-font-size);--typography-font-weight: var(--typography-headline-3-font-weight);--typography-letter-spacing: var(--typography-headline-3-letter-spacing);--typography-line-height: var(--typography-headline-3-line-height);--typography-text-decoration: var(--typography-headline-3-text-decoration);--typography-text-transform: var(--typography-headline-3-text-transform)}.tabs-container{display:block}.bottom-style{padding-block:22px}}.split-panel-container{--v-content-card-background-color: var(--palette-default-surface-1);--v-content-card-border-color: var(--palette-default-border);--v-content-card-color: var(--palette-default-text);display:flex;gap:0;block-size:60dvh;position:relative;align-items:stretch;overflow:hidden}.split-panel-left{min-inline-size:300px;position:relative;overflow-x:hidden;overflow-y:auto}.split-panel-left .code-project-viewer-container{overflow:auto;min-inline-size:inherit}.split-panel-right{min-inline-size:inherit;position:relative;overflow:auto}.split-panel-right.collapsed{inline-size:0;min-inline-size:0;overflow:hidden}.split-panel-right .api-table{overflow:auto;padding:16px;border-start-end-radius:12px;border-end-end-radius:12px}.draggable-overlay{display:block;position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100vw;block-size:100vh;z-index:9999;cursor:col-resize}.preview-width-handle.dynamic-position{inset-inline-end:auto;inline-size:24px}.skeleton-code-switcher-controls{margin-block-end:0}.buttonScrollToTop-pattern{z-index:50;display:flex;justify-content:flex-end;margin-inline-end:24px;position:sticky;margin-block-start:-55px;justify-self:end;height:38px}@media screen and (max-width: 768px){.buttonScrollToTop-pattern{inset-block-end:20px}}.split-panel-container .preview-width-handle{z-index:5}.split-panel-container .preview-width-handle:hover img,.split-panel-container .preview-width-handle:hover div{opacity:1!important}.split-panel-container .draggable-overlay{cursor:col-resize}.top-style .v-link{display:inline-flex}.skeleton-code-switcher-controls{margin-block-end:8px}.width-flag{position:fixed;top:100px;right:24px;width:360px;background:#ffffffe6;border-bottom:1px solid rgba(0,0,0,.1);padding:8px 16px;z-index:1000}@media screen and (min-width: 1108px){.bottom-style{padding-block:22px}.size-controls-inputs{margin-block:4px;width:118px}.preview-width-handle{width:auto}}.pattern-tabs .v-tab{padding-block-end:0}.pattern-tabs .v-tab button{padding-block:14px;block-size:46px}.pattern-tabs .v-tab .v-button[aria-selected=true]{background-color:#fff}