From 36d968e9e54d4fb1d0bc98d7fc0c4c922322b629 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=2E=20Nagy=20Gerg=C5=91?= Date: Mon, 22 Jan 2024 14:10:56 +0100 Subject: [PATCH] wip --- package.json | 2 +- public/build/assets/app-2339afd5.js | 1 + public/build/assets/app-8c4d86f4.js | 1 - .../{app-34baaef9.js => app-b7fc6e7f.js} | 0 public/build/assets/app-d00ef1bd.css | 1 - public/build/assets/app-dba7d4c7.css | 1 + public/build/assets/chart-06e0bb8f.js | 1 + public/build/assets/chart-ca6a94d4.js | 1 - public/build/assets/dropdown-06e0bb8f.js | 1 + public/build/assets/dropdown-ca6a94d4.js | 1 - public/build/assets/editor-06e0bb8f.js | 1 + public/build/assets/editor-ca6a94d4.js | 1 - public/build/assets/media-manager-06e0bb8f.js | 1 + public/build/assets/media-manager-ca6a94d4.js | 1 - public/build/assets/repeater-06e0bb8f.js | 1 + public/build/assets/repeater-ca6a94d4.js | 1 - public/build/assets/table-06e0bb8f.js | 1 + public/build/assets/table-ca6a94d4.js | 1 - public/build/manifest.json | 20 +- resources/sass/app.scss | 4 + resources/sass/component/_alert.scss | 100 +++--- resources/sass/component/_auth-form.scss | 26 +- .../sass/component/_block-navigation.scss | 167 +++++----- .../sass/component/_breadcrumb-list.scss | 67 ++-- resources/sass/component/_card.scss | 169 +++++----- resources/sass/component/_context-menu.scss | 106 +++---- resources/sass/component/_data-group.scss | 16 +- resources/sass/component/_data-table.scss | 156 ++++----- resources/sass/component/_index.scss | 1 + resources/sass/component/_media-uploader.scss | 162 +++++----- resources/sass/component/_modal.scss | 295 +++++++++--------- resources/sass/component/_notification.scss | 234 ++++++++------ resources/sass/component/_open-search.scss | 20 +- resources/sass/component/_or-separator.scss | 26 +- resources/sass/component/_pagination.scss | 24 +- resources/sass/component/_preloader.scss | 34 +- resources/sass/component/_prism.scss | 87 +++--- resources/sass/component/_range-group.scss | 42 +-- resources/sass/component/_search-modal.scss | 37 +++ resources/sass/component/_skip-link.scss | 10 +- resources/sass/component/_theme-switcher.scss | 28 +- resources/sass/component/_user-menu.scss | 82 ++--- resources/sass/component/_widget.scss | 170 +++++----- resources/sass/component/badge/_status.scss | 36 +-- resources/sass/component/badge/_trending.scss | 44 +-- .../sass/component/form/_btn-dropdown.scss | 6 +- resources/sass/component/form/_combobox.scss | 190 +++++------ resources/sass/component/form/_editor.scss | 96 +++--- .../sass/component/form/_file-group.scss | 156 ++++----- resources/sass/component/form/_file-list.scss | 102 +++--- resources/sass/component/form/_repeater.scss | 90 +++--- .../sass/component/form/_search-form.scss | 86 ++--- resources/sass/config/_config.scss | 225 ++++++------- resources/sass/config/_dark-colors.scss | 268 ++++++++-------- resources/sass/config/_dark-mode.scss | 24 +- resources/sass/config/_font.scss | 32 +- resources/sass/extend/_btn.scss | 52 ++- resources/sass/extend/_chart.scss | 30 +- resources/sass/extend/_form.scss | 22 +- resources/sass/extend/_progress.scss | 60 ++-- resources/sass/helper/_display.scss | 24 +- resources/sass/helper/_margin.scss | 2 +- resources/sass/layout/_auth.scss | 126 ++++---- resources/sass/layout/_container.scss | 24 +- resources/sass/layout/_main.scss | 48 +-- resources/sass/layout/_row.scss | 44 +-- resources/sass/section/_actions.scss | 22 +- resources/sass/section/_body.scss | 6 +- resources/sass/section/_footer.scss | 10 +- resources/sass/section/_header.scss | 90 +++--- resources/sass/section/_heading.scss | 60 ++-- resources/sass/section/_sidebar.scss | 74 ++--- .../components/layout/notifications.blade.php | 35 ++- resources/views/table/column.blade.php | 49 +-- yarn.lock | 8 +- 75 files changed, 2195 insertions(+), 2047 deletions(-) create mode 100644 public/build/assets/app-2339afd5.js delete mode 100644 public/build/assets/app-8c4d86f4.js rename public/build/assets/{app-34baaef9.js => app-b7fc6e7f.js} (100%) delete mode 100644 public/build/assets/app-d00ef1bd.css create mode 100644 public/build/assets/app-dba7d4c7.css create mode 100644 public/build/assets/chart-06e0bb8f.js delete mode 100644 public/build/assets/chart-ca6a94d4.js create mode 100644 public/build/assets/dropdown-06e0bb8f.js delete mode 100644 public/build/assets/dropdown-ca6a94d4.js create mode 100644 public/build/assets/editor-06e0bb8f.js delete mode 100644 public/build/assets/editor-ca6a94d4.js create mode 100644 public/build/assets/media-manager-06e0bb8f.js delete mode 100644 public/build/assets/media-manager-ca6a94d4.js create mode 100644 public/build/assets/repeater-06e0bb8f.js delete mode 100644 public/build/assets/repeater-ca6a94d4.js create mode 100644 public/build/assets/table-06e0bb8f.js delete mode 100644 public/build/assets/table-ca6a94d4.js create mode 100644 resources/sass/component/_search-modal.scss diff --git a/package.json b/package.json index 641d3ec3d..094e684e0 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "resolve-url-loader": "^3.1.2", "sass": "^1.32.4", "sass-loader": "^8.0.0", - "sprucecss": "^2.2.1", + "sprucecss": "^2.3.1", "tiptap": "^1.32.2", "vite": "^4.3.0" }, diff --git a/public/build/assets/app-2339afd5.js b/public/build/assets/app-2339afd5.js new file mode 100644 index 000000000..ea70fc6cc --- /dev/null +++ b/public/build/assets/app-2339afd5.js @@ -0,0 +1 @@ +import{a as f}from"./app-b7fc6e7f.js";export{f as default}; diff --git a/public/build/assets/app-8c4d86f4.js b/public/build/assets/app-8c4d86f4.js deleted file mode 100644 index c6e95acdc..000000000 --- a/public/build/assets/app-8c4d86f4.js +++ /dev/null @@ -1 +0,0 @@ -import{a as f}from"./app-34baaef9.js";export{f as default}; diff --git a/public/build/assets/app-34baaef9.js b/public/build/assets/app-b7fc6e7f.js similarity index 100% rename from public/build/assets/app-34baaef9.js rename to public/build/assets/app-b7fc6e7f.js diff --git a/public/build/assets/app-d00ef1bd.css b/public/build/assets/app-d00ef1bd.css deleted file mode 100644 index 02fd60215..000000000 --- a/public/build/assets/app-d00ef1bd.css +++ /dev/null @@ -1 +0,0 @@ -@font-face{font-display:swap;font-family:Manrope;font-style:normal;font-weight:400;src:url(/vendor/root/fonts/manrope-v14-latin-regular.woff2) format("woff2")}@font-face{font-display:swap;font-family:Manrope;font-style:normal;font-weight:500;src:url(/vendor/root/fonts/manrope-v14-latin-500.woff2) format("woff2")}@font-face{font-display:swap;font-family:Manrope;font-style:normal;font-weight:600;src:url(/vendor/root/fonts/manrope-v14-latin-600.woff2) format("woff2")}@font-face{font-display:swap;font-family:Manrope;font-style:normal;font-weight:700;src:url(/vendor/root/fonts/manrope-v14-latin-800.woff2) format("woff2")}@font-face{font-display:swap;font-family:Open Sans;font-style:normal;font-weight:400;src:url(/vendor/root/fonts/open-sans-v35-latin-regular.woff2) format("woff2")}@font-face{font-display:swap;font-family:Open Sans;font-style:normal;font-weight:700;src:url(/vendor/root/fonts/open-sans-v35-latin-700.woff2) format("woff2")}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;block-size:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-inline-size:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{block-size:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--root-alert-color-danger: hsl(0, 71%, 51%);--root-alert-color-info: hsl(195, 100%, 42%);--root-alert-color-success: hsl(150, 100%, 33%);--root-alert-color-warning: hsl(48, 89%, 55%)}:root{--root-base-color-background: hsl(0, 0%, 100%);--root-base-color-blockquote-border: hsl(214, 98%, 49%);--root-base-color-border: hsl(215, 100%, 96%);--root-base-color-code-background: #f0f6ff;--root-base-color-code-foreground: hsl(205, 100%, 2%);--root-base-color-heading: hsl(205, 100%, 2%);--root-base-color-link: hsl(214, 98%, 49%);--root-base-color-link-hover: #0257c6;--root-base-color-mark-background: hsl(50, 100%, 80%);--root-base-color-mark-foreground: hsl(205, 100%, 2%);--root-base-color-marker: hsl(214, 98%, 49%);--root-base-color-primary: hsl(214, 98%, 49%);--root-base-color-secondary: hsl(160, 89%, 46%);--root-base-color-text: hsl(208, 9%, 42%);--root-base-color-primary-lightest: hsl(210, 60%, 98%)}:root{--root-btn-color-primary-background: hsl(214, 98%, 49%);--root-btn-color-primary-background-hover: #0256c5;--root-btn-color-primary-foreground: hsl(0, 0%, 100%);--root-btn-color-primary-shadow: #aed1fe;--root-btn-color-secondary-background: hsl(160, 89%, 46%);--root-btn-color-secondary-background-hover: #0aae77;--root-btn-color-secondary-foreground: hsl(0, 0%, 100%);--root-btn-color-secondary-shadow: #a3fadd;--root-btn-color-dark-background: hsl(205, 100%, 2%);--root-btn-color-dark-background-hover: hsl(205, 100%, 5%);--root-btn-color-dark-foreground: hsl(0, 0%, 100%);--root-btn-color-dark-outline-border: hsl(260, 4%, 70%);--root-btn-color-dark-outline-foreground: hsl(205, 100%, 2%);--root-btn-color-dark-outline-foreground-hover: hsl(0, 0%, 100%);--root-btn-color-dark-outline-background-hover: hsl(205, 100%, 2%);--root-btn-color-dark-outline-focus-ring: hsl(205, 100%, 2%);--root-btn-color-light-background: hsl(210, 60%, 98%);--root-btn-color-light-background-hover: hsl(214, 98%, 49%);--root-btn-color-light-focus-ring: hsl(214, 98%, 49%);--root-btn-color-light-foreground: hsl(214, 98%, 49%);--root-btn-color-light-foreground-hover: hsl(0, 0%, 100%);--root-btn-color-delete-background: #fceeee;--root-btn-color-delete-background-hover: hsl(0, 71%, 51%);--root-btn-color-delete-focus-ring: hsl(0, 71%, 51%);--root-btn-color-delete-foreground: hsl(0, 71%, 51%);--root-btn-color-delete-foreground-hover: hsl(0, 0%, 100%);--root-btn-color-primary-outline-foreground: hsl(214, 98%, 49%)}:root{--root-form-color-background: hsl(0, 0%, 100%);--root-form-color-background-disabled: hsl(0, 0%, 95%);--root-form-color-border: hsl(260, 4%, 75%);--root-form-color-border-disabled: hsl(215, 63%, 93%);--root-form-color-border-focus: hsl(214, 98%, 49%);--root-form-color-check-background: hsl(214, 98%, 49%);--root-form-color-check-focus-ring: hsl(214, 98%, 49%);--root-form-color-check-foreground: hsl(0, 0%, 100%);--root-form-color-group-label-background: hsl(210, 60%, 98%);--root-form-color-group-label-foreground: hsl(208, 9%, 42%);--root-form-color-invalid: hsl(0, 71%, 51%);--root-form-color-invalid-focus-ring: rgba(219, 41, 41, .25);--root-form-color-label: hsl(205, 100%, 2%);--root-form-color-legend: hsl(205, 100%, 2%);--root-form-color-placeholder: hsl(208, 7%, 40%);--root-form-color-range-thumb-background: hsl(214, 98%, 49%);--root-form-color-range-thumb-focus-ring: hsl(214, 98%, 49%);--root-form-color-range-track-background: hsl(215, 63%, 93%);--root-form-color-ring-focus: rgba(2, 109, 247, .25);--root-form-color-select-foreground: hsl(205, 100%, 2%);--root-form-color-text: hsl(208, 9%, 42%);--root-form-color-valid: hsl(150, 100%, 33%);--root-form-color-valid-focus-ring: rgba(0, 168, 84, .25)}:root{--root-selection-color-foreground: hsl(0, 0%, 100%);--root-selection-color-background: hsl(214, 98%, 49%)}:root{--root-scrollbar-color-thumb-background: hsla(0, 0%, 0%, .15);--root-scrollbar-color-thumb-background-hover: hsla(0, 0%, 0%, .25);--root-scrollbar-color-track-background: hsla(0, 0%, 0%, .05)}:root{--root-table-color-border: hsl(215, 63%, 93%);--root-table-color-caption: hsl(208, 9%, 42%);--root-table-color-heading: hsl(205, 100%, 2%);--root-table-color-hover: hsl(210, 60%, 98%);--root-table-color-stripe: hsl(210, 60%, 98%);--root-table-color-text: hsl(208, 9%, 42%)}:root{--root-breadcrumb-color-separator: hsl(0, 0%, 80%)}:root{--root-combobox-color-item-background: hsl(210, 60%, 98%);--root-combobox-color-item-foreground: hsl(214, 98%, 49%)}:root{--root-data-table-color-icon: hsl(0, 0%, 80%)}:root{--root-header-color-background: hsla(0, 0%, 100%, .95)}:root{--root-navigation-color-arrow: hsla(0, 0%, 0%, .15)}:root{--root-main-color-background: hsl(210, 60%, 98%)}:root{--root-media-color-background: hsl(210, 60%, 98%);--root-media-color-dropzone-background: hsla(214, 98%, 49%, .75);--root-media-color-dropzone-border: hsl(214, 98%, 40%);--root-media-color-icon: hsl(214, 98%, 49%)}:root{--root-modal-color-background: hsla(210, 60%, 98%, .9)}:root{--root-search-color-icon: hsla(229, 26%, 48%, .25)}:root{--root-prism-color-color: hsl(243, 14%, 29%);--root-prism-color-background: hsl(0, 0%, 98%);--root-prism-color-comment: hsl(225, 14%, 46%);--root-prism-color-punctuation: hsl(279, 50%, 53%);--root-prism-color-namespace: hsl(173, 100%, 24%);--root-prism-color-deleted: hsla(1, 83%, 63%, .56);--root-prism-color-boolean: hsl(0, 44%, 53%);--root-prism-color-number: hsl(315, 90%, 35%);--root-prism-color-constant: hsl(221, 57%, 52%);--root-prism-color-class-name: hsl(0, 0%, 7%);--root-prism-color-regex: hsl(1, 48%, 59%)}:root{--root-widget-color-icon-background: #f5f9ff}:root{--root-font-family-base: Open Sans, sans-serif;--root-font-family-cursive: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--root-font-family-heading: Manrope, sans-serif;--root-font-size-base: .938rem;--root-font-size-lead: clamp(1.15rem, 2vw, 1.35rem);--root-font-size-lg: 1.125rem;--root-font-size-ratio: 1.25;--root-font-size-sm: .875rem;--root-font-weight-heading: 600;--root-inline-border-radius: .45rem;--root-inline-padding: .1em .3em;--root-line-height-base: 1.8;--root-line-height-heading:calc(4px + 2ex);--root-line-height-lg: 1.8;--root-line-height-md: 1.5;--root-line-height-sm: 1.2;--root-border-radius-lg: .725rem;--root-border-radius-sm: .45rem;--root-container-inline-size: 84rem;--root-page-margin: 2cm;--root-hidden-elements: header, footer, aside, nav, form, iframe, [class^="aspect-ratio"]}@media (prefers-reduced-motion: no-preference){:root{--root-duration: .15s;--root-timing-function: ease-in-out}}.sr-only{block-size:1px!important;border:0!important;clip:rect(0,0,0,0)!important;inline-size:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important}[tabindex="-1"]:focus{outline:none!important}::selection{background-color:var(--root-selection-color-background);color:var(--root-selection-color-foreground);text-shadow:none}html{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}*,:before,:after{box-sizing:inherit}body{background:var(--root-base-color-background);color:var(--root-base-color-text)}a{color:var(--root-base-color-link);text-decoration:underline;transition-duration:var(--root-duration);transition-property:color;transition-timing-function:var(--root-timing-function)}a:hover{color:var(--root-base-color-link-hover)}button{color:inherit}a,button{touch-action:manipulation}hr{border:0;border-block-start:1px solid var(--root-base-color-border)}img{block-size:auto;display:block;max-inline-size:100%;-webkit-user-select:none;user-select:none}iframe{block-size:100%;display:block;inline-size:100%}figure{margin-inline:0}figure figcaption{margin-block-start:.5rem;text-align:center}.table-responsive{--inline-size: 40rem;-webkit-overflow-scrolling:touch;overflow-x:auto}.table-responsive table{min-inline-size:var(--inline-size)}.table{--root-line-height: 1.5;--root-padding: 1rem;--root-responsive-inline-size: 40rem;border-collapse:collapse;color:var(--root-table-color-text);inline-size:100%}.table caption{color:var(--root-table-color-caption);margin-block-end:1rem}.table th,.table td{border-block-end:1px solid var(--root-table-color-border);line-height:var(--root-line-height);padding:var(--root-padding)}.table th{color:var(--root-table-color-heading);text-align:inherit;text-align:-webkit-match-parent}.table--striped>tbody>tr:nth-child(odd){background-color:var(--root-table-color-stripe)}.table--hover>tbody>tr:hover{background:var(--root-table-color-hover)}.table--clear-border th,.table--clear-border td{border:0}.table--in-line th:first-child,.table--in-line td:first-child{padding-inline-start:0}.table--in-line th:last-child,.table--in-line td:last-child{padding-inline-end:0}.table--sm{--root-padding: .5rem}.table--sm th,.table--sm td{padding:var(--root-padding)}.table--rounded th:first-child,.table--rounded td:first-child{border-end-start-radius:var(--root-border-radius-sm);border-start-start-radius:var(--root-border-radius-sm)}.table--rounded th:last-child,.table--rounded td:last-child{border-end-end-radius:var(--root-border-radius-sm);border-start-end-radius:var(--root-border-radius-sm)}html{-webkit-tap-highlight-color:hsla(0,0%,0%,0)}body{font-family:var(--root-font-family-base);font-size:var(--root-font-size-base);line-height:var(--root-line-height-base)}p,li,h1,h2,h3,h4,h5,h6{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{color:var(--root-base-color-heading);font-family:var(--root-font-family-heading);font-weight:var(--root-font-weight-heading);line-height:var(--root-line-height-heading)}h1{font-size:clamp(1.9465332031rem,2vw + 1rem,2.2900390625rem)}h2{font-size:clamp(1.5572265625rem,2vw + 1rem,1.83203125rem)}h3{font-size:clamp(1.24578125rem,2vw + 1rem,1.465625rem)}h4{font-size:clamp(.996625rem,2vw + 1rem,1.1725rem)}h5,h6{font-size:.938rem}ul,ol{list-style-position:inside}ul>*,ol>*{margin-block-end:0;margin-block-start:0}ul>*+*,ol>*+*{margin-block-start:.25rem}ul li,ol li{list-style-position:outside}ul li::marker,ol li::marker{color:var(--root-base-color-marker)}li>ul,li>ol{margin-block-start:.25rem}dl dt{color:var(--root-base-color-heading);font-weight:700}dl dd{margin:0}dl dd+dt{margin-block-start:1rem}.quote{border-inline-start:.5rem solid var(--root-base-color-blockquote-border);padding-inline-start:1.5rem}.quote>*{margin-block-end:0;margin-block-start:0}.quote>*+*{margin-block-start:.5rem}.quote blockquote{border-inline-start:0;padding-inline-start:0}.quote figcaption{text-align:start}blockquote{border-inline-start:.5rem solid var(--root-base-color-blockquote-border);margin-inline-start:0;padding-inline-start:1.5rem}blockquote>*{margin-block-end:0;margin-block-start:0}blockquote>*+*{margin-block-start:.5rem}abbr[title]{border-block-end:1px dotted;cursor:help;text-decoration:none}mark{background-color:var(--root-base-color-mark-background);border-radius:var(--root-inline-border-radius);color:var(--root-base-color-mark-foreground);padding:var(--root-inline-padding)}code,kbd,samp{background-color:var(--root-base-color-code-background);border-radius:var(--root-inline-border-radius);color:var(--root-base-color-code-foreground);padding:var(--root-inline-padding)}.lead{font-size:var(--root-font-size-lead)}.hidden,[hidden]{display:none!important}.h1{font-size:clamp(1.9465332031rem,2vw + 1rem,2.2900390625rem)}.h2{font-size:clamp(1.5572265625rem,2vw + 1rem,1.83203125rem)}.h3{font-size:clamp(1.24578125rem,2vw + 1rem,1.465625rem)}.h4{font-size:clamp(.996625rem,2vw + 1rem,1.1725rem)}.h5,.h6{font-size:.938rem}.btn{--root-border-radius: .45rem;--root-border-width: 1px;--root-font-family: Manrope, sans-serif;--root-font-size: .938rem;--root-font-weight: 600;--root-gap: .5rem;--root-icon-padding: .75em;--root-icon-size: 1em;--root-padding: .75em 1em;--root-shadow-size: .25rem;align-items:center;border-radius:var(--root-border-radius);border-style:solid;border-width:var(--root-border-width);cursor:pointer;display:inline-flex;font-family:var(--root-font-family);font-size:var(--root-font-size);font-weight:var(--root-font-weight);gap:var(--root-gap);justify-content:center;line-height:1;padding:var(--root-padding);text-align:start;text-decoration:none;transition-duration:var(--root-duration);transition-property:background-color,border-color,box-shadow,color;transition-timing-function:var(--root-timing-function)}.btn:focus{outline-color:transparent;outline-style:solid}.btn:disabled{opacity:.5;pointer-events:none}.btn--icon,.btn--icon.btn--sm,.btn--icon.btn--lg{padding:var(--root-icon-padding)}.btn__icon{block-size:var(--root-icon-size);flex-shrink:0;inline-size:var(--root-icon-size);pointer-events:none}.btn__icon--sm{block-size:var(--root-icon-size);inline-size:var(--root-icon-size)}.btn--sm{--root-font-size: .8rem;--root-gap: .25rem;--root-icon-padding: .5em;--root-icon-size: .8rem;--root-padding: .5em .75em;font-size:var(--root-font-size);gap:var(--root-gap);padding:var(--root-padding)}.btn--lg{--root-font-size: 1rem;--root-gap: .5rem;--root-icon-padding: .9em;--root-padding: .9em 1.15em}.btn--block{inline-size:100%}.btn--primary{background-color:var(--root-btn-color-primary-background);border-color:var(--root-btn-color-primary-background);color:var(--root-btn-color-primary-foreground)}.btn--primary:focus-visible{outline:2px solid var(--root-btn-color-primary-background);outline-offset:2px}.btn--primary:hover{background-color:var(--root-btn-color-primary-background-hover);border-color:var(--root-btn-color-primary-background-hover);color:var(--root-btn-color-primary-foreground)}.btn--primary-shadow{box-shadow:0 .55em 1em -.2em var(--root-btn-color-primary-shadow),0 .15em .35em -.185em var(--root-btn-color-primary-shadow)}.btn--secondary{background-color:var(--root-btn-color-secondary-background);border-color:var(--root-btn-color-secondary-background);color:var(--root-btn-color-secondary-foreground)}.btn--secondary:focus-visible{outline:2px solid var(--root-btn-color-secondary-background);outline-offset:2px}.btn--secondary:hover{background-color:var(--root-btn-color-secondary-background-hover);border-color:var(--root-btn-color-secondary-background-hover);color:var(--root-btn-color-secondary-foreground)}.btn--secondary-shadow{box-shadow:0 .55em 1em -.2em var(--root-btn-color-secondary-shadow),0 .15em .35em -.185em var(--root-btn-color-secondary-shadow)}.btn--outline-primary{background-color:transparent;border-color:var(--root-btn-color-primary-background);color:var(--root-btn-color-primary-outline-foreground)}.btn--outline-primary:focus-visible{outline:2px solid var(--root-btn-color-primary-background);outline-offset:2px}.btn--outline-primary:hover{background-color:var(--root-btn-color-primary-background);border-color:var(--root-btn-color-primary-background);color:var(--root-btn-color-primary-foreground)}.btn--outline-secondary{background-color:transparent;border-color:var(--root-btn-color-secondary-background);color:var(--root-btn-color-secondary-background)}.btn--outline-secondary:focus-visible{outline:2px solid var(--root-btn-color-secondary-background);outline-offset:2px}.btn--outline-secondary:hover{background-color:var(--root-btn-color-secondary-background);border-color:var(--root-btn-color-secondary-background);color:var(--root-btn-color-secondary-foreground)}.form-file::file-selector-button{--root-border-radius: .45rem;--root-border-width: 1px;--root-font-family: Manrope, sans-serif;--root-font-size: .938rem;--root-font-weight: 600;--root-gap: .5rem;--root-icon-padding: .75em;--root-icon-size: 1em;--root-padding: .75em 1em;--root-shadow-size: .25rem;align-items:center;border-radius:var(--root-border-radius);border-style:solid;border-width:var(--root-border-width);cursor:pointer;display:inline-flex;font-family:var(--root-font-family);font-size:var(--root-font-size);font-weight:var(--root-font-weight);gap:var(--root-gap);justify-content:center;line-height:1;padding:var(--root-padding);text-align:start;text-decoration:none;transition-duration:var(--root-duration);transition-property:background-color,border-color,box-shadow,color;transition-timing-function:var(--root-timing-function)}.form-file:focus{outline-color:transparent;outline-style:solid}.form-file:disabled{opacity:.5;pointer-events:none}.form-file--sm::file-selector-button{--root-font-size: .8rem;--root-gap: .25rem;--root-icon-padding: .5em;--root-icon-size: .8rem;--root-padding: .5em .75em;font-size:var(--root-font-size);gap:var(--root-gap);padding:var(--root-padding)}.form-file--lg::file-selector-button{--root-font-size: 1rem;--root-gap: .5rem;--root-icon-padding: .9em;--root-padding: .9em 1.15em}.form-file--block::file-selector-button{inline-size:100%}.form-file{display:block}.form-file:focus{outline:revert}.form-file:focus-within::file-selector-button{background-color:var(--root-btn-color-primary-background-hover)}.form-file::file-selector-button{background-color:var(--root-btn-color-primary-background);border-color:var(--root-btn-color-primary-background);color:var(--root-btn-color-primary-foreground);margin-inline-end:1rem}.form-file::file-selector-button:hover{background-color:var(--root-btn-color-primary-background-hover);border-color:var(--root-btn-color-primary-background-hover);color:var(--root-btn-color-primary-foreground)}.form-file::file-selector-button-shadow{box-shadow:0 .55em 1em -.2em var(--root-btn-color-primary-shadow),0 .15em .35em -.185em var(--root-btn-color-primary-shadow)}.form-label{color:var(--root-form-color-label);font-family:Manrope,sans-serif;font-weight:600;line-height:1.5;text-align:start}.form-control{--webkit-date-line-height: 1.375;--root-border-radius: .45rem;--root-border-width: 1px;--root-font-size: .938rem;--root-line-height: 1.5;--root-padding: .5em .75em;--root-textarea-block-size: 6rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--root-form-color-background);border:var(--root-border-width) solid var(--root-form-color-border);border-radius:var(--root-border-radius);box-sizing:border-box;color:var(--root-form-color-text);display:block;font-size:var(--root-font-size);inline-size:100%;line-height:var(--root-line-height);padding:var(--root-padding);transition-duration:var(--root-duration);transition-property:border,box-shadow;transition-timing-function:var(--root-timing-function)}.form-control::placeholder{color:var(--root-form-color-placeholder)}.form-control::-webkit-datetime-edit{line-height:var(--webkit-date-line-height)}.form-control:focus{border-color:var(--root-form-color-border-focus);box-shadow:0 0 0 .25rem var(--root-form-color-ring-focus);outline:2px solid transparent}.form-control[type=color]{--root-aspect-ratio: 1;--root-block-size: 100%;--root-inline-size: 2.625rem;--root-padding: .5em;aspect-ratio:var(--root-aspect-ratio);block-size:var(--root-block-size);inline-size:var(--root-inline-size);padding:var(--root-padding)}.form-control[type=color]::-webkit-color-swatch-wrapper{padding:0}.form-control[type=color]::-moz-color-swatch{border:0;border-radius:var(--root-border-radius)}.form-control[type=color]::-webkit-color-swatch{border:0;border-radius:var(--root-border-radius)}.form-control[disabled],.form-control[disabled=true]{background-color:var(--root-form-color-background-disabled);border-color:var(--root-form-color-border-disabled);cursor:not-allowed}textarea.form-control{block-size:var(--root-textarea-block-size);min-block-size:var(--root-textarea-block-size);resize:vertical}.form-control--valid,.form-control--invalid{background-position:center right .5em;background-repeat:no-repeat;background-size:1.25em auto;padding-inline-end:2em}html[dir=rtl] .form-control--valid,html[dir=rtl] .form-control--invalid{background-position:center left .5em}.form-control--valid{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"%3e%3cpath d="M12,2c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm0,1.667c4.599,-0 8.333,3.734 8.333,8.333c0,4.599 -3.734,8.333 -8.333,8.333c-4.599,0 -8.333,-3.734 -8.333,-8.333c-0,-4.599 3.734,-8.333 8.333,-8.333Zm-1.476,10.182l-2.984,-2.984c-0.065,-0.065 -0.17,-0.065 -0.235,0l-0.943,0.943c-0.065,0.065 -0.065,0.171 -0,0.236l4.043,4.042c0.033,0.033 0.076,0.05 0.119,0.049c0.044,0.001 0.087,-0.016 0.12,-0.049l6.994,-6.994c0.065,-0.065 0.065,-0.17 0,-0.235l-0.943,-0.943c-0.065,-0.065 -0.17,-0.065 -0.235,-0l-5.936,5.935Z" style="fill:hsl%28150, 100%, 33%%29;"/%3e%3c/svg%3e');border-color:var(--root-alert-color-success)}.form-control--valid:focus{border-color:var(--root-form-color-valid);box-shadow:0 0 0 .25rem var(--root-form-color-valid-focus-ring);outline:2px solid transparent}.form-control--invalid{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"%3e%3cpath d="M12,2c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm0,1.667c4.599,-0 8.333,3.734 8.333,8.333c0,4.599 -3.734,8.333 -8.333,8.333c-4.599,0 -8.333,-3.734 -8.333,-8.333c-0,-4.599 3.734,-8.333 8.333,-8.333Zm0.813,11.649c-0,-0.081 -0.065,-0.146 -0.146,-0.146l-1.334,0c-0.081,0 -0.146,0.065 -0.146,0.146l0,1.169c0,0.08 0.065,0.146 0.146,0.146l1.334,-0c0.081,-0 0.146,-0.066 0.146,-0.146l-0,-1.169Zm-0,-7.784c-0,-0.09 -0.073,-0.163 -0.163,-0.163l-1.3,0c-0.09,0 -0.163,0.073 -0.163,0.163l0,6.351c0,0.09 0.073,0.163 0.163,0.163l1.3,-0c0.09,-0 0.163,-0.073 0.163,-0.163l-0,-6.351Z" style="fill:hsl%280, 71%, 51%%29;"/%3e%3c/svg%3e');border-color:var(--root-alert-color-danger)}.form-control--invalid:focus{border-color:var(--root-form-color-invalid);box-shadow:0 0 0 .25rem var(--root-form-color-invalid-focus-ring);outline:2px solid transparent}.form-control--sm{--webkit-date-line-height: 1.36;--root-border-radius: .35em;--root-padding: .1em .45em}.form-control--sm[type=color]{--root-aspect-ratio: 1;--root-block-size: 100%;--root-inline-size: 1.925rem;--root-padding: .25em}.form-control--lg{--webkit-date-line-height: 1.387;--root-padding: .65em 1em}.form-control--lg[type=color]{--root-aspect-ratio: 1;--root-block-size: 100%;--root-inline-size: 3.204rem;--root-padding: .5em}select.form-control:not([multiple]):not([size]){background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.507l-3.816,-3.815c-0.171,-0.172 -0.45,-0.172 -0.622,-0l-0.933,0.933c-0.172,0.172 -0.172,0.451 0,0.623l5.06,5.06c0.172,0.172 0.45,0.172 0.622,0l5.06,-5.06c0.172,-0.172 0.172,-0.451 -0,-0.623l-0.933,-0.933c-0.172,-0.172 -0.451,-0.172 -0.622,-0l-3.816,3.815Z" style="fill:hsl%28205, 100%, 2%%29;"/%3e%3c/svg%3e');background-position:center right .5em;background-repeat:no-repeat;background-size:1.25em auto;padding-inline-end:2em}html[dir=rtl] select.form-control:not([multiple]):not([size]){background-position:center left .5em}.form-check{--root-border-radius: .45rem;--root-border-width: 1px;--root-font-size: 1.125rem;--root-font-weight: 400;--root-line-height: 1.5;--root-margin-block: .1em;--root-vertical-alignment: center;align-items:var(--root-vertical-alignment);display:inline-flex;gap:.5rem}.form-check--vertical-center{align-items:center}.form-check--vertical-start{align-items:flex-start}.form-check--sm{--root-border-radius: .35em;--root-padding: .1em .45em}.form-check--sm .form-check__control{font-size:var(--root-font-size)}.form-check--lg{--root-padding: .65em 1em}.form-check__control{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--root-form-color-background);background-position:center;background-repeat:no-repeat;background-size:contain;block-size:1em;border:var(--root-border-width) solid var(--root-form-color-border);flex-shrink:0;font-size:var(--root-font-size);font-weight:var(--root-font-weight);inline-size:1em;line-height:1;margin-block:var(--root-margin-block);transition-duration:var(--root-duration);transition-property:border,box-shadow;transition-timing-function:var(--root-timing-function)}.form-check__control[type=radio]{border-radius:50%}.form-check__control[type=checkbox]{border-radius:var(--root-border-radius)}.form-check__control:focus-visible{outline:2px solid var(--root-form-color-check-focus-ring);outline-offset:2px}.form-check__control:checked{background-color:var(--root-form-color-check-background);border-color:var(--root-form-color-check-background)}.form-check__control:checked[type=radio]{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="6" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e')}.form-check__control:checked[type=checkbox]{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M9.525,13.777l-2.411,-2.412c-0.234,-0.233 -0.613,-0.233 -0.846,0l-1.27,1.27c-0.233,0.233 -0.233,0.612 0,0.846l4.104,4.103c0.116,0.117 0.269,0.175 0.422,0.175l0.003,0c0.152,0 0.305,-0.058 0.421,-0.175l9.054,-9.053c0.233,-0.234 0.233,-0.613 -0,-0.846l-1.27,-1.269c-0.233,-0.234 -0.612,-0.234 -0.846,-0l-7.361,7.361Z" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e')}.form-check__control:indeterminate[type=checkbox]{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M19.5,11.1c-0,-0.331 -0.269,-0.6 -0.6,-0.6l-13.8,0c-0.331,0 -0.6,0.269 -0.6,0.6l0,1.8c0,0.331 0.269,0.6 0.6,0.6l13.8,0c0.331,0 0.6,-0.269 0.6,-0.6l-0,-1.8Z" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e');background-color:var(--root-form-color-check-background);border-color:var(--root-form-color-check-background)}.form-check__control:disabled,.form-check__control.disabled{background-color:var(--root-form-color-background-disabled);border-color:var(--root-form-color-border-disabled);cursor:not-allowed}.form-check__control:disabled+.form-check__label,.form-check__control.disabled+.form-check__label{opacity:.5}.form-check__label{font-weight:var(--root-font-weight);line-height:var(--root-line-height)}.form-switch{--root-border-width: 1px;--root-font-size: 1.125rem;--root-font-weight: 600;--root-line-height: 1.5;--root-margin-block: .15em;--root-vertical-alignment: center;align-items:var(--root-vertical-alignment);display:inline-flex;gap:.5rem}.form-switch--block{inline-size:100%;justify-content:space-between}.form-switch--vertical-center{align-items:center}.form-switch--vertical-start{align-items:flex-start}.form-switch--sm{--root-font-size: .938rem}.form-switch--lg{--root-font-size: clamp(1.15rem, 2vw, 1.35rem)}.form-switch__control{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="8.5" style="fill:hsl%28260, 4%, 75%%29;"/%3e%3c/svg%3e');-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--root-form-color-background);background-position:left center;background-repeat:no-repeat;background-size:contain;block-size:1em;border:var(--root-border-width) solid var(--root-form-color-border);border-radius:2em;flex-shrink:0;font-size:var(--root-font-size);inline-size:2em;line-height:1;margin-block:var(--root-margin-block);transition-duration:var(--root-duration);transition-property:background-position,border,box-shadow;transition-timing-function:var(--root-timing-function)}.form-switch__control:checked{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="8.5" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e');background-color:var(--root-form-color-check-background);background-position:right center;border-color:var(--root-form-color-check-background)}.form-switch__control:disabled{background-color:var(--root-form-color-background-disabled);border-color:var(--root-form-color-border-disabled);cursor:not-allowed}.form-switch__control:disabled+.form-switch__label{opacity:.5}[dir=rtl] .form-switch__control{background-position:right center}[dir=rtl] .form-switch__control:checked{background-position:left center}.form-switch__label{font-weight:var(--root-font-weight);line-height:var(--root-line-height)}fieldset{--root-layout-gap: 1rem;--root-legend-font-size: .938rem;--root-legend-font-weight: 600;--root-gap: .5rem;border:0;margin:0;padding:0}fieldset>*{margin-block-end:0;margin-block-start:0}fieldset>*+*{margin-block-start:var(--root-layout-gap)}fieldset+fieldset{margin-block-start:3rem}legend{color:var(--root-form-color-legend);font-size:var(--root-legend-font-size);font-weight:var(--root-legend-font-weight)}.form-group-label{--root-border-radius: .45rem;--root-border-width: 1px;align-items:center;background-color:var(--root-form-color-group-label-background);border:var(--root-border-width) solid var(--root-form-color-border);border-radius:var(--root-border-radius);color:var(--root-form-color-group-label-foreground);display:flex;padding-inline:1rem}.form-group{--root-gap: .5rem;--root-row-container-inline-size: 40rem;display:flex;flex-direction:column;gap:var(--root-gap)}.form-group--horizontal-check{--root-gap: 1rem;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--root-gap)}.form-group--vertical-check{--root-gap: 1rem;align-items:start;flex-direction:column;gap:var(--root-gap)}.form-group--row{--root-container-inline-size: 38rem;--root-gap: .25rem 1rem;--root-label-inline-size: 10rem;--root-vertical-alignment: center;align-items:var(--root-vertical-alignment);display:grid;gap:var(--root-gap);grid-template-columns:minmax(0,1fr)}.form-group--row\:vertical-center{align-items:center}.form-group--row\:vertical-start{align-items:flex-start}@container form-group-container (inline-size > 38rem){.form-group--row{grid-template-columns:minmax(0,var(--root-label-inline-size)) minmax(0,1fr)}}@container form-group-container (inline-size > 38rem){.form-group--row .form-description,.form-group--row .field-feedback{grid-column-start:2}}.form-group--stacked{display:flex}.form-group--stacked>*+*{border-radius:0;margin-inline-start:-1px}.form-group--stacked>*:first-child{border-start-end-radius:0;border-start-start-radius:var(--root-border-radius);border-end-end-radius:0;border-end-start-radius:var(--root-border-radius)}.form-group--stacked>*:last-child{border-start-end-radius:var(--root-border-radius);border-start-start-radius:0;border-end-end-radius:var(--root-border-radius);border-end-start-radius:0}.form-group--stacked>*:only-child{border-radius:var(--root-border-radius)}.form-group--stacked>*:focus{z-index:2}.form-group-container{container:form-group-container/inline-size}.form-row--mixed{--inline-size: 20ch;display:flex;flex-wrap:wrap;gap:1rem}.form-row--mixed>*{flex:1 1 var(--inline-size)}.field-feedback{display:block;line-height:1.5}.field-feedback--valid{color:var(--root-alert-color-success)}.field-feedback--invalid{color:var(--root-alert-color-danger)}.form-range{--root-focus-ring-box-shadow-type: outside;--root-focus-ring-offset: 2px;--root-focus-ring-size: 2px;--root-focus-ring-type: outline;--root-thumb-block-size: 1rem;--root-thumb-border-radius: .5rem;--root-thumb-inline-size: 1rem;--root-track-block-size: .25rem;--root-track-border-radius: .15rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-block-start:calc(var(--root-thumb-block-size) / 2 - var(--root-track-block-size) / 2)}.form-range:focus-visible{outline:none}.form-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--root-form-color-range-thumb-focus-ring);outline-offset:2px}.form-range:focus-visible::-moz-range-thumb{outline:2px solid var(--root-form-color-range-thumb-focus-ring);outline-offset:2px}.form-range::-webkit-slider-runnable-track{background-color:var(--root-form-color-range-track-background);block-size:var(--root-track-block-size);border-radius:var(--root-track-border-radius)}.form-range::-moz-range-track{background-color:var(--root-form-color-range-track-background);block-size:var(--root-track-block-size);border-radius:var(--root-track-border-radius)}.form-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--root-form-color-range-thumb-background);block-size:var(--root-thumb-block-size);border-radius:var(--root-thumb-border-radius);inline-size:var(--root-thumb-inline-size);margin-block-start:calc(var(--root-track-block-size) / 2 - var(--root-thumb-block-size) / 2)}.form-range::-moz-range-thumb{background-color:var(--root-form-color-range-thumb-background);block-size:var(--root-thumb-block-size);border:0;border-radius:var(--root-thumb-border-radius);inline-size:var(--root-thumb-inline-size)}.form-range:disabled{cursor:not-allowed;opacity:.5}.form-description{--root-font-size: 1em;--root-font-weight: 400;color:var(--root-form-color-text);display:block;font-size:var(--root-font-size);font-weight:var(--root-font-weight);line-height:var(--root-line-height-md)}:root[data-theme-mode=dark]{--root-base-color-background: hsl(240, 30%, 14%);--root-base-color-blockquote-border: hsl(211, 99%, 46%);--root-base-color-border: hsla(0, 0%, 100%, .04);--root-base-color-card-border: hsl(207, 90%, 13%);--root-base-color-code-background: hsl(207, 64%, 21%);--root-base-color-code-foreground: hsl(0, 0%, 95%);--root-base-color-footer-background: hsla(0, 0%, 0%, .15);--root-base-color-heading: hsl(0, 0%, 95%);--root-base-color-link-hover: hsl(205, 100%, 62%);--root-base-color-link: hsl(205, 100%, 56%);--root-base-color-mark-background: hsl(50, 100%, 80%);--root-base-color-mark-foreground: hsl(240, 30%, 14%);--root-base-color-marker: hsl(211, 99%, 46%);--root-base-color-primary: hsl(211, 99%, 46%);--root-base-color-primary-lightest: hsl(240, 30%, 16%);--root-base-color-secondary: hsl(160, 89%, 46%);--root-base-color-text: hsl(0, 0%, 97%)}:root[data-theme-mode=dark]{--root-breadcrumb-color-arrow: hsla(0, 0%, 100%, .1)}:root[data-theme-mode=dark]{--root-btn-color-dark-background: hsl(0, 0%, 100%);--root-btn-color-dark-background-hover: hsl(0, 0%, 95%);--root-btn-color-dark-foreground: hsl(205, 100%, 5%);--root-btn-color-dark-outline-border: hsla(0, 0%, 100%, .15);--root-btn-color-dark-outline-foreground: hsl(0, 0%, 100%);--root-btn-color-dark-outline-foreground-hover: hsl(205, 100%, 2%);--root-btn-color-dark-outline-background-hover: hsl(0, 0%, 100%);--root-btn-color-dark-outline-focus-ring: hsl(0, 0%, 100%);--root-btn-color-light-background: hsl(240, 30%, 12%);--root-btn-color-light-background-hover: hsl(211, 99%, 46%);--root-btn-color-light-focus-ring: hsl(211, 99%, 46%);--root-btn-color-light-foreground: hsl(211, 99%, 46%);--root-btn-color-light-foreground-hover: hsl(0, 0%, 100%);--root-btn-color-primary-background: hsl(211, 99%, 46%);--root-btn-color-primary-background-hover: #208bfe;--root-btn-color-primary-foreground: hsl(0, 0%, 100%);--root-btn-color-primary-shadow: #01346b;--root-btn-color-primary-outline-foreground: hsl(211, 99%, 60%);--root-btn-color-secondary-background: hsl(160, 89%, 46%);--root-btn-color-secondary-background-hover: #13f1a7;--root-btn-color-secondary-foreground: hsl(0, 0%, 95%)}:root[data-theme-mode=dark]{--root-card-color-background: hsl(240, 30%, 14%)}:root[data-theme-mode=dark]{--root-combobox-color-item-background: hsl(240, 30%, 12%);--root-combobox-color-item-foreground: hsl(211, 99%, 46%)}:root[data-theme-mode=dark]{--root-data-table-color-icon: hsla(0, 0%, 100%, .1)}:root[data-theme-mode=dark]{--root-form-color-background: #21213d;--root-form-color-background-disabled: hsl(240, 30%, 14%);--root-form-color-border-disabled: hsla(0, 0%, 100%, .04);--root-form-color-border-focus: hsl(211, 99%, 46%);--root-form-color-border: hsla(0, 0%, 100%, .12);--root-form-color-check-background: hsl(211, 99%, 46%);--root-form-color-check-foreground: hsl(240, 30%, 14%);--root-form-color-group-label-background: #1d1d36;--root-form-color-group-label-foreground: hsl(0, 0%, 97%);--root-form-color-invalid: hsl(0, 71%, 51%);--root-form-color-invalid-shadow: rgba(219, 41, 41, .25);--root-form-color-label: hsl(0, 0%, 95%);--root-form-color-legend: hsl(0, 0%, 95%);--root-form-color-placeholder: hsl(0, 0%, 90%);--root-form-color-select-foreground: hsl(0, 0%, 100%);--root-form-color-shadow-focus: rgba(1, 113, 233, .25);--root-form-color-text: hsl(0, 0%, 97%);--root-form-color-valid: hsl(150, 100%, 33%);--root-form-color-valid-shadow: rgba(0, 168, 84, .25)}:root[data-theme-mode=dark]{--root-header-color-background: hsla(240, 30%, 12%, .95)}:root[data-theme-mode=dark]{--root-navigation-color-arrow: hsla(0, 0%, 100%, .15);--root-navigation-color-icon-background: hsl(245, 38%, 10%);--root-navigation-color-icon-background-hover: hsl(211, 99%, 46%);--root-navigation-color-icon-foreground: hsl(211, 99%, 46%);--root-navigation-color-icon-foreground-hover: hsl(186, 100%, 5%)}:root[data-theme-mode=dark]{--root-main-color-background: hsl(240, 30%, 13%)}:root[data-theme-mode=dark]{--root-media-color-background: hsl(240, 30%, 12%);--root-media-color-dropzone-background: hsla(214, 98%, 49%, .75);--root-media-color-dropzone-border: hsl(214, 98%, 40%);--root-media-color-icon: hsl(211, 99%, 46%)}:root[data-theme-mode=dark]{--root-modal-color-background: hsla(240, 3%, 7%, .9)}:root[data-theme-mode=dark]{--root-prism-color-color: hsl(217, 34%, 88%);--root-prism-color-background: hsl(245, 38%, 7%);--root-prism-color-comment: hsl(180, 9%, 55%);--root-prism-color-punctuation: hsl(276, 68%, 75%);--root-prism-color-namespace: hsl(197, 31%, 77%);--root-prism-color-deleted: hsla(1, 83%, 63%, .56);--root-prism-color-boolean: hsl(350, 100%, 67%);--root-prism-color-number: hsl(14, 90%, 70%);--root-prism-color-constant: hsl(221, 100%, 75%);--root-prism-color-class-name: hsl(33, 100%, 77%);--root-prism-color-regex: hsl(217, 34%, 88%)}:root[data-theme-mode=dark]{--root-table-color-border: hsla(0, 0%, 100%, .04);--root-table-color-caption: hsl(0, 0%, 97%);--root-table-color-heading: hsl(0, 0%, 95%);--root-table-color-hover: hsla(0, 0%, 100%, .02);--root-table-color-stripe: hsla(0, 0%, 100%, .025);--root-table-color-text: hsl(0, 0%, 97%)}:root[data-theme-mode=dark]{--root-selection-color-background: hsl(211, 99%, 46%);--root-selection-color-foreground: hsl(0, 0%, 100%)}:root[data-theme-mode=dark]{--root-search-color-icon: hsla(0, 0%, 100%, .25)}:root[data-theme-mode=dark]{--root-scrollbar-color-thumb-background: hsla(0, 0%, 100%, .15);--root-scrollbar-color-thumb-background-hover: hsla(0, 0%, 100%, .25);--root-scrollbar-color-track-background: hsla(0, 0%, 100%, .05)}:root[data-theme-mode=dark]{--root-widget-color-icon-background: #22223f}[data-theme-mode=dark]{color-scheme:dark}[data-theme-mode=dark] select.form-control:not([multiple]):not([size]),[data-theme-mode=dark] .combobox__control{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.507l-3.816,-3.815c-0.171,-0.172 -0.45,-0.172 -0.622,-0l-0.933,0.933c-0.172,0.172 -0.172,0.451 0,0.623l5.06,5.06c0.172,0.172 0.45,0.172 0.622,0l5.06,-5.06c0.172,-0.172 0.172,-0.451 -0,-0.623l-0.933,-0.933c-0.172,-0.172 -0.451,-0.172 -0.622,-0l-3.816,3.815Z" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e')}.container{--inline-size: var(--root-container-inline-size);--gap: var(--root-container-gap);margin-inline:auto;max-inline-size:var(--inline-size);padding-inline:var(--gap)}.container--wide{--inline-size: 100%}.container--narrow{--inline-size: 50rem}.l-row{align-items:start;display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}@media (min-width: 32em){.l-row--column\:xs\:1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 32em){.l-row--column\:xs\:2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 32em){.l-row--column\:xs\:3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 32em){.l-row--column\:xs\:4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 48em){.l-row--column\:sm\:1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 48em){.l-row--column\:sm\:2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 48em){.l-row--column\:sm\:3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 48em){.l-row--column\:sm\:4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 64em){.l-row--column\:md\:1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 64em){.l-row--column\:md\:2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 64em){.l-row--column\:md\:3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 64em){.l-row--column\:md\:4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 80em){.l-row--column\:lg\:1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 80em){.l-row--column\:lg\:2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 80em){.l-row--column\:lg\:3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 80em){.l-row--column\:lg\:4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 90em){.l-row--column\:xl\:1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 90em){.l-row--column\:xl\:2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 90em){.l-row--column\:xl\:3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 90em){.l-row--column\:xl\:4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 110em){.l-row--column\:xxl\:1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 110em){.l-row--column\:xxl\:2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 110em){.l-row--column\:xxl\:3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 110em){.l-row--column\:xxl\:4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 80em){.l-row--sidebar{grid-template-columns:minmax(0,1fr) minmax(0,20rem)}}.l-row__column{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}.l-main{display:flex;position:relative}.l-main__sidebar{background-color:var(--root-base-color-background);display:none;inline-size:var(--root-sidebar-inline-size);inset-block:0;inset-inline:0 auto;position:fixed;z-index:20}@media (min-width: 64em){.l-main__sidebar{display:block}}.l-main__sidebar--open{display:block}.l-main__body{background-color:var(--root-main-color-background);inline-size:100%;min-block-size:100lvh}@media (min-width: 64em){.l-main__body{inline-size:calc(100% - var(--root-sidebar-inline-size));margin-inline-start:var(--root-sidebar-inline-size)}}.l-auth__inner{background-attachment:fixed;display:flex;flex-direction:column;min-block-size:100vh;text-align:center}@media (min-width: 64em){.l-auth__inner{align-items:center;flex-direction:row;text-align:start}}.l-auth__sidebar{background-image:url(/vendor/root/img/auth-background.png);background-position:center;background-size:cover;border-radius:2rem;margin-block-end:clamp(1.5rem,5vw,3rem);margin-inline:clamp(1.5rem,5vw,3rem);min-block-size:10rem}@media (min-width: 64em){.l-auth__sidebar{block-size:calc(100% - 6rem);inline-size:calc(50% - 3rem);inset-block:3rem;inset-inline:50% 3rem;margin:0;position:fixed}}.l-auth__form{align-items:center;block-size:100%;display:flex;flex-direction:column;gap:3rem;justify-content:center;padding-block:3rem;padding-inline:clamp(1.5rem,5vw,3rem)}@media (min-width: 64em){.l-auth__form{inline-size:50%;margin-inline-start:0;min-block-size:100vh}}.l-auth__logo{align-self:center;block-size:1.5rem;display:inline-flex}@media (min-width: 64em){.l-auth__logo{align-self:flex-start}}.l-auth__logo img{block-size:100%;inline-size:auto}.l-auth__footer{inline-size:100%}.l-auth__footer p{margin-block:0}.l-auth .auth-form{inline-size:100%;max-inline-size:25rem}@media (min-width: 64em){.l-auth .auth-form{padding-block-end:1.5rem}}.alert{align-items:center;border:1px solid;border-left:.4rem solid;border-radius:var(--root-border-radius-sm);display:flex;gap:1.5rem;justify-content:space-between;line-height:var(--root-line-height-md);padding:.65em 1em}.alert--danger{background-color:#fdf4f4;color:#9c1a1a}.alert--danger .alert__close{background-color:#9c1a1a;color:#fbeaea}.alert--info{background-color:#f0fbff;color:#007096}.alert--info .alert__close{background-color:#007096;color:#e1f8ff}.alert--success{background-color:#eefff6;color:#00763b}.alert--success .alert__close{background-color:#00763b;color:#dfe}.alert--warning{background-color:#fefcf4;color:#ba970b}.alert--warning .alert__close{background-color:#ba970b;color:#fefae9}[data-theme-mode=dark] .alert--danger{background-color:transparent;border-color:#9c1a1a;color:var(--root-base-color-text)}[data-theme-mode=dark] .alert--info{background-color:transparent;border-color:#007096;color:var(--root-base-color-text)}[data-theme-mode=dark] .alert--success{background-color:transparent;border-color:#00763b;color:var(--root-base-color-text)}[data-theme-mode=dark] .alert--warning{background-color:transparent;border-color:#ba970b;color:var(--root-base-color-text)}.alert__caption>*{margin-block-end:0;margin-block-start:0}.alert__caption>*+*{margin-block-start:.25rem}.alert__close{--dimension: 1.5rem;background:none;border:0;color:inherit;cursor:pointer;font:inherit;outline:inherit;padding:0;transition-duration:var(--root-duration);transition-property:all;transition-timing-function:var(--root-timing-function);align-items:center;block-size:var(--dimension);border-radius:var(--root-border-radius-sm);display:flex;flex-shrink:0;inline-size:var(--dimension);justify-content:center}.alert__close:hover,.alert__close:focus{opacity:.75}.alert__close svg{--dimension: .85rem;block-size:var(--dimension);inline-size:var(--dimension)}.auth-form{margin-block:auto}.auth-form>*{margin-block-end:0;margin-block-start:0}.auth-form>*+*{margin-block-start:1rem}.auth-form__title{font-weight:700}.auth-form .or-separator{margin-block-start:1.5rem}.form-group-stacked>*,.social-logins>*{margin-block-end:0;margin-block-start:0}.form-group-stacked>*+*,.social-logins>*+*{margin-block-start:1rem}.form-label--space-between{display:flex;justify-content:space-between}.trending{align-items:center;border-radius:2rem;display:inline-flex;font-family:var(--root-font-family-heading);font-size:var(--root-font-size-sm);font-weight:600;gap:.25rem;line-height:1;padding:.35em .55em}.trending--up{background:#dbffed;color:#008241}.trending--down{background:#fceeee;color:#c92222}.trending__icon{--dimension: .95em;block-size:var(--dimension);inline-size:var(--dimension)}.status{align-items:center;display:inline-flex;gap:.5rem;line-height:1;position:relative;white-space:nowrap}.status--danger:before{background-color:var(--root-alert-color-danger)}.status--info:before{background-color:var(--root-alert-color-info)}.status--success:before{background-color:var(--root-alert-color-success)}.status--warning:before{background-color:var(--root-alert-color-warning)}.status:before{--dimension: .55em;block-size:var(--dimension);border-radius:50%;content:"";flex-shrink:0;inline-size:var(--dimension)}.block-navigation{display:flex;flex-direction:column;gap:1rem;position:relative;z-index:1}.block-navigation__toggle:before{content:"";top:0;right:0;bottom:0;left:0;position:absolute}.block-navigation__title{align-items:center;color:var(--root-base-color-heading);display:flex;font-size:var(--root-font-size-base);font-weight:700;justify-content:space-between;margin-block:0}.block-navigation__toggle[aria-expanded=true] svg{rotate:180deg}.block-navigation__toggle svg{pointer-events:none}.block-navigation__menu:not(.is-open){display:none}.block-navigation__menu.is-open{display:block}.block-navigation__menu ul{list-style:none;margin:0;padding:0}.block-navigation__menu a{align-items:center;color:var(--root-base-color-text);display:flex;gap:.75em;padding-block:.35em;padding-inline:.75em;position:relative;text-decoration:none}.block-navigation__menu a:hover:not([aria-current=page]):before{background-color:var(--root-base-color-primary-lightest)}.block-navigation__menu a:before{border-radius:var(--root-border-radius-sm);content:"";inset-block:0;inset-inline:0;position:absolute;z-index:-1}.block-navigation__menu a[aria-current=page]{color:#fff}.block-navigation__menu a[aria-current=page]:before{background-color:var(--root-base-color-primary)}.block-navigation__menu a[aria-current=page] svg{color:#fff}.block-navigation__menu a svg{--dimension: 1.15em;block-size:var(--dimension);color:var(--root-base-color-primary);inline-size:var(--dimension)}.block-navigation__menu--breakout a{padding-block:.35em;padding-inline:0}.block-navigation__menu--breakout a:before{inset-inline:-.75rem -.35em}.breadcrumb-list{list-style:none;margin:0;padding:0;align-items:center;display:flex;max-inline-size:100%;overflow-x:auto;white-space:nowrap}.breadcrumb-list>li{align-items:center;display:inline-flex;margin-block:0}.breadcrumb-list>li+li:before{block-size:.4em;border-block-end:2px solid var(--root-breadcrumb-color-separator);border-inline-end:2px solid var(--root-breadcrumb-color-separator);content:"";display:inline-flex;inline-size:.4em;margin-inline:.75em;transform:rotate(-45deg)}[dir=rtl] .breadcrumb-list>li+li:before{transform:rotate(45deg)}.breadcrumb-list a{text-decoration:none}.breadcrumb-list [aria-current=page]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-inline-size:20ch;text-align:start}.app-card{background-color:var(--root-base-color-background);border:1px solid var(--root-base-color-border);border-radius:var(--root-border-radius-sm);box-shadow:0 0 .25rem #17658f0d}.app-card:focus-within{z-index:5}.app-card--edit .app-card__header{padding-inline:1.5rem}.app-card--edit .app-card__body,.app-card--setting .app-card__body{padding:1.5rem}.app-card--setting .app-card__body>*{margin-block-end:0;margin-block-start:0}.app-card--setting .app-card__body>*+*{margin-block-start:.75rem}.app-card--setting .app-card__content>*{margin-block-end:0;margin-block-start:0}.app-card--setting .app-card__content>*+*{margin-block-start:.5rem}.app-card--sidebar{display:grid;gap:clamp(1.5rem,5vw,3rem);grid-template-columns:minmax(0,1fr);padding:1.5rem}@media (min-width: 64em){.app-card--sidebar{grid-template-columns:minmax(0,13.5rem) minmax(0,1fr)}}.app-card--sidebar>.app-card__body{padding:0}.app-card--sidebar>.app-card__body>*{margin-block-end:0;margin-block-start:0}.app-card--sidebar>.app-card__body>*+*{margin-block-start:1.5rem}.app-card--info{box-shadow:none}.app-card--info .app-card__header{border-block-end:0;min-block-size:0;padding-block:1.5rem 0;padding-inline:1.5rem}.app-card--info .app-card__body{padding:1.5rem}.app-card__header{align-items:center;border-block-end:1px solid var(--root-base-color-border);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;min-block-size:3.4rem;padding:.75rem 1rem}.app-card__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-inline-start:auto}.app-card__title{font-size:clamp(.996625rem,2vw + 1rem,1.1725rem);font-weight:600;margin-block:0}.app-card__body{padding:1rem}.app-card__body--plain{align-items:center;display:flex;justify-content:space-between;padding:0}.context-menu{--inset-block-start:calc(100% + 1rem);--inline-size: 10rem;list-style:none;margin:0;padding:0;transition-duration:var(--root-duration);transition-property:all;transition-timing-function:var(--root-timing-function);background-color:var(--root-base-color-background);border:1px solid var(--root-base-color-border);border-radius:var(--root-border-radius-sm);box-shadow:0 0 .25rem #17658f0d;inline-size:var(--inline-size);opacity:0;position:absolute;scale:.85;visibility:hidden;z-index:10}.context-menu--inline-start{inset:var(--inset-block-start) auto auto 0}.context-menu--inline-end{inset:var(--inset-block-start) 0 auto auto}.context-menu.is-open{opacity:1;scale:1;visibility:visible}.context-menu>li{display:flex;flex-direction:column}.context-menu>li+li{border-block-start:1px solid var(--root-base-color-border);margin-block-start:0}.context-menu__item{align-items:center;background:none;block-size:2.25rem;border:0;border-radius:var(--root-border-radius-sm);color:var(--root-base-color-text);display:flex;justify-content:space-between;line-height:var(--root-line-height-md);margin:.15em;padding-block:.25em;padding-inline:.6em;text-decoration:none}.context-menu__item:hover:not([aria-current=page],:has(.theme-switcher)){background-color:var(--root-base-color-primary-lightest)}.context-menu__item[aria-current=page]{color:var(--root-base-color-primary)}.data-group>*{margin-block-end:0;margin-block-start:0}.data-group>*+*{margin-block-start:.25rem}.data-group__content{overflow:hidden;text-overflow:ellipsis;white-space:inherit;color:var(--root-base-color-heading);font-family:var(--root-font-family-heading);font-weight:600;line-height:var(--root-line-height-heading)}@supports (-webkit-line-clamp: 2){.data-group__content{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2}}.data-table{overflow:hidden;position:relative}.data-table__image{--dimension: 2.25rem;block-size:var(--dimension);border-radius:50%;inline-size:var(--dimension)}.data-table__actions{align-items:center;display:flex;gap:.5rem;justify-content:end}.data-table__footer{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-block:1.5rem 1rem}.data-table__footer-column{display:flex;flex-wrap:wrap;gap:1rem}.data-table__footer-column>*{margin-block:0}.data-table-alert{border-width:1px;flex-wrap:wrap;gap:.5rem 1rem;padding-inline-end:.65em}.data-table-alert__actions{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}.data-table-alert__actions .form-control{inline-size:auto}.data-table-alert__column{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.data-table-filter{position:relative}.data-table-filter__actions{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.data-table-filter .context-menu{--inline-size: 16rem;padding:1rem}.data-table-sort{position:relative;align-items:center;display:flex;gap:.5rem;white-space:nowrap}.data-table-sort__control:before{content:"";top:0;right:0;bottom:0;left:0;position:absolute}.data-table-sort__control{background:none;border:0;color:inherit;cursor:pointer;font:inherit;outline:inherit;padding:0}.data-table-sort svg{--dimension: .85em;block-size:var(--dimension);color:var(--root-data-table-color-icon);inline-size:var(--dimension)}.data-table-deleted{color:var(--root-alert-color-danger)}.btn-dropdown{display:inline-flex;position:relative;z-index:10}.combobox{--root-border-radius: .45rem;--root-border-width: 1px;display:flex;flex-direction:column;gap:.5rem}.combobox__inner{position:relative}.combobox__selected-items{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.combobox__toggle{inset:0 0 0 auto;pointer-events:none;position:absolute}.combobox__reset{align-self:start}.combobox__no-results{padding-inline:.5rem}.combobox__control{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.507l-3.816,-3.815c-0.171,-0.172 -0.45,-0.172 -0.622,-0l-0.933,0.933c-0.172,0.172 -0.172,0.451 0,0.623l5.06,5.06c0.172,0.172 0.45,0.172 0.622,0l5.06,-5.06c0.172,-0.172 0.172,-0.451 -0,-0.623l-0.933,-0.933c-0.172,-0.172 -0.451,-0.172 -0.622,-0l-3.816,3.815Z" style="fill:hsl%28205, 100%, 2%%29;"/%3e%3c/svg%3e');background-position:center right .5em;background-repeat:no-repeat;background-size:1.25em auto;padding-inline-end:2em}.combobox__dropdown{background-color:var(--root-form-color-background);border:var(--root-border-width) solid var(--root-form-color-border);border-radius:var(--root-border-radius);inset:calc(100% + .5rem) 0 auto 0;padding:.5rem;position:absolute;z-index:5}.combobox [role=listbox]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;max-block-size:10rem;overflow-y:auto;padding-inline-end:.5rem}.combobox [role=listbox]::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.combobox [role=listbox]::-webkit-scrollbar-thumb{background:var(--root-scrollbar-color-thumb-background);border-radius:var(--root-border-radius-sm)}.combobox [role=listbox]::-webkit-scrollbar-thumb:hover{background:var(--root-scrollbar-color-thumb-background-hover)}.combobox [role=listbox]::-webkit-scrollbar-track{background:var(--root-scrollbar-color-track-background);border-radius:var(--root-border-radius-sm)}.combobox [role=listbox]>*{margin-block-start:0}.combobox [role=option]{align-items:center;border-radius:var(--root-border-radius);display:flex;justify-content:space-between;padding-block:.25rem;padding-inline:.5rem;-webkit-user-select:none;user-select:none}.combobox [role=option][aria-selected=true]{background-color:var(--root-btn-color-light-background);color:var(--root-btn-color-light-foreground)}.combobox [role=option]:hover,.combobox [role=option]:focus,.combobox [role=option].highlighted{background-color:var(--root-btn-color-primary-background);color:var(--root-btn-color-primary-foreground)}.combobox [role=option] svg{--dimension: .85em;block-size:var(--dimension);inline-size:var(--dimension)}.combobox-item{align-items:center;background-color:var(--root-combobox-color-item-background);border-radius:1em;color:var(--root-combobox-color-item-foreground);display:flex;font-size:var(--root-font-size-sm);gap:.25rem;line-height:1;padding-block:.25rem;padding-inline:.5rem .25rem}.combobox-item .btn--sm{--root-icon-padding: .25em;--root-border-radius: 1em}.editor{--root-block-size: 18rem;transition-duration:var(--root-duration);transition-property:all;transition-timing-function:var(--root-timing-function);block-size:var(--root-block-size);border:1px solid var(--root-form-color-border);border-radius:var(--root-border-radius-sm);display:flex;flex-direction:column;grid-template-rows:auto 1fr;overflow:hidden}.editor:focus-within{border-color:var(--root-form-color-border-focus);box-shadow:0 0 0 .25rem var(--root-form-color-ring-focus);outline:2px solid transparent}.editor__controls{align-items:center;border-block-end:1px solid var(--root-base-color-border);display:flex;flex-wrap:wrap;gap:.5rem 1rem;padding:.5rem}.editor__controls .form-control{inline-size:auto}.editor__group{align-items:flex-start;display:flex;flex-wrap:wrap;gap:.5rem}.editor__body{flex:1 1 auto;margin:.25rem;overflow-x:hidden;overflow-y:auto;padding:1rem}.editor__body::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.editor__body::-webkit-scrollbar-thumb{background:var(--root-scrollbar-color-thumb-background);border-radius:var(--root-border-radius-sm)}.editor__body::-webkit-scrollbar-thumb:hover{background:var(--root-scrollbar-color-thumb-background-hover)}.editor__body::-webkit-scrollbar-track{background:var(--root-scrollbar-color-track-background);border-radius:var(--root-border-radius-sm)}.editor__body>[contenteditable=true]{outline:0}.editor__body>[contenteditable=true]>*{margin-block-end:0;margin-block-start:0}.editor__body>[contenteditable=true]>*+*{margin-block-start:.5rem}.file-group-container{container:file-group-container/inline-size}.file-group{--root-border-radius: .45rem;--root-border-width: 1px;align-items:center;border:var(--root-border-width) solid var(--root-form-color-border);border-radius:var(--root-border-radius);display:flex;gap:1.5rem;overflow:hidden;padding:1rem}@container file-group-container (inline-size < 30rem){.file-group{flex-direction:column}}.file-group:has([style*=background-image]) .file-group__remove{display:inline-flex}.file-group__preview{align-items:center;aspect-ratio:1;background-color:var(--root-base-color-primary-lightest);background-position:center;background-size:cover;border-radius:var(--root-border-radius);display:flex;flex-shrink:0;flex-wrap:wrap;inline-size:9rem;justify-content:center}@container file-group-container (inline-size < 30rem){.file-group__preview{aspect-ratio:16/9;inline-size:100%}}.file-group__preview[style*=background-image] .file-group__icon{display:none}.file-group__body{display:flex;flex-direction:column;gap:.25rem;inline-size:100%}.file-group__body>*{margin-block:0}.file-group__icon{--dimension: 2rem;block-size:var(--dimension);color:var(--root-base-color-primary);inline-size:var(--dimension)}.file-group__title{color:var(--root-base-color-heading);font-family:var(--root-font-family-heading);font-weight:700}.file-group__meta{list-style:none;padding-inline-start:0}.file-group__meta>*+*{margin-block-start:0}.file-group__action{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:.5rem}.file-group__remove{display:none}.file-group__input{flex:1}.file-list{--root-border-radius: .45rem;--root-border-width: 1px;display:flex;flex-direction:column;gap:1rem}.file-list__items{list-style:none;margin:0;padding:0;border:var(--root-border-width) solid var(--root-form-color-border);border-radius:var(--root-border-radius);padding:.5rem}.file-list__items>li+li{border-block-start:var(--root-border-width) solid var(--root-base-color-border);margin-block-start:.5rem;padding-block-start:.5rem}.file-list-item{align-items:center;display:flex;gap:1rem;justify-content:space-between}.file-list-item__icon{align-items:center;aspect-ratio:1;background-color:var(--root-media-color-background);border-radius:var(--root-border-radius-sm);display:flex;inline-size:2.5rem;justify-content:center}.file-list-item__icon svg{--size: 1rem;block-size:var(--size);color:var(--root-media-color-icon);inline-size:var(--size)}.file-list-item__column{align-items:center;display:flex;gap:1rem}.file-list-item__thumbnail{aspect-ratio:1;border-radius:var(--root-border-radius-sm);inline-size:2.5rem}.file-list-item__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-inline-size:25ch}.file-list-item__actions{align-items:center;display:flex;gap:.25rem}.repeater-container>*{margin-block-end:0;margin-block-start:0}.repeater-container>*+*{margin-block-start:1rem}.repeater{--root-border-radius: .45rem;--root-border-width: 1px;border:var(--root-border-width) solid var(--root-form-color-border);border-radius:var(--root-border-radius);padding:1rem}.repeater__heading{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}.repeater__body{border-block-start:1px solid var(--root-base-color-border);margin-block-start:1rem;padding-block-start:1rem}.repeater__column{align-items:center;display:flex;gap:1rem}.repeater__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--root-font-size-base);margin-block:0;max-inline-size:20ch}.repeater__actions{align-items:center;display:flex;gap:.25rem}.repeater__toggle[aria-expanded=true] .vertical-line{display:none}.search-form{position:relative}.search-form--sm .search-form__control{padding-inline-start:1.75em}.search-form--sm .search-form__submit{padding-inline:.6em}.search-form--sm .search-form__icon{--dimension: .75rem}.search-form__control{padding-inline-start:2.15em}.search-form__submit{align-items:center;background:none;border:0;color:var(--root-form-color-border);display:flex;inset:0 auto 0 0;justify-content:center;padding-block:0;padding-inline:.75em;position:absolute}.search-form__icon{--dimension: .9rem;block-size:var(--dimension);inline-size:var(--dimension)}.open-search{position:relative;align-items:center;display:flex;gap:.5rem}.open-search__btn:before{content:"";top:0;right:0;bottom:0;left:0;position:absolute}.open-search__icon{--dimension: 1rem;block-size:var(--dimension);color:var(--root-search-color-icon);inline-size:var(--dimension)}.or-separator{align-items:center;display:flex;font-size:var(--root-font-size-sm);gap:1rem;text-transform:uppercase}.or-separator:before,.or-separator:after{background-color:var(--root-base-color-border);block-size:1px;content:"";display:flex;inline-size:100%}.pagination__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}.pagination__links>*+*{margin-block-start:0}.pagination [aria-current=page]{background-color:var(--root-btn-color-primary-background);color:var(--root-btn-color-primary-foreground)}.preloader--circle{--color: currentColor;--border-width: .25em;--size: 1.5rem;--animation-duration: 1s;block-size:var(--size);inline-size:var(--size)}.preloader--circle:after{animation:rotation var(--animation-duration) linear infinite;block-size:var(--size);border:var(--border-width) solid var(--color);border-color:var(--color) transparent var(--color) transparent;border-radius:50%;content:"";display:flex;inline-size:var(--size)}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}code[class*=language-],pre[class*=language-]{border-radius:var(--root-border-radius-lg);color:var(--root-prism-color-color);font-family:var(--root-font-family-cursive);font-size:var(--root-font-size-base);-webkit-hyphens:none;hyphens:none;line-height:1.5;-moz-tab-size:4;tab-size:4;text-align:left;white-space:pre;word-break:normal;word-spacing:normal;word-wrap:normal}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{display:grid;overflow:auto;padding:1.5rem}pre[class*=language-] code{background-color:transparent;padding:0}:not(pre)>code[class*=language-],pre[class*=language-]{background:var(--root-prism-color-background);overflow-x:auto}:not(pre)>code[class*=language-]::-webkit-scrollbar,pre[class*=language-]::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}:not(pre)>code[class*=language-]::-webkit-scrollbar-thumb,pre[class*=language-]::-webkit-scrollbar-thumb{background:var(--root-scrollbar-color-thumb-background);border-radius:var(--root-border-radius-sm)}:not(pre)>code[class*=language-]::-webkit-scrollbar-thumb:hover,pre[class*=language-]::-webkit-scrollbar-thumb:hover{background:var(--root-scrollbar-color-thumb-background-hover)}:not(pre)>code[class*=language-]::-webkit-scrollbar-track,pre[class*=language-]::-webkit-scrollbar-track{background:var(--root-scrollbar-color-track-background);border-radius:var(--root-border-radius-sm)}.token.comment,.token.prolog,.token.cdata{color:var(--root-prism-color-comment);font-style:italic}.token.punctuation{color:var(--root-prism-color-punctuation)}.namespace{color:var(--root-prism-color-namespace)}.token.deleted{color:var(--root-prism-color-deleted);font-style:italic}.token.symbol,.token.operator,.token.keyword,.token.property{color:var(--root-prism-color-namespace)}.token.tag{color:var(--root-prism-color-punctuation)}.token.boolean{color:var(--root-prism-color-boolean)}.token.number{color:var(--root-prism-color-number)}.token.constant,.token.builtin,.token.string,.token.url,.token.entity,.language-css .token.string,.style .token.string,.token.char{color:var(--root-prism-color-constant)}.token.selector,.token.function,.token.doctype{color:var(--root-prism-color-punctuation);font-style:italic}.token.attr-name,.token.inserted{color:var(--root-prism-color-constant);font-style:italic}.token.class-name,.token.atrule{color:var(--root-prism-color-class-name)}.token.regex,.token.important,.token.variable{color:var(--root-prism-color-regex)}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.range-group{display:flex;flex-direction:column;gap:.25rem}.range-group .form-label{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.range-group__inner{align-items:center;display:flex;gap:.5rem}.range-group__inner .form-range{flex-grow:1;margin-block-start:0}.range-group__inner .form-range-control{flex-shrink:0}.skip-link{inset:-50vh auto auto 1.5rem;position:fixed}.skip-link:focus{inset-block-start:1.5rem}.no-transition *{transition:none!important}.theme-switcher{color:var(--root-base-color-text);display:inline-flex;position:relative}.theme-switcher[data-theme-mode=system] .theme-switcher__system-mode,.theme-switcher[data-theme-mode=light] .theme-switcher__light-mode,.theme-switcher[data-theme-mode=dark] .theme-switcher__dark-mode{display:flex}.theme-switcher button{display:none}.theme-switcher button>*{pointer-events:none}.user-menu{align-items:center;display:flex;gap:clamp(.5rem,1vw,1rem);position:relative}.user-menu__toggle:before{content:"";top:0;right:0;bottom:0;left:0;position:absolute}.user-menu__avatar{--dimension: 2.1rem;block-size:var(--dimension);border-radius:50%;inline-size:var(--dimension)}.user-menu__caption{display:none;flex-direction:column;font-size:var(--root-font-size-base);gap:.25rem;line-height:1}@media (min-width: 64em){.user-menu__caption{display:flex}}.user-menu__role{font-size:var(--root-font-size-sm)}.user-menu__display-name{color:var(--root-base-color-heading);font-weight:700}.user-menu__toggle{background:none;border:0;cursor:pointer;display:flex;padding:0}.user-menu__toggle svg{--dimension: 1em;block-size:var(--dimension);inline-size:var(--dimension)}.modal-backdrop{align-items:start;background-color:var(--root-modal-color-background);display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;overflow-y:auto;position:fixed;z-index:25}.modal{--root-inline-size: 34rem;background-color:var(--root-base-color-background);border:1px solid var(--root-base-color-border);border-radius:var(--root-border-radius-sm);box-shadow:0 0 .25rem #17658f0d;inline-size:var(--root-inline-size);margin:1.5rem;max-inline-size:100%;position:relative}.modal--media{display:flex;flex-direction:column;inline-size:auto;top:0;right:0;bottom:0;left:0;position:fixed}.modal--media .modal__body{flex-grow:1;overflow-y:auto}.modal--media .modal__body::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.modal--media .modal__body::-webkit-scrollbar-thumb{background:var(--root-scrollbar-color-thumb-background);border-radius:var(--root-border-radius-sm)}.modal--media .modal__body::-webkit-scrollbar-thumb:hover{background:var(--root-scrollbar-color-thumb-background-hover)}.modal--media .modal__body::-webkit-scrollbar-track{background:var(--root-scrollbar-color-track-background);border-radius:var(--root-border-radius-sm)}.modal--media .modal__header-caption{order:1}.modal--media .modal__close{order:2}@media (min-width: 64em){.modal--media .modal__close{order:3}}.modal--media .modal__filter{inline-size:100%;order:3}@media (min-width: 64em){.modal--media .modal__filter{inline-size:auto;margin-inline-start:auto;order:2}}.modal--dropzone:before{background-color:var(--root-media-color-dropzone-background);border:2px solid var(--root-media-color-dropzone-border);border-radius:var(--root-border-radius-sm);content:"";top:0;right:0;bottom:0;left:0;pointer-events:none;position:absolute;z-index:2}.modal--dropzone:after{align-items:center;color:#fff;content:attr(data-dropzone);display:flex;font-size:clamp(1.5572265625rem,2vw + 1rem,1.83203125rem);top:0;right:0;bottom:0;left:0;justify-content:center;line-height:var(--root-line-height-md);padding:1.5rem;position:absolute;text-align:center;z-index:3}.modal__header{align-items:center;border-block-end:1px solid var(--root-base-color-border);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding:1rem clamp(1rem,5vw,1.5rem)}.modal__header-caption>*{margin-block-end:0;margin-block-start:0}.modal__header-caption>*+*{margin-block-start:0}.modal__title{font-size:clamp(1.24578125rem,2vw + 1rem,1.465625rem);font-weight:600;margin-block:0}.modal__body{padding:clamp(1rem,5vw,1.5rem)}.modal__body>*{margin-block-end:0;margin-block-start:0}.modal__body>*+*{margin-block-start:1rem}.modal__footer{align-items:center;border-block-start:1px solid var(--root-base-color-border);display:flex;flex-wrap:wrap;gap:1rem;justify-content:end;padding:1rem clamp(1rem,5vw,1.5rem)}.modal__footer--space-between{justify-content:space-between}.modal__footer input{flex-grow:1;max-inline-size:25rem}.modal__filter{align-items:center;display:flex;gap:1rem;margin-inline:-.5rem;-ms-overflow-style:none;overflow-x:auto;padding:.5rem;scrollbar-width:none}@media (min-width: 64em){.modal__filter{margin-inline:0;overflow:initial;padding:0}}.modal__filter::-webkit-scrollbar{display:none}.modal__filter select,.modal__filter input{inline-size:auto;min-inline-size:10rem}.modal__column{align-items:center;display:flex;flex-wrap:wrap;gap:1rem}.app-notification{position:relative}.app-notification__header{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between}.app-notification__title{font-size:clamp(.996625rem,2vw + 1rem,1.1725rem);font-weight:600;margin-block:0}.app-notification__list{max-block-size:25rem;overflow-y:auto;overscroll-behavior:contain}.app-notification__list::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.app-notification__list::-webkit-scrollbar-thumb{background:var(--root-scrollbar-color-thumb-background);border-radius:var(--root-border-radius-sm)}.app-notification__list::-webkit-scrollbar-thumb:hover{background:var(--root-scrollbar-color-thumb-background-hover)}.app-notification__list::-webkit-scrollbar-track{background:var(--root-scrollbar-color-track-background);border-radius:var(--root-border-radius-sm)}.app-notification__list>*+*{border-block-start:1px solid var(--root-base-color-border);margin-block-start:1rem;padding-block-start:1rem}.app-notification .context-menu{--inline-size: 20rem;display:flex;flex-direction:column;gap:1rem;inset:var(--inset-block-start) -4.75rem auto auto;padding:1rem}@media (min-width: 48em){.app-notification .context-menu{inset:var(--inset-block-start) 0 auto auto}}@media (min-width: 64em){.app-notification .context-menu{--inline-size: 26rem}}.notification-card{position:relative;display:flex;gap:1rem}.notification-card__link:before{content:"";top:0;right:0;bottom:0;left:0;position:absolute}.notification-card--read{opacity:.5}.notification-card__icon{--size: 2.5rem;align-items:center;block-size:var(--size);border-radius:var(--root-border-radius-sm);display:flex;flex-shrink:0;inline-size:var(--size);justify-content:center}.notification-card__icon--info{background-color:#f0fbff;color:var(--root-alert-color-info)}.notification-card__icon--warning{background-color:#fefaec;color:var(--root-alert-color-warning)}.notification-card__icon--danger{background-color:#fdf4f4;color:var(--root-alert-color-danger)}.notification-card__icon--success{background-color:#ebfff5;color:var(--root-alert-color-success)}.notification-card__icon svg{--size: 1rem;block-size:var(--size);inline-size:var(--size)}.notification-card__caption{line-height:var(--root-line-height-md);padding-inline-end:1rem}.notification-card__caption>*{margin-block-end:0;margin-block-start:0}.notification-card__caption>*+*{margin-block-start:.25rem}.notification-card__title{font-size:var(--root-font-size-base)}.notification-card__link{color:var(--root-base-color-heading);text-decoration:none}.notification-card__link:hover,.notification-card__link:focus{color:var(--root-base-color-link)}.media-list{--column: 2;list-style:none;margin:0;padding:0;display:grid;gap:1.5rem;grid-template-columns:repeat(var(--column),minmax(0,1fr))}@media (min-width: 32em){.media-list{--column: 3}}@media (min-width: 48em){.media-list{--column: 4}}@media (min-width: 64em){.media-list{--column: 6}}@media (min-width: 80em){.media-list{--column: 8}}.media-list>*+*{margin-block-start:0}.media-item{border-radius:var(--root-border-radius-lg);line-height:var(--root-line-height-md);position:relative}.media-item[aria-checked=true],.media-item:focus-visible{outline:3px solid var(--root-btn-color-primary-background);outline-offset:3px}.media-item__background{align-items:center;aspect-ratio:1;background-color:var(--root-media-color-background);border-radius:var(--root-border-radius-lg);display:flex;flex-direction:column;gap:.25rem;justify-content:center;padding:1rem}.media-item__icon{--size: 1.5rem;block-size:var(--size);color:var(--root-media-color-icon);inline-size:var(--size)}.media-item__name{overflow:hidden;text-overflow:ellipsis;white-space:inherit;max-inline-size:100%;text-align:center}@supports (-webkit-line-clamp: 2){.media-item__name{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2}}.media-item__selected{--size: 1.5rem;align-items:center;background-color:var(--root-btn-color-primary-background);block-size:var(--size);border-radius:var(--root-border-radius-sm);color:var(--root-btn-color-primary-foreground);display:flex;inline-size:var(--size);inset:.5rem .5rem auto auto;justify-content:center;position:absolute}.media-item__selected svg{--size: 1rem;block-size:var(--size);inline-size:var(--size)}.media-item .progressbar{margin-block-start:1rem}.media-item img{aspect-ratio:1;border-radius:var(--root-border-radius-lg);inline-size:100%;object-fit:cover}.app-widget{align-items:center;background-color:var(--root-base-color-background);border:1px solid var(--root-base-color-border);border-radius:var(--root-border-radius-sm);box-shadow:0 0 .25rem #17658f0d;display:flex;justify-content:space-between}.app-widget--primary{background-color:var(--root-base-color-primary);border:0}.app-widget--primary .app-widget__title,.app-widget--primary .app-widget__data{color:#fff}.app-widget--secondary{background-color:var(--root-base-color-primary);border:0}.app-widget--secondary .app-widget__title,.app-widget--secondary .app-widget__data{color:#fff}.app-widget--summary{gap:1.5rem;justify-content:start;padding:1.5rem}.app-widget--summary .app-widget__column{padding:0}.app-widget--small-data .app-widget__data{font-size:clamp(.996625rem,2vw + 1rem,1.1725rem)}.app-widget__icon{--dimension: 4rem;align-items:center;background-color:var(--root-widget-color-icon-background);block-size:var(--dimension);border-radius:var(--root-border-radius-lg);color:var(--root-base-color-primary);display:flex;flex-shrink:0;inline-size:var(--dimension);justify-content:center}.app-widget__icon svg{--dimension: 1.5rem;block-size:var(--dimension);inline-size:var(--dimension)}.app-widget__title{font-size:.938rem;font-weight:600;margin-block:0}.app-widget__data-row{align-items:center;display:flex;gap:1rem}.app-widget__data{line-height:var(--root-line-height-heading);margin-block:0}.app-widget__column{align-items:start;color:var(--root-base-color-heading);display:flex;flex-direction:column;font-size:clamp(1.9465332031rem,2vw + 1rem,2.2900390625rem);font-weight:700;line-height:var(--root-line-height-heading);padding:1.5rem}.app-widget__column .app-widget__trending{margin-block-start:.25rem}.app-widget__chart{max-inline-size:65%}.app-widget__chart foreignObject{padding-block:1rem}.app-sidebar{block-size:100%;border-inline-end:1px solid var(--root-base-color-border);display:flex;flex-direction:column;gap:1.5rem;padding-block:0 1.5rem}.app-sidebar__logo{block-size:1.25rem;display:inline-flex}.app-sidebar__search{display:none}@media (min-width: 64em){.app-sidebar__search{display:flex}}.app-sidebar__header{align-items:center;block-size:var(--root-header-block-size);border-block-end:1px solid var(--root-base-color-border);display:flex;flex-shrink:0;justify-content:space-between;margin-inline:1.5rem}.app-sidebar__body{flex-grow:1;margin-inline:.75rem;overflow-y:auto;padding-inline:.75rem}.app-sidebar__body::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.app-sidebar__body::-webkit-scrollbar-thumb{background:var(--root-scrollbar-color-thumb-background);border-radius:.15em}.app-sidebar__body::-webkit-scrollbar-thumb:hover{background:var(--root-scrollbar-color-thumb-background-hover)}.app-sidebar__body::-webkit-scrollbar-track{background:var(--root-scrollbar-color-track-background);border-radius:.15em}.app-sidebar__body>*+*{border-block-start:1px solid var(--root-base-color-border);margin-block-start:1rem;padding-block-start:1rem}.app-header{-webkit-backdrop-filter:saturate(180%) blur(.25rem);backdrop-filter:saturate(180%) blur(.25rem);background-color:var(--root-header-color-background);border-block-end:1px solid var(--root-base-color-border);inset-block-start:0;position:sticky;z-index:15}.app-header__inner{align-items:center;block-size:var(--root-header-block-size);display:flex;flex-wrap:wrap;gap:clamp(1rem,5vw,3rem);justify-content:space-between;margin-inline:var(--root-container-gap)}.app-header__column{align-items:center;display:flex;flex-grow:1;gap:clamp(1rem,5vw,1.5rem)}.app-header__actions{align-items:center;display:flex;gap:clamp(1rem,5vw,1.5rem)}.app-header__actions--secondary{gap:1rem}.app-header__logo{block-size:1.25rem;display:inline-flex}@media (min-width: 64em){.app-header__logo{display:none}}.app-header__breadcrumb{display:none}@media (min-width: 64em){.app-header__breadcrumb{display:flex}}.app-heading{padding-block:clamp(1.5rem,5vw,3rem)}.app-heading__inner{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;justify-content:space-between}.app-heading__inner--column{flex-direction:column}.app-heading__caption>*{margin-block-end:0;margin-block-start:0}.app-heading__caption>*+*{margin-block-start:.5rem}.app-heading__title{font-weight:700}.app-heading__description{align-items:center;display:flex;flex-wrap:wrap;font-size:1rem;gap:.5rem 1.5rem}.app-heading__description>*{margin-block-end:0;margin-block-start:0}.app-heading__description>*+*{margin-block-start:.25rem}.app-heading__actions{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:end}.app-body{display:flex;flex-direction:column;gap:1.5rem}.app-actions{justify-content:space-between}@media (min-width: 80em){.app-actions--sidebar{margin-inline-end:21.5rem}}.app-actions,.app-actions__column{display:flex;flex-wrap:wrap;gap:1.5rem}.app-footer{padding-block:clamp(1.5rem,5vw,3rem);text-align:center}.app-footer__created-with{margin-block:0}.btn--light{background-color:var(--root-btn-color-light-background);border-color:var(--root-btn-color-light-background);color:var(--root-btn-color-light-foreground)}.btn--light:focus-visible{outline:2px solid var(--root-btn-color-light-focus-ring);outline-offset:2px}.btn--light:hover,.btn--light.btn--active{background-color:var(--root-btn-color-light-background-hover);border-color:var(--root-btn-color-light-background-hover);color:var(--root-btn-color-light-foreground-hover)}.btn--delete{background-color:var(--root-btn-color-delete-background);border-color:var(--root-btn-color-delete-background);color:var(--root-btn-color-delete-foreground)}.btn--delete:focus-visible{outline:2px solid var(--root-btn-color-delete-focus-ring);outline-offset:2px}.btn--delete:hover{background-color:var(--root-btn-color-delete-background-hover);border-color:var(--root-btn-color-delete-background-hover);color:var(--root-btn-color-delete-foreground-hover)}.btn--dark{background-color:var(--root-btn-color-dark-background);border-color:var(--root-btn-color-dark-background);color:var(--root-btn-color-dark-foreground)}.btn--dark:focus-visible{outline:2px solid var(--root-btn-color-dark-background);outline-offset:2px}.btn--dark:hover{background-color:var(--root-btn-color-dark-background-hover);border-color:var(--root-btn-color-dark-background-hover);color:var(--root-btn-color-dark-foreground)}.btn--outline-dark{background-color:transparent;border-color:var(--root-btn-color-dark-outline-border);color:var(--root-btn-color-dark-outline-foreground)}.btn--outline-dark:focus-visible{outline:2px solid var(--root-btn-color-dark-outline-focus-ring);outline-offset:2px}.btn--outline-dark:hover{background-color:var(--root-btn-color-dark-outline-background-hover);border-color:var(--root-btn-color-dark-outline-background-hover);color:var(--root-btn-color-dark-outline-foreground-hover)}.btn--counter{position:relative}.btn__counter{background-color:var(--root-alert-color-danger);border-radius:var(--root-border-radius-sm);color:var(--root-btn-color-primary-foreground);font-size:.6375rem;inset:-.5em -.5em auto auto;min-inline-size:1.25rem;padding:.45em;position:absolute;text-align:center}.apexcharts-legend-series{align-items:center;display:flex!important;gap:.25rem}.apexcharts-legend{display:flex;gap:1rem}.apexcharts-legend>*{margin:0!important}.apexcharts-text,.apexcharts-legend-text{color:var(--root-base-color-text)!important;fill:var(--root-base-color-text)}.apexcharts-tooltip,.apexcharts-tooltip-title{background:var(--root-base-color-background)!important;border-color:var(--root-base-color-border)!important}.apexcharts-tooltip-title{line-height:1;padding-block:.75em!important}.apexcharts-xaxis-tick,.apexcharts-gridline,.apexcharts-grid-borders line:last-child{stroke:var(--root-base-color-border)}.form-group-stack>*{margin-block-end:0;margin-block-start:0}.form-group-stack>*+*{margin-block-start:1rem}.form-group-stack--bordered>*+*{border-block-start:1px solid var(--root-base-color-border);padding-block-start:1rem}legend{font-family:var(--root-font-family-heading)}.form-control[type=color]{--root-border-radius: clamp(1.5rem, 5vw, 3rem)}.required-marker{color:var(--root-alert-color-danger)}.progressbar{display:flex;flex-direction:column;gap:.5rem;inline-size:100%}.progressbar__inner{background-color:var(--root-form-color-background);block-size:.5rem;border-radius:var(--root-border-radius-sm);box-shadow:inset 0 0 0 1px var(--root-form-color-border);position:relative}.progressbar__indicator{background-color:var(--root-base-color-primary);block-size:100%;border-radius:var(--root-border-radius-sm);inset:0 auto 0 0;position:absolute}.progressbar__indicator:not([style*=inline-size]){animation:1s progress infinite linear alternate;inline-size:20%}.progressbar__caption{text-align:center}@keyframes progress{0%{inset-inline-start:0%}to{inset-inline-start:80%}}@media (min-width: 32em){.display--flex\:xs{display:flex!important}}@media (min-width: 48em){.display--flex\:sm{display:flex!important}}@media (min-width: 64em){.display--flex\:md{display:flex!important}}@media (min-width: 80em){.display--flex\:lg{display:flex!important}}@media (min-width: 90em){.display--flex\:xl{display:flex!important}}@media (min-width: 110em){.display--flex\:xxl{display:flex!important}}@media (min-width: 32em){.display--none\:xs{display:none!important}}@media (min-width: 48em){.display--none\:sm{display:none!important}}@media (min-width: 64em){.display--none\:md{display:none!important}}@media (min-width: 80em){.display--none\:lg{display:none!important}}@media (min-width: 90em){.display--none\:xl{display:none!important}}@media (min-width: 110em){.display--none\:xxl{display:none!important}}.m-block\:0{margin-block:0!important}:root{--root-sidebar-inline-size: 20rem;--root-header-block-size: 4.5rem;--root-container-gap: clamp(1.5rem, 5vw, 3rem)}[x-cloak]{visibility:hidden!important}img{border-radius:var(--root-border-radius-sm)} diff --git a/public/build/assets/app-dba7d4c7.css b/public/build/assets/app-dba7d4c7.css new file mode 100644 index 000000000..7b96db816 --- /dev/null +++ b/public/build/assets/app-dba7d4c7.css @@ -0,0 +1 @@ +@font-face{font-display:swap;font-family:Manrope;font-style:normal;font-weight:400;src:url(/vendor/root/fonts/manrope-v14-latin-regular.woff2) format("woff2")}@font-face{font-display:swap;font-family:Manrope;font-style:normal;font-weight:500;src:url(/vendor/root/fonts/manrope-v14-latin-500.woff2) format("woff2")}@font-face{font-display:swap;font-family:Manrope;font-style:normal;font-weight:600;src:url(/vendor/root/fonts/manrope-v14-latin-600.woff2) format("woff2")}@font-face{font-display:swap;font-family:Manrope;font-style:normal;font-weight:700;src:url(/vendor/root/fonts/manrope-v14-latin-800.woff2) format("woff2")}@font-face{font-display:swap;font-family:Open Sans;font-style:normal;font-weight:400;src:url(/vendor/root/fonts/open-sans-v35-latin-regular.woff2) format("woff2")}@font-face{font-display:swap;font-family:Open Sans;font-style:normal;font-weight:700;src:url(/vendor/root/fonts/open-sans-v35-latin-700.woff2) format("woff2")}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;block-size:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-inline-size:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{block-size:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--root-alert-color-danger: hsl(0, 71%, 51%);--root-alert-color-info: hsl(195, 100%, 42%);--root-alert-color-success: hsl(150, 100%, 33%);--root-alert-color-warning: hsl(48, 89%, 55%)}:root{--root-base-color-background: hsl(0, 0%, 100%);--root-base-color-blockquote-border: hsl(214, 98%, 49%);--root-base-color-border: hsl(215, 100%, 96%);--root-base-color-code-background: #f0f6ff;--root-base-color-code-foreground: hsl(205, 100%, 2%);--root-base-color-heading: hsl(205, 100%, 2%);--root-base-color-link: hsl(214, 98%, 49%);--root-base-color-link-hover: #0257c6;--root-base-color-mark-background: hsl(50, 100%, 80%);--root-base-color-mark-foreground: hsl(205, 100%, 2%);--root-base-color-marker: hsl(214, 98%, 49%);--root-base-color-primary: hsl(214, 98%, 49%);--root-base-color-secondary: hsl(160, 89%, 46%);--root-base-color-text: hsl(208, 9%, 42%);--root-base-color-primary-lightest: hsl(210, 60%, 98%)}:root{--root-btn-color-primary-background: hsl(214, 98%, 49%);--root-btn-color-primary-background-hover: #0256c5;--root-btn-color-primary-foreground: hsl(0, 0%, 100%);--root-btn-color-primary-shadow: #aed1fe;--root-btn-color-secondary-background: hsl(160, 89%, 46%);--root-btn-color-secondary-background-hover: #0aae77;--root-btn-color-secondary-foreground: hsl(0, 0%, 100%);--root-btn-color-secondary-shadow: #a3fadd;--root-btn-color-dark-background: hsl(205, 100%, 2%);--root-btn-color-dark-background-hover: hsl(205, 100%, 5%);--root-btn-color-dark-foreground: hsl(0, 0%, 100%);--root-btn-color-dark-outline-background-hover: hsl(205, 100%, 2%);--root-btn-color-dark-outline-border: hsl(260, 4%, 70%);--root-btn-color-dark-outline-foreground: hsl(205, 100%, 2%);--root-btn-color-dark-outline-foreground-hover: hsl(0, 0%, 100%);--root-btn-color-dark-outline-focus-ring: hsl(205, 100%, 2%);--root-btn-color-dark-shadow: hsla(205, 100%, 2%, .05);--root-btn-color-light-background: hsl(210, 60%, 98%);--root-btn-color-light-background-hover: hsl(214, 98%, 49%);--root-btn-color-light-focus-ring: hsl(214, 98%, 49%);--root-btn-color-light-foreground: hsl(214, 98%, 49%);--root-btn-color-light-foreground-hover: hsl(0, 0%, 100%);--root-btn-color-delete-background: #fceeee;--root-btn-color-delete-background-hover: hsl(0, 71%, 51%);--root-btn-color-delete-focus-ring: hsl(0, 71%, 51%);--root-btn-color-delete-foreground: hsl(0, 71%, 51%);--root-btn-color-delete-foreground-hover: hsl(0, 0%, 100%);--root-btn-color-primary-outline-foreground: hsl(214, 98%, 49%)}:root{--root-form-color-background: hsl(0, 0%, 100%);--root-form-color-background-disabled: hsl(0, 0%, 95%);--root-form-color-border: hsl(260, 4%, 75%);--root-form-color-border-disabled: hsl(215, 63%, 93%);--root-form-color-border-focus: hsl(214, 98%, 49%);--root-form-color-check-background: hsl(214, 98%, 49%);--root-form-color-check-focus-ring: hsl(214, 98%, 49%);--root-form-color-check-foreground: hsl(0, 0%, 100%);--root-form-color-group-label-background: hsl(210, 60%, 98%);--root-form-color-group-label-foreground: hsl(208, 9%, 42%);--root-form-color-invalid: hsl(0, 71%, 51%);--root-form-color-invalid-focus-ring: rgba(219, 41, 41, .25);--root-form-color-label: hsl(205, 100%, 2%);--root-form-color-legend: hsl(205, 100%, 2%);--root-form-color-placeholder: hsl(208, 7%, 40%);--root-form-color-range-thumb-background: hsl(214, 98%, 49%);--root-form-color-range-thumb-focus-ring: hsl(214, 98%, 49%);--root-form-color-range-track-background: hsl(215, 63%, 93%);--root-form-color-ring-focus: rgba(2, 109, 247, .25);--root-form-color-select-foreground: hsl(205, 100%, 2%);--root-form-color-text: hsl(208, 9%, 42%);--root-form-color-valid: hsl(150, 100%, 33%);--root-form-color-valid-focus-ring: rgba(0, 168, 84, .25)}:root{--root-selection-color-foreground: hsl(0, 0%, 100%);--root-selection-color-background: hsl(214, 98%, 49%)}:root{--root-scrollbar-color-thumb-background: hsla(0, 0%, 0%, .15);--root-scrollbar-color-thumb-background-hover: hsla(0, 0%, 0%, .25);--root-scrollbar-color-track-background: hsla(0, 0%, 0%, .05)}:root{--root-table-color-border: hsl(215, 63%, 93%);--root-table-color-caption: hsl(208, 9%, 42%);--root-table-color-heading: hsl(205, 100%, 2%);--root-table-color-hover: hsl(210, 60%, 98%);--root-table-color-stripe: hsl(210, 60%, 98%);--root-table-color-text: hsl(208, 9%, 42%)}:root{--root-breadcrumb-color-separator: hsl(0, 0%, 80%)}:root{--root-combobox-color-item-background: hsl(210, 60%, 98%);--root-combobox-color-item-foreground: hsl(214, 98%, 49%)}:root{--root-data-table-color-icon: hsl(0, 0%, 80%)}:root{--root-header-color-background: hsla(0, 0%, 100%, .95)}:root{--root-navigation-color-arrow: hsla(0, 0%, 0%, .15)}:root{--root-main-color-background: hsl(210, 60%, 98%)}:root{--root-media-color-background: hsl(210, 60%, 98%);--root-media-color-dropzone-background: hsla(214, 98%, 49%, .75);--root-media-color-dropzone-border: hsl(214, 98%, 40%);--root-media-color-icon: hsl(214, 98%, 49%)}:root{--root-modal-color-background: hsla(210, 60%, 98%, .9)}:root{--root-search-color-icon: hsla(229, 26%, 48%, .25)}:root{--root-prism-color-color: hsl(243, 14%, 29%);--root-prism-color-background: hsl(0, 0%, 98%);--root-prism-color-comment: hsl(225, 14%, 46%);--root-prism-color-punctuation: hsl(279, 50%, 53%);--root-prism-color-namespace: hsl(173, 100%, 24%);--root-prism-color-deleted: hsla(1, 83%, 63%, .56);--root-prism-color-boolean: hsl(0, 44%, 53%);--root-prism-color-number: hsl(315, 90%, 35%);--root-prism-color-constant: hsl(221, 57%, 52%);--root-prism-color-class-name: hsl(0, 0%, 7%);--root-prism-color-regex: hsl(1, 48%, 59%)}:root{--root-widget-color-icon-background: #f5f9ff}:root{--root-font-family-base: Open Sans, sans-serif;--root-font-family-cursive: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--root-font-family-heading: Manrope, sans-serif;--root-font-size-base: .938rem;--root-font-size-lead: clamp(1.15rem, 2vw, 1.35rem);--root-font-size-lg: 1.125rem;--root-font-size-ratio: 1.25;--root-font-size-sm: .875rem;--root-font-weight-heading: 600;--root-inline-border-radius: .45rem;--root-inline-padding: .1em .3em;--root-line-height-base: 1.8;--root-line-height-heading:calc(4px + 2ex);--root-line-height-lg: 1.8;--root-line-height-md: 1.5;--root-line-height-sm: 1.2;--root-border-radius-lg: .725rem;--root-border-radius-sm: .45rem;--root-container-inline-size: 84rem;--root-page-margin: 2cm;--root-hidden-elements: header, footer, aside, nav, form, iframe, [class^="aspect-ratio"]}@media (prefers-reduced-motion: no-preference){:root{--root-duration: .15s;--root-timing-function: ease-in-out}}.sr-only{block-size:1px!important;border:0!important;clip:rect(0,0,0,0)!important;inline-size:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important}[tabindex="-1"]:focus{outline:none!important}::selection{background-color:var(--root-selection-color-background);color:var(--root-selection-color-foreground);text-shadow:none}html{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}*,:before,:after{box-sizing:inherit}body{background:var(--root-base-color-background);color:var(--root-base-color-text)}a{color:var(--root-base-color-link);text-decoration:underline;transition-duration:var(--root-duration);transition-property:color;transition-timing-function:var(--root-timing-function)}a:hover{color:var(--root-base-color-link-hover)}button{color:inherit}a,button{touch-action:manipulation}hr{border:0;border-block-start:1px solid var(--root-base-color-border)}img{block-size:auto;display:block;max-inline-size:100%;-webkit-user-select:none;user-select:none}iframe{block-size:100%;display:block;inline-size:100%}figure{margin-inline:0}figure figcaption{margin-block-start:.5rem;text-align:center}.table-responsive{--inline-size: 40rem;-webkit-overflow-scrolling:touch;overflow-x:auto}.table-responsive table{min-inline-size:var(--inline-size)}.table{--root-line-height: 1.5;--root-padding: 1rem;--root-responsive-inline-size: 40rem;border-collapse:collapse;color:var(--root-table-color-text);inline-size:100%}.table caption{color:var(--root-table-color-caption);margin-block-end:1rem}.table th,.table td{border-block-end:1px solid var(--root-table-color-border);line-height:var(--root-line-height);padding:var(--root-padding)}.table th{color:var(--root-table-color-heading);text-align:inherit;text-align:-webkit-match-parent}.table--striped>tbody>tr:nth-child(odd){background-color:var(--root-table-color-stripe)}.table--hover>tbody>tr:hover{background:var(--root-table-color-hover)}.table--clear-border th,.table--clear-border td{border:0}.table--in-line th:first-child,.table--in-line td:first-child{padding-inline-start:0}.table--in-line th:last-child,.table--in-line td:last-child{padding-inline-end:0}.table--sm{--root-padding: .5rem}.table--sm th,.table--sm td{padding:var(--root-padding)}.table--rounded th:first-child,.table--rounded td:first-child{border-end-start-radius:var(--root-border-radius-sm);border-start-start-radius:var(--root-border-radius-sm)}.table--rounded th:last-child,.table--rounded td:last-child{border-end-end-radius:var(--root-border-radius-sm);border-start-end-radius:var(--root-border-radius-sm)}html{-webkit-tap-highlight-color:hsla(0,0%,0%,0)}body{font-family:var(--root-font-family-base);font-size:var(--root-font-size-base);line-height:var(--root-line-height-base)}p,li,h1,h2,h3,h4,h5,h6{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{color:var(--root-base-color-heading);font-family:var(--root-font-family-heading);font-weight:var(--root-font-weight-heading);line-height:var(--root-line-height-heading)}h1{font-size:clamp(1.9465332031rem,2vw + 1rem,2.2900390625rem)}h2{font-size:clamp(1.5572265625rem,2vw + 1rem,1.83203125rem)}h3{font-size:clamp(1.24578125rem,2vw + 1rem,1.465625rem)}h4{font-size:clamp(.996625rem,2vw + 1rem,1.1725rem)}h5,h6{font-size:.938rem}ul,ol{list-style-position:inside}ul>*,ol>*{margin-block-end:0;margin-block-start:0}ul>*+*,ol>*+*{margin-block-start:.25rem}ul li,ol li{list-style-position:outside}ul li::marker,ol li::marker{color:var(--root-base-color-marker)}li>ul,li>ol{margin-block-start:.25rem}dl dt{color:var(--root-base-color-heading);font-weight:700}dl dd{margin:0}dl dd+dt{margin-block-start:1rem}.quote{border-inline-start:.5rem solid var(--root-base-color-blockquote-border);padding-inline-start:1.5rem}.quote>*{margin-block-end:0;margin-block-start:0}.quote>*+*{margin-block-start:.5rem}.quote blockquote{border-inline-start:0;padding-inline-start:0}.quote figcaption{text-align:start}blockquote{border-inline-start:.5rem solid var(--root-base-color-blockquote-border);margin-inline-start:0;padding-inline-start:1.5rem}blockquote>*{margin-block-end:0;margin-block-start:0}blockquote>*+*{margin-block-start:.5rem}abbr[title]{border-block-end:1px dotted;cursor:help;text-decoration:none}mark{background-color:var(--root-base-color-mark-background);border-radius:var(--root-inline-border-radius);color:var(--root-base-color-mark-foreground);padding:var(--root-inline-padding)}code,kbd,samp{background-color:var(--root-base-color-code-background);border-radius:var(--root-inline-border-radius);color:var(--root-base-color-code-foreground);padding:var(--root-inline-padding)}.lead{font-size:var(--root-font-size-lead)}.hidden,[hidden]{display:none!important}.h1{font-size:clamp(1.9465332031rem,2vw + 1rem,2.2900390625rem)}.h2{font-size:clamp(1.5572265625rem,2vw + 1rem,1.83203125rem)}.h3{font-size:clamp(1.24578125rem,2vw + 1rem,1.465625rem)}.h4{font-size:clamp(.996625rem,2vw + 1rem,1.1725rem)}.h5,.h6{font-size:.938rem}.btn{--root-border-radius: .45rem;--root-border-width: 1px;--root-font-family: Manrope, sans-serif;--root-font-size: .938rem;--root-font-weight: 600;--root-gap: .5rem;--root-icon-padding: .75em;--root-icon-size: 1em;--root-padding: .75em 1em;--root-shadow-size: .25rem;align-items:center;border-radius:var(--root-border-radius);border-style:solid;border-width:var(--root-border-width);cursor:pointer;display:inline-flex;font-family:var(--root-font-family);font-size:var(--root-font-size);font-weight:var(--root-font-weight);gap:var(--root-gap);justify-content:center;line-height:1;padding:var(--root-padding);text-align:start;text-decoration:none;transition-duration:var(--root-duration);transition-property:background-color,border-color,box-shadow,color;transition-timing-function:var(--root-timing-function)}.btn:focus{outline-color:transparent;outline-style:solid}.btn:disabled{opacity:.5;pointer-events:none}.btn--icon,.btn--icon.btn--sm,.btn--icon.btn--lg{padding:var(--root-icon-padding)}.btn__icon{block-size:var(--root-icon-size);flex-shrink:0;inline-size:var(--root-icon-size);pointer-events:none}.btn__icon--sm{block-size:var(--root-icon-size);inline-size:var(--root-icon-size)}.btn--sm{--root-font-size: .8rem;--root-gap: .25rem;--root-icon-padding: .5em;--root-icon-size: .8rem;--root-padding: .5em .75em;font-size:var(--root-font-size);gap:var(--root-gap);padding:var(--root-padding)}.btn--lg{--root-font-size: 1rem;--root-gap: .5rem;--root-icon-padding: .9em;--root-padding: .9em 1.15em}.btn--block{inline-size:100%}.btn--primary{background-color:var(--root-btn-color-primary-background);border-color:var(--root-btn-color-primary-background);color:var(--root-btn-color-primary-foreground)}.btn--primary:focus-visible{outline:2px solid var(--root-btn-color-primary-background);outline-offset:2px}.btn--primary:hover{background-color:var(--root-btn-color-primary-background-hover);border-color:var(--root-btn-color-primary-background-hover);color:var(--root-btn-color-primary-foreground)}.btn--primary-shadow{box-shadow:0 .55em 1em -.2em var(--root-btn-color-primary-shadow),0 .15em .35em -.185em var(--root-btn-color-primary-shadow)}.btn--secondary{background-color:var(--root-btn-color-secondary-background);border-color:var(--root-btn-color-secondary-background);color:var(--root-btn-color-secondary-foreground)}.btn--secondary:focus-visible{outline:2px solid var(--root-btn-color-secondary-background);outline-offset:2px}.btn--secondary:hover{background-color:var(--root-btn-color-secondary-background-hover);border-color:var(--root-btn-color-secondary-background-hover);color:var(--root-btn-color-secondary-foreground)}.btn--secondary-shadow{box-shadow:0 .55em 1em -.2em var(--root-btn-color-secondary-shadow),0 .15em .35em -.185em var(--root-btn-color-secondary-shadow)}.btn--outline-primary{background-color:transparent;border-color:var(--root-btn-color-primary-background);color:var(--root-btn-color-primary-outline-foreground)}.btn--outline-primary:focus-visible{outline:2px solid var(--root-btn-color-primary-background);outline-offset:2px}.btn--outline-primary:hover{background-color:var(--root-btn-color-primary-background);border-color:var(--root-btn-color-primary-background);color:var(--root-btn-color-primary-foreground)}.btn--outline-secondary{background-color:transparent;border-color:var(--root-btn-color-secondary-background);color:var(--root-btn-color-secondary-background)}.btn--outline-secondary:focus-visible{outline:2px solid var(--root-btn-color-secondary-background);outline-offset:2px}.btn--outline-secondary:hover{background-color:var(--root-btn-color-secondary-background);border-color:var(--root-btn-color-secondary-background);color:var(--root-btn-color-secondary-foreground)}.form-file::file-selector-button{--root-border-radius: .45rem;--root-border-width: 1px;--root-font-family: Manrope, sans-serif;--root-font-size: .938rem;--root-font-weight: 600;--root-gap: .5rem;--root-icon-padding: .75em;--root-icon-size: 1em;--root-padding: .75em 1em;--root-shadow-size: .25rem;align-items:center;border-radius:var(--root-border-radius);border-style:solid;border-width:var(--root-border-width);cursor:pointer;display:inline-flex;font-family:var(--root-font-family);font-size:var(--root-font-size);font-weight:var(--root-font-weight);gap:var(--root-gap);justify-content:center;line-height:1;padding:var(--root-padding);text-align:start;text-decoration:none;transition-duration:var(--root-duration);transition-property:background-color,border-color,box-shadow,color;transition-timing-function:var(--root-timing-function)}.form-file:focus{outline-color:transparent;outline-style:solid}.form-file:disabled{opacity:.5;pointer-events:none}.form-file--sm::file-selector-button{--root-font-size: .8rem;--root-gap: .25rem;--root-icon-padding: .5em;--root-icon-size: .8rem;--root-padding: .5em .75em;font-size:var(--root-font-size);gap:var(--root-gap);padding:var(--root-padding)}.form-file--lg::file-selector-button{--root-font-size: 1rem;--root-gap: .5rem;--root-icon-padding: .9em;--root-padding: .9em 1.15em}.form-file--block::file-selector-button{inline-size:100%}.form-file{display:block}.form-file:focus{outline:revert}.form-file:focus-within::file-selector-button{background-color:var(--root-btn-color-primary-background-hover)}.form-file::file-selector-button{background-color:var(--root-btn-color-primary-background);border-color:var(--root-btn-color-primary-background);color:var(--root-btn-color-primary-foreground);margin-inline-end:1rem}.form-file::file-selector-button:hover{background-color:var(--root-btn-color-primary-background-hover);border-color:var(--root-btn-color-primary-background-hover);color:var(--root-btn-color-primary-foreground)}.form-file::file-selector-button-shadow{box-shadow:0 .55em 1em -.2em var(--root-btn-color-primary-shadow),0 .15em .35em -.185em var(--root-btn-color-primary-shadow)}.form-label{color:var(--root-form-color-label);font-family:Manrope,sans-serif;font-weight:600;line-height:1.5;text-align:start}.form-control{--webkit-date-line-height: 1.375;--root-border-radius: .45rem;--root-border-width: 1px;--root-font-size: .938rem;--root-line-height: 1.5;--root-padding: .5em .75em;--root-textarea-block-size: 6rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--root-form-color-background);border:var(--root-border-width) solid var(--root-form-color-border);border-radius:var(--root-border-radius);box-sizing:border-box;color:var(--root-form-color-text);display:block;font-size:var(--root-font-size);inline-size:100%;line-height:var(--root-line-height);padding:var(--root-padding);transition-duration:var(--root-duration);transition-property:border,box-shadow;transition-timing-function:var(--root-timing-function)}.form-control::placeholder{color:var(--root-form-color-placeholder)}.form-control::-webkit-datetime-edit{line-height:var(--webkit-date-line-height)}.form-control:focus{border-color:var(--root-form-color-border-focus);box-shadow:0 0 0 .25rem var(--root-form-color-ring-focus);outline:2px solid transparent}.form-control[type=color]{--root-aspect-ratio: 1;--root-block-size: 100%;--root-inline-size: 2.625rem;--root-padding: .5em;aspect-ratio:var(--root-aspect-ratio);block-size:var(--root-block-size);inline-size:var(--root-inline-size);padding:var(--root-padding)}.form-control[type=color]::-webkit-color-swatch-wrapper{padding:0}.form-control[type=color]::-moz-color-swatch{border:0;border-radius:var(--root-border-radius)}.form-control[type=color]::-webkit-color-swatch{border:0;border-radius:var(--root-border-radius)}.form-control[disabled],.form-control[disabled=true]{background-color:var(--root-form-color-background-disabled);border-color:var(--root-form-color-border-disabled);cursor:not-allowed}textarea.form-control{block-size:var(--root-textarea-block-size);min-block-size:var(--root-textarea-block-size);resize:vertical}.form-control--valid,.form-control--invalid{background-position:center right .5em;background-repeat:no-repeat;background-size:1.25em auto;padding-inline-end:2em}html[dir=rtl] .form-control--valid,html[dir=rtl] .form-control--invalid{background-position:center left .5em}.form-control--valid{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"%3e%3cpath d="M12,2c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm0,1.667c4.599,-0 8.333,3.734 8.333,8.333c0,4.599 -3.734,8.333 -8.333,8.333c-4.599,0 -8.333,-3.734 -8.333,-8.333c-0,-4.599 3.734,-8.333 8.333,-8.333Zm-1.476,10.182l-2.984,-2.984c-0.065,-0.065 -0.17,-0.065 -0.235,0l-0.943,0.943c-0.065,0.065 -0.065,0.171 -0,0.236l4.043,4.042c0.033,0.033 0.076,0.05 0.119,0.049c0.044,0.001 0.087,-0.016 0.12,-0.049l6.994,-6.994c0.065,-0.065 0.065,-0.17 0,-0.235l-0.943,-0.943c-0.065,-0.065 -0.17,-0.065 -0.235,-0l-5.936,5.935Z" style="fill:hsl%28150, 100%, 33%%29;"/%3e%3c/svg%3e');border-color:var(--root-alert-color-success)}.form-control--valid:focus{border-color:var(--root-form-color-valid);box-shadow:0 0 0 .25rem var(--root-form-color-valid-focus-ring);outline:2px solid transparent}.form-control--invalid{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"%3e%3cpath d="M12,2c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm0,1.667c4.599,-0 8.333,3.734 8.333,8.333c0,4.599 -3.734,8.333 -8.333,8.333c-4.599,0 -8.333,-3.734 -8.333,-8.333c-0,-4.599 3.734,-8.333 8.333,-8.333Zm0.813,11.649c-0,-0.081 -0.065,-0.146 -0.146,-0.146l-1.334,0c-0.081,0 -0.146,0.065 -0.146,0.146l0,1.169c0,0.08 0.065,0.146 0.146,0.146l1.334,-0c0.081,-0 0.146,-0.066 0.146,-0.146l-0,-1.169Zm-0,-7.784c-0,-0.09 -0.073,-0.163 -0.163,-0.163l-1.3,0c-0.09,0 -0.163,0.073 -0.163,0.163l0,6.351c0,0.09 0.073,0.163 0.163,0.163l1.3,-0c0.09,-0 0.163,-0.073 0.163,-0.163l-0,-6.351Z" style="fill:hsl%280, 71%, 51%%29;"/%3e%3c/svg%3e');border-color:var(--root-alert-color-danger)}.form-control--invalid:focus{border-color:var(--root-form-color-invalid);box-shadow:0 0 0 .25rem var(--root-form-color-invalid-focus-ring);outline:2px solid transparent}.form-control--sm{--webkit-date-line-height: 1.36;--root-border-radius: .35em;--root-padding: .1em .45em}.form-control--sm[type=color]{--root-aspect-ratio: 1;--root-block-size: 100%;--root-inline-size: 1.925rem;--root-padding: .25em}.form-control--lg{--webkit-date-line-height: 1.387;--root-padding: .65em 1em}.form-control--lg[type=color]{--root-aspect-ratio: 1;--root-block-size: 100%;--root-inline-size: 3.204rem;--root-padding: .5em}select.form-control:not([multiple]):not([size]){background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.507l-3.816,-3.815c-0.171,-0.172 -0.45,-0.172 -0.622,-0l-0.933,0.933c-0.172,0.172 -0.172,0.451 0,0.623l5.06,5.06c0.172,0.172 0.45,0.172 0.622,0l5.06,-5.06c0.172,-0.172 0.172,-0.451 -0,-0.623l-0.933,-0.933c-0.172,-0.172 -0.451,-0.172 -0.622,-0l-3.816,3.815Z" style="fill:hsl%28205, 100%, 2%%29;"/%3e%3c/svg%3e');background-position:center right .5em;background-repeat:no-repeat;background-size:1.25em auto;padding-inline-end:2em}html[dir=rtl] select.form-control:not([multiple]):not([size]){background-position:center left .5em}.form-check{--root-border-radius: .45rem;--root-border-width: 1px;--root-font-size: 1.125rem;--root-font-weight: 400;--root-line-height: 1.5;--root-margin-block: .1em;--root-vertical-alignment: center;align-items:var(--root-vertical-alignment);display:inline-flex;gap:.5rem}.form-check--vertical-center{align-items:center}.form-check--vertical-start{align-items:flex-start}.form-check--sm{--root-border-radius: .35em;--root-padding: .1em .45em}.form-check--sm .form-check__control{font-size:var(--root-font-size)}.form-check--lg{--root-padding: .65em 1em}.form-check__control{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--root-form-color-background);background-position:center;background-repeat:no-repeat;background-size:contain;block-size:1em;border:var(--root-border-width) solid var(--root-form-color-border);flex-shrink:0;font-size:var(--root-font-size);font-weight:var(--root-font-weight);inline-size:1em;line-height:1;margin-block:var(--root-margin-block);transition-duration:var(--root-duration);transition-property:border,box-shadow;transition-timing-function:var(--root-timing-function)}.form-check__control[type=radio]{border-radius:50%}.form-check__control[type=checkbox]{border-radius:var(--root-border-radius)}.form-check__control:focus-visible{outline:2px solid var(--root-form-color-check-focus-ring);outline-offset:2px}.form-check__control:checked{background-color:var(--root-form-color-check-background);border-color:var(--root-form-color-check-background)}.form-check__control:checked[type=radio]{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="6" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e')}.form-check__control:checked[type=checkbox]{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M9.525,13.777l-2.411,-2.412c-0.234,-0.233 -0.613,-0.233 -0.846,0l-1.27,1.27c-0.233,0.233 -0.233,0.612 0,0.846l4.104,4.103c0.116,0.117 0.269,0.175 0.422,0.175l0.003,0c0.152,0 0.305,-0.058 0.421,-0.175l9.054,-9.053c0.233,-0.234 0.233,-0.613 -0,-0.846l-1.27,-1.269c-0.233,-0.234 -0.612,-0.234 -0.846,-0l-7.361,7.361Z" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e')}.form-check__control:indeterminate[type=checkbox]{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M19.5,11.1c-0,-0.331 -0.269,-0.6 -0.6,-0.6l-13.8,0c-0.331,0 -0.6,0.269 -0.6,0.6l0,1.8c0,0.331 0.269,0.6 0.6,0.6l13.8,0c0.331,0 0.6,-0.269 0.6,-0.6l-0,-1.8Z" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e');background-color:var(--root-form-color-check-background);border-color:var(--root-form-color-check-background)}.form-check__control:disabled,.form-check__control.disabled{background-color:var(--root-form-color-background-disabled);border-color:var(--root-form-color-border-disabled);cursor:not-allowed}.form-check__control:disabled+.form-check__label,.form-check__control.disabled+.form-check__label{opacity:.5}.form-check__label{font-weight:var(--root-font-weight);line-height:var(--root-line-height)}.form-switch{--root-border-width: 1px;--root-font-size: 1.125rem;--root-font-weight: 600;--root-line-height: 1.5;--root-margin-block: .15em;--root-vertical-alignment: center;align-items:var(--root-vertical-alignment);display:inline-flex;gap:.5rem}.form-switch--block{inline-size:100%;justify-content:space-between}.form-switch--vertical-center{align-items:center}.form-switch--vertical-start{align-items:flex-start}.form-switch--sm{--root-font-size: .938rem}.form-switch--lg{--root-font-size: clamp(1.15rem, 2vw, 1.35rem)}.form-switch__control{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="8.5" style="fill:hsl%28260, 4%, 75%%29;"/%3e%3c/svg%3e');-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--root-form-color-background);background-position:left center;background-repeat:no-repeat;background-size:contain;block-size:1em;border:var(--root-border-width) solid var(--root-form-color-border);border-radius:2em;flex-shrink:0;font-size:var(--root-font-size);inline-size:2em;line-height:1;margin-block:var(--root-margin-block);transition-duration:var(--root-duration);transition-property:background-position,border,box-shadow;transition-timing-function:var(--root-timing-function)}.form-switch__control:checked{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="8.5" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e');background-color:var(--root-form-color-check-background);background-position:right center;border-color:var(--root-form-color-check-background)}.form-switch__control:disabled{background-color:var(--root-form-color-background-disabled);border-color:var(--root-form-color-border-disabled);cursor:not-allowed}.form-switch__control:disabled+.form-switch__label{opacity:.5}[dir=rtl] .form-switch__control{background-position:right center}[dir=rtl] .form-switch__control:checked{background-position:left center}.form-switch__label{font-weight:var(--root-font-weight);line-height:var(--root-line-height)}fieldset{--root-layout-gap: 1rem;--root-legend-font-size: .938rem;--root-legend-font-weight: 600;--root-gap: .5rem;border:0;margin:0;padding:0}fieldset>*{margin-block-end:0;margin-block-start:0}fieldset>*+*{margin-block-start:var(--root-layout-gap)}fieldset+fieldset{margin-block-start:3rem}legend{color:var(--root-form-color-legend);font-size:var(--root-legend-font-size);font-weight:var(--root-legend-font-weight)}.form-group-label{--root-border-radius: .45rem;--root-border-width: 1px;align-items:center;background-color:var(--root-form-color-group-label-background);border:var(--root-border-width) solid var(--root-form-color-border);border-radius:var(--root-border-radius);color:var(--root-form-color-group-label-foreground);display:flex;padding-inline:1rem}.form-group{--root-gap: .5rem;--root-row-container-inline-size: 40rem;display:flex;flex-direction:column;gap:var(--root-gap)}.form-group--horizontal-check{--root-gap: 1rem;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--root-gap)}.form-group--vertical-check{--root-gap: 1rem;align-items:start;flex-direction:column;gap:var(--root-gap)}.form-group--row{--root-container-inline-size: 38rem;--root-gap: .25rem 1rem;--root-label-inline-size: 10rem;--root-vertical-alignment: center;align-items:var(--root-vertical-alignment);display:grid;gap:var(--root-gap);grid-template-columns:minmax(0,1fr)}.form-group--row\:vertical-center{align-items:center}.form-group--row\:vertical-start{align-items:flex-start}@container form-group-container (inline-size > 38rem){.form-group--row{grid-template-columns:minmax(0,var(--root-label-inline-size)) minmax(0,1fr)}}@container form-group-container (inline-size > 38rem){.form-group--row .form-description,.form-group--row .field-feedback{grid-column-start:2}}.form-group--stacked{display:flex}.form-group--stacked>*+*{border-radius:0;margin-inline-start:-1px}.form-group--stacked>*:first-child{border-start-end-radius:0;border-start-start-radius:var(--root-border-radius);border-end-end-radius:0;border-end-start-radius:var(--root-border-radius)}.form-group--stacked>*:last-child{border-start-end-radius:var(--root-border-radius);border-start-start-radius:0;border-end-end-radius:var(--root-border-radius);border-end-start-radius:0}.form-group--stacked>*:only-child{border-radius:var(--root-border-radius)}.form-group--stacked>*:focus{z-index:2}.form-group-container{container:form-group-container/inline-size}.form-row--mixed{--inline-size: 20ch;display:flex;flex-wrap:wrap;gap:1rem}.form-row--mixed>*{flex:1 1 var(--inline-size)}.field-feedback{display:block;line-height:1.5}.field-feedback--valid{color:var(--root-alert-color-success)}.field-feedback--invalid{color:var(--root-alert-color-danger)}.form-range{--root-focus-ring-box-shadow-type: outside;--root-focus-ring-offset: 2px;--root-focus-ring-size: 2px;--root-focus-ring-type: outline;--root-thumb-block-size: 1rem;--root-thumb-border-radius: .5rem;--root-thumb-inline-size: 1rem;--root-track-block-size: .25rem;--root-track-border-radius: .15rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-block-start:calc(var(--root-thumb-block-size) / 2 - var(--root-track-block-size) / 2)}.form-range:focus-visible{outline:none}.form-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--root-form-color-range-thumb-focus-ring);outline-offset:2px}.form-range:focus-visible::-moz-range-thumb{outline:2px solid var(--root-form-color-range-thumb-focus-ring);outline-offset:2px}.form-range::-webkit-slider-runnable-track{background-color:var(--root-form-color-range-track-background);block-size:var(--root-track-block-size);border-radius:var(--root-track-border-radius)}.form-range::-moz-range-track{background-color:var(--root-form-color-range-track-background);block-size:var(--root-track-block-size);border-radius:var(--root-track-border-radius)}.form-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--root-form-color-range-thumb-background);block-size:var(--root-thumb-block-size);border-radius:var(--root-thumb-border-radius);inline-size:var(--root-thumb-inline-size);margin-block-start:calc(var(--root-track-block-size) / 2 - var(--root-thumb-block-size) / 2)}.form-range::-moz-range-thumb{background-color:var(--root-form-color-range-thumb-background);block-size:var(--root-thumb-block-size);border:0;border-radius:var(--root-thumb-border-radius);inline-size:var(--root-thumb-inline-size)}.form-range:disabled{cursor:not-allowed;opacity:.5}.form-description{--root-font-size: 1em;--root-font-weight: 400;color:var(--root-form-color-text);display:block;font-size:var(--root-font-size);font-weight:var(--root-font-weight);line-height:var(--root-line-height-md)}:root[data-theme-mode=dark]{--root-base-color-background: hsl(240, 30%, 14%);--root-base-color-blockquote-border: hsl(211, 99%, 46%);--root-base-color-border: hsla(0, 0%, 100%, .04);--root-base-color-card-border: hsl(207, 90%, 13%);--root-base-color-code-background: hsl(207, 64%, 21%);--root-base-color-code-foreground: hsl(0, 0%, 95%);--root-base-color-footer-background: hsla(0, 0%, 0%, .15);--root-base-color-heading: hsl(0, 0%, 95%);--root-base-color-link-hover: hsl(205, 100%, 62%);--root-base-color-link: hsl(205, 100%, 56%);--root-base-color-mark-background: hsl(50, 100%, 80%);--root-base-color-mark-foreground: hsl(240, 30%, 14%);--root-base-color-marker: hsl(211, 99%, 46%);--root-base-color-primary: hsl(211, 99%, 46%);--root-base-color-primary-lightest: hsl(240, 30%, 16%);--root-base-color-secondary: hsl(160, 89%, 46%);--root-base-color-text: hsl(0, 0%, 97%)}:root[data-theme-mode=dark]{--root-breadcrumb-color-arrow: hsla(0, 0%, 100%, .1)}:root[data-theme-mode=dark]{--root-btn-color-dark-background: hsl(0, 0%, 100%);--root-btn-color-dark-background-hover: hsl(0, 0%, 95%);--root-btn-color-dark-foreground: hsl(205, 100%, 5%);--root-btn-color-dark-outline-border: hsla(0, 0%, 100%, .15);--root-btn-color-dark-outline-foreground: hsl(0, 0%, 100%);--root-btn-color-dark-outline-foreground-hover: hsl(205, 100%, 2%);--root-btn-color-dark-outline-background-hover: hsl(0, 0%, 100%);--root-btn-color-dark-outline-focus-ring: hsl(0, 0%, 100%);--root-btn-color-light-background: hsl(240, 30%, 12%);--root-btn-color-light-background-hover: hsl(211, 99%, 46%);--root-btn-color-light-focus-ring: hsl(211, 99%, 46%);--root-btn-color-light-foreground: hsl(211, 99%, 46%);--root-btn-color-light-foreground-hover: hsl(0, 0%, 100%);--root-btn-color-primary-background: hsl(211, 99%, 46%);--root-btn-color-primary-background-hover: #208bfe;--root-btn-color-primary-foreground: hsl(0, 0%, 100%);--root-btn-color-primary-shadow: #01346b;--root-btn-color-primary-outline-foreground: hsl(211, 99%, 60%);--root-btn-color-secondary-background: hsl(160, 89%, 46%);--root-btn-color-secondary-background-hover: #13f1a7;--root-btn-color-secondary-foreground: hsl(0, 0%, 95%)}:root[data-theme-mode=dark]{--root-card-color-background: hsl(240, 30%, 14%)}:root[data-theme-mode=dark]{--root-combobox-color-item-background: hsl(240, 30%, 12%);--root-combobox-color-item-foreground: hsl(211, 99%, 46%)}:root[data-theme-mode=dark]{--root-data-table-color-icon: hsla(0, 0%, 100%, .1)}:root[data-theme-mode=dark]{--root-form-color-background: #21213d;--root-form-color-background-disabled: hsl(240, 30%, 14%);--root-form-color-border-disabled: hsla(0, 0%, 100%, .04);--root-form-color-border-focus: hsl(211, 99%, 46%);--root-form-color-border: hsla(0, 0%, 100%, .12);--root-form-color-check-background: hsl(211, 99%, 46%);--root-form-color-check-foreground: hsl(240, 30%, 14%);--root-form-color-group-label-background: #1d1d36;--root-form-color-group-label-foreground: hsl(0, 0%, 97%);--root-form-color-invalid: hsl(0, 71%, 51%);--root-form-color-invalid-shadow: rgba(219, 41, 41, .25);--root-form-color-label: hsl(0, 0%, 95%);--root-form-color-legend: hsl(0, 0%, 95%);--root-form-color-placeholder: hsl(0, 0%, 90%);--root-form-color-select-foreground: hsl(0, 0%, 100%);--root-form-color-shadow-focus: rgba(1, 113, 233, .25);--root-form-color-text: hsl(0, 0%, 97%);--root-form-color-valid: hsl(150, 100%, 33%);--root-form-color-valid-shadow: rgba(0, 168, 84, .25)}:root[data-theme-mode=dark]{--root-header-color-background: hsla(240, 30%, 12%, .95)}:root[data-theme-mode=dark]{--root-navigation-color-arrow: hsla(0, 0%, 100%, .15);--root-navigation-color-icon-background: hsl(245, 38%, 10%);--root-navigation-color-icon-background-hover: hsl(211, 99%, 46%);--root-navigation-color-icon-foreground: hsl(211, 99%, 46%);--root-navigation-color-icon-foreground-hover: hsl(186, 100%, 5%)}:root[data-theme-mode=dark]{--root-main-color-background: hsl(240, 30%, 13%)}:root[data-theme-mode=dark]{--root-media-color-background: hsl(240, 30%, 12%);--root-media-color-dropzone-background: hsla(214, 98%, 49%, .75);--root-media-color-dropzone-border: hsl(214, 98%, 40%);--root-media-color-icon: hsl(211, 99%, 46%)}:root[data-theme-mode=dark]{--root-modal-color-background: hsla(240, 3%, 7%, .9)}:root[data-theme-mode=dark]{--root-prism-color-color: hsl(217, 34%, 88%);--root-prism-color-background: hsl(245, 38%, 7%);--root-prism-color-comment: hsl(180, 9%, 55%);--root-prism-color-punctuation: hsl(276, 68%, 75%);--root-prism-color-namespace: hsl(197, 31%, 77%);--root-prism-color-deleted: hsla(1, 83%, 63%, .56);--root-prism-color-boolean: hsl(350, 100%, 67%);--root-prism-color-number: hsl(14, 90%, 70%);--root-prism-color-constant: hsl(221, 100%, 75%);--root-prism-color-class-name: hsl(33, 100%, 77%);--root-prism-color-regex: hsl(217, 34%, 88%)}:root[data-theme-mode=dark]{--root-table-color-border: hsla(0, 0%, 100%, .04);--root-table-color-caption: hsl(0, 0%, 97%);--root-table-color-heading: hsl(0, 0%, 95%);--root-table-color-hover: hsla(0, 0%, 100%, .02);--root-table-color-stripe: hsla(0, 0%, 100%, .025);--root-table-color-text: hsl(0, 0%, 97%)}:root[data-theme-mode=dark]{--root-selection-color-background: hsl(211, 99%, 46%);--root-selection-color-foreground: hsl(0, 0%, 100%)}:root[data-theme-mode=dark]{--root-search-color-icon: hsla(0, 0%, 100%, .25)}:root[data-theme-mode=dark]{--root-scrollbar-color-thumb-background: hsla(0, 0%, 100%, .15);--root-scrollbar-color-thumb-background-hover: hsla(0, 0%, 100%, .25);--root-scrollbar-color-track-background: hsla(0, 0%, 100%, .05)}:root[data-theme-mode=dark]{--root-widget-color-icon-background: #22223f}[data-theme-mode=dark]{color-scheme:dark}[data-theme-mode=dark] select.form-control:not([multiple]):not([size]),[data-theme-mode=dark] .combobox__control{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.507l-3.816,-3.815c-0.171,-0.172 -0.45,-0.172 -0.622,-0l-0.933,0.933c-0.172,0.172 -0.172,0.451 0,0.623l5.06,5.06c0.172,0.172 0.45,0.172 0.622,0l5.06,-5.06c0.172,-0.172 0.172,-0.451 -0,-0.623l-0.933,-0.933c-0.172,-0.172 -0.451,-0.172 -0.622,-0l-3.816,3.815Z" style="fill:hsl%280, 0%, 100%%29;"/%3e%3c/svg%3e')}.container{--inline-size: var(--root-container-inline-size);--gap: var(--root-container-gap);margin-inline:auto;max-inline-size:var(--inline-size);padding-inline:var(--gap)}.container--wide{--inline-size: 100%}.container--narrow{--inline-size: 50rem}.l-row{align-items:start;display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}.l-row--stretch{align-items:stretch}@media (min-width: 32em){.l-row--column\:xs\:1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 32em){.l-row--column\:xs\:2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 32em){.l-row--column\:xs\:3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 32em){.l-row--column\:xs\:4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 48em){.l-row--column\:sm\:1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 48em){.l-row--column\:sm\:2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 48em){.l-row--column\:sm\:3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 48em){.l-row--column\:sm\:4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 64em){.l-row--column\:md\:1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 64em){.l-row--column\:md\:2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 64em){.l-row--column\:md\:3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 64em){.l-row--column\:md\:4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 80em){.l-row--column\:lg\:1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 80em){.l-row--column\:lg\:2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 80em){.l-row--column\:lg\:3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 80em){.l-row--column\:lg\:4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 90em){.l-row--column\:xl\:1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 90em){.l-row--column\:xl\:2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 90em){.l-row--column\:xl\:3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 90em){.l-row--column\:xl\:4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 110em){.l-row--column\:xxl\:1{grid-template-columns:repeat(1,minmax(0,1fr))}}@media (min-width: 110em){.l-row--column\:xxl\:2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 110em){.l-row--column\:xxl\:3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 110em){.l-row--column\:xxl\:4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 80em){.l-row--sidebar{grid-template-columns:minmax(0,1fr) minmax(0,20rem)}}.l-row__column{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}.l-main{display:flex;position:relative}.l-main__sidebar{background-color:var(--root-base-color-background);display:none;inline-size:var(--root-sidebar-inline-size);inset-block:0;inset-inline:0 auto;position:fixed;z-index:20}@media (min-width: 64em){.l-main__sidebar{display:block}}.l-main__sidebar--open{display:block}.l-main__body{background-color:var(--root-main-color-background);inline-size:100%;min-block-size:calc(100lvh + 1rem)}@media (min-width: 64em){.l-main__body{inline-size:calc(100% - var(--root-sidebar-inline-size));margin-inline-start:var(--root-sidebar-inline-size)}}.l-auth__inner{background-attachment:fixed;display:flex;flex-direction:column;min-block-size:100vh;text-align:center}@media (min-width: 64em){.l-auth__inner{align-items:center;flex-direction:row;text-align:start}}.l-auth__sidebar{background-image:url(https://conedevel.com/assets/sprucecss/auth-background.png);background-position:center;background-size:cover;border-radius:2rem;margin-block-end:clamp(1.5rem,5vw,3rem);margin-inline:clamp(1.5rem,5vw,3rem);min-block-size:10rem}@media (min-width: 64em){.l-auth__sidebar{block-size:calc(100% - 6rem);inline-size:calc(50% - 3rem);inset-block:3rem;inset-inline:50% 3rem;margin:0;position:fixed}}.l-auth__form{align-items:center;block-size:100%;display:flex;flex-direction:column;gap:3rem;justify-content:center;padding-block:3rem;padding-inline:clamp(1.5rem,5vw,3rem)}@media (min-width: 64em){.l-auth__form{inline-size:50%;margin-inline-start:0;min-block-size:100vh}}.l-auth__logo{align-self:center;block-size:1.5rem;display:inline-flex}@media (min-width: 64em){.l-auth__logo{align-self:flex-start}}.l-auth__logo img{block-size:100%;inline-size:auto}.l-auth__footer{inline-size:100%}.l-auth__footer p{margin-block:0}.l-auth .auth-form{inline-size:100%;max-inline-size:25rem}@media (min-width: 64em){.l-auth .auth-form{padding-block-end:1.5rem}}.alert{align-items:center;border:1px solid;border-left:.4rem solid;border-radius:var(--root-border-radius-sm);display:flex;gap:1.5rem;justify-content:space-between;line-height:var(--root-line-height-md);padding:.65em 1em}.alert--danger{background-color:#fdf4f4;color:#9c1a1a}.alert--danger .alert__close{background-color:#9c1a1a;color:#fbeaea}.alert--info{background-color:#f0fbff;color:#007096}.alert--info .alert__close{background-color:#007096;color:#e1f8ff}.alert--success{background-color:#eefff6;color:#00763b}.alert--success .alert__close{background-color:#00763b;color:#dfe}.alert--warning{background-color:#fefcf4;color:#ba970b}.alert--warning .alert__close{background-color:#ba970b;color:#fefae9}[data-theme-mode=dark] .alert--danger{background-color:transparent;border-color:#9c1a1a;color:var(--root-base-color-text)}[data-theme-mode=dark] .alert--info{background-color:transparent;border-color:#007096;color:var(--root-base-color-text)}[data-theme-mode=dark] .alert--success{background-color:transparent;border-color:#00763b;color:var(--root-base-color-text)}[data-theme-mode=dark] .alert--warning{background-color:transparent;border-color:#ba970b;color:var(--root-base-color-text)}.alert__caption>*{margin-block-end:0;margin-block-start:0}.alert__caption>*+*{margin-block-start:.25rem}.alert__close{--size: 1.5rem;background:none;border:0;color:inherit;cursor:pointer;font:inherit;outline:inherit;padding:0;transition-duration:var(--root-duration);transition-property:all;transition-timing-function:var(--root-timing-function);align-items:center;block-size:var(--size);border-radius:var(--root-border-radius-sm);display:flex;flex-shrink:0;inline-size:var(--size);justify-content:center}.alert__close:hover,.alert__close:focus{opacity:.75}.alert__close svg{--size: .85rem;block-size:var(--size);inline-size:var(--size)}.auth-form{margin-block:auto}.auth-form>*{margin-block-end:0;margin-block-start:0}.auth-form>*+*{margin-block-start:1rem}.auth-form__title{font-weight:700}.auth-form .or-separator{margin-block-start:1.5rem}.form-group-stacked>*,.social-logins>*{margin-block-end:0;margin-block-start:0}.form-group-stacked>*+*,.social-logins>*+*{margin-block-start:1rem}.form-label--space-between{display:flex;justify-content:space-between}.trending{align-items:center;border-radius:2rem;display:inline-flex;font-family:var(--root-font-family-heading);font-size:var(--root-font-size-sm);font-weight:600;gap:.25rem;line-height:1;padding:.35em .55em}.trending--up{background:#dbffed;color:#008241}.trending--down{background:#fceeee;color:#c92222}.trending__icon{--size: .95em;block-size:var(--size);inline-size:var(--size)}.status{align-items:center;display:inline-flex;gap:.5rem;line-height:1;position:relative;white-space:nowrap}.status--danger:before{background-color:var(--root-alert-color-danger)}.status--info:before{background-color:var(--root-alert-color-info)}.status--success:before{background-color:var(--root-alert-color-success)}.status--warning:before{background-color:var(--root-alert-color-warning)}.status:before{--size: .55em;block-size:var(--size);border-radius:50%;content:"";flex-shrink:0;inline-size:var(--size)}.block-navigation{display:flex;flex-direction:column;gap:1rem;position:relative;z-index:1}.block-navigation__toggle:before{content:"";top:0;right:0;bottom:0;left:0;position:absolute}.block-navigation__title{align-items:center;color:var(--root-base-color-heading);display:flex;font-size:var(--root-font-size-base);font-weight:700;justify-content:space-between;margin-block:0}.block-navigation__toggle[aria-expanded=true] svg{rotate:180deg}.block-navigation__toggle svg{pointer-events:none}.block-navigation__menu[data-state=closed]{display:none}.block-navigation__menu[data-state=open]{display:block}.block-navigation__menu ul{list-style:none;margin:0;padding:0}.block-navigation__menu a{align-items:center;color:var(--root-base-color-text);display:flex;gap:.75em;padding-block:.35em;padding-inline:.75em;position:relative;text-decoration:none}.block-navigation__menu a:hover:not([aria-current=page]):before{background-color:var(--root-base-color-primary-lightest)}.block-navigation__menu a:before{border-radius:var(--root-border-radius-sm);content:"";inset-block:0;inset-inline:0;position:absolute;z-index:-1}.block-navigation__menu a[aria-current=page]{color:#fff}.block-navigation__menu a[aria-current=page]:before{background-color:var(--root-base-color-primary)}.block-navigation__menu a[aria-current=page] svg{color:#fff}.block-navigation__menu a svg{--size: 1.15em;block-size:var(--size);color:var(--root-base-color-primary);inline-size:var(--size)}.block-navigation__menu--breakout a{padding-block:.35em;padding-inline:0}.block-navigation__menu--breakout a:before{inset-inline:-.75rem -.35em}.breadcrumb-list{list-style:none;margin:0;padding:0;align-items:center;display:flex;max-inline-size:100%;overflow-x:auto;white-space:nowrap}.breadcrumb-list>li{align-items:center;display:inline-flex;margin-block:0}.breadcrumb-list>li+li:before{block-size:.4em;border-block-end:2px solid var(--root-breadcrumb-color-separator);border-inline-end:2px solid var(--root-breadcrumb-color-separator);content:"";display:inline-flex;inline-size:.4em;margin-inline:.75em;transform:rotate(-45deg)}[dir=rtl] .breadcrumb-list>li+li:before{transform:rotate(45deg)}.breadcrumb-list a{text-decoration:none}.breadcrumb-list [aria-current=page]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-inline-size:20ch;text-align:start}.app-card{background-color:var(--root-base-color-background);border:1px solid var(--root-base-color-border);border-radius:var(--root-border-radius-sm);box-shadow:0 0 .25rem #17638c0d}.app-card:focus-within{z-index:5}.app-card--edit .app-card__header{padding-inline:1.5rem}.app-card--edit .app-card__body{padding-block:1.5rem}.app-card--edit .app-card__body>*{padding-inline:1.5rem}.app-card--setting .app-card__body{padding-block:1.5rem}.app-card--setting .app-card__body>*{margin-block-end:0;margin-block-start:0}.app-card--setting .app-card__body>*+*{margin-block-start:.75rem}.app-card--setting .app-card__body>*{padding-inline:1.5rem}.app-card--setting .app-card__content>*{margin-block-end:0;margin-block-start:0}.app-card--setting .app-card__content>*+*{margin-block-start:.5rem}.app-card--sidebar{display:grid;gap:clamp(1.5rem,5vw,3rem);grid-template-columns:minmax(0,1fr);padding:1.5rem}@media (min-width: 64em){.app-card--sidebar{grid-template-columns:minmax(0,13.5rem) minmax(0,1fr)}}.app-card--sidebar>.app-card__body{padding:0}.app-card--sidebar>.app-card__body>*{margin-block-end:0;margin-block-start:0}.app-card--sidebar>.app-card__body>*+*{margin-block-start:1.5rem}.app-card--info{box-shadow:none}.app-card--info .app-card__header{border-block-end:0;min-block-size:0;padding-block:1.5rem 0;padding-inline:1.5rem}.app-card--info .app-card__body{padding-block:1.5rem}.app-card--info .app-card__body>*{padding-inline:1.5rem}.app-card__header{align-items:center;border-block-end:1px solid var(--root-base-color-border);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;min-block-size:3.4rem;padding:.75rem 1rem}.app-card__actions{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;margin-inline-start:auto}.app-card__title{font-size:clamp(.996625rem,2vw + 1rem,1.1725rem);font-weight:600;margin-block:0}.app-card__body{padding-block:1rem}.app-card__body--plain{align-items:center;display:flex;justify-content:space-between;padding:0}.app-card__body>*{padding-inline:1rem}.app-card__body img:not(.data-table__image){border-radius:var(--root-border-radius-sm)}.context-menu{--inset-block-start:calc(100% + 1rem);--inline-size: 10rem;list-style:none;margin:0;padding:0;transition-duration:var(--root-duration);transition-property:all;transition-timing-function:var(--root-timing-function);background-color:var(--root-base-color-background);border:1px solid var(--root-base-color-border);border-radius:var(--root-border-radius-sm);box-shadow:0 0 .25rem #17638c0d;inline-size:var(--inline-size);opacity:0;position:absolute;scale:.85;visibility:hidden;z-index:10}.context-menu--inline-start{inset:var(--inset-block-start) auto auto 0}.context-menu--inline-end{inset:var(--inset-block-start) 0 auto auto}.context-menu[data-state=open]{opacity:1;scale:1;visibility:visible}.context-menu>li{display:flex;flex-direction:column}.context-menu>li+li{border-block-start:1px solid var(--root-base-color-border);margin-block-start:0}.context-menu__item{align-items:center;background:none;block-size:2.25rem;border:0;border-radius:var(--root-border-radius-sm);color:var(--root-base-color-text);display:flex;justify-content:space-between;line-height:var(--root-line-height-md);margin:.15em;padding-block:.25em;padding-inline:.6em;text-decoration:none}.context-menu__item:hover:not([aria-current=page],:has(.theme-switcher)){background-color:var(--root-base-color-primary-lightest)}.context-menu__item[aria-current=page]{color:var(--root-base-color-primary)}.data-group>*{margin-block-end:0;margin-block-start:0}.data-group>*+*{margin-block-start:.25rem}.data-group__content{overflow:hidden;text-overflow:ellipsis;white-space:inherit;color:var(--root-base-color-heading);font-family:var(--root-font-family-heading);font-weight:600;line-height:var(--root-line-height-heading)}@supports (-webkit-line-clamp: 2){.data-group__content{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2}}.data-table{overflow:hidden;position:relative}.data-table__image{--size: 2.25rem;block-size:var(--size);border-radius:50%;inline-size:var(--size)}.data-table__actions{align-items:center;display:flex;gap:.5rem;justify-content:end}.data-table__no-results{text-align:center}.data-table__footer{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-block:1.5rem 1rem}.data-table__footer-column{display:flex;flex-wrap:wrap;gap:1rem}.data-table__footer-column>*{margin-block:0}.data-table-alert{border-width:1px;flex-wrap:wrap;gap:.5rem 1rem;padding-inline-end:.65em}.data-table-alert__actions{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}.data-table-alert__actions .form-control{inline-size:auto}.data-table-alert__column{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.data-table-filter{position:relative}.data-table-filter__actions{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.data-table-filter .context-menu{--inline-size: 16rem;padding:1rem}.sort-btn{background:none;border:0;color:inherit;cursor:pointer;font:inherit;outline:inherit;padding:0;align-items:center;display:flex;gap:.5rem;white-space:nowrap}.sort-btn svg{--size: .85em;block-size:var(--size);color:var(--root-data-table-color-icon);inline-size:var(--size)}.data-table-deleted{color:var(--root-alert-color-danger)}.btn-dropdown{display:inline-flex;position:relative;z-index:10}.combobox{--root-border-radius: .45rem;--root-border-width: 1px;display:flex;flex-direction:column;gap:.5rem}.combobox__inner{position:relative}.combobox__selected-items{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.combobox__toggle{inset:0 0 0 auto;pointer-events:none;position:absolute}.combobox__reset{align-self:start}.combobox__no-results{padding-inline:.5rem}.combobox__control{background-image:url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.507l-3.816,-3.815c-0.171,-0.172 -0.45,-0.172 -0.622,-0l-0.933,0.933c-0.172,0.172 -0.172,0.451 0,0.623l5.06,5.06c0.172,0.172 0.45,0.172 0.622,0l5.06,-5.06c0.172,-0.172 0.172,-0.451 -0,-0.623l-0.933,-0.933c-0.172,-0.172 -0.451,-0.172 -0.622,-0l-3.816,3.815Z" style="fill:hsl%28205, 100%, 2%%29;"/%3e%3c/svg%3e');background-position:center right .5em;background-repeat:no-repeat;background-size:1.25em auto;padding-inline-end:2em}.combobox__dropdown{background-color:var(--root-form-color-background);border:var(--root-border-width) solid var(--root-form-color-border);border-radius:var(--root-border-radius);inset:calc(100% + .5rem) 0 auto 0;padding:.5rem;position:absolute;z-index:5}.combobox [role=listbox]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;max-block-size:10rem;overflow-y:auto;padding-inline-end:.5rem}.combobox [role=listbox]::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.combobox [role=listbox]::-webkit-scrollbar-thumb{background:var(--root-scrollbar-color-thumb-background);border-radius:var(--root-border-radius-sm)}.combobox [role=listbox]::-webkit-scrollbar-thumb:hover{background:var(--root-scrollbar-color-thumb-background-hover)}.combobox [role=listbox]::-webkit-scrollbar-track{background:var(--root-scrollbar-color-track-background);border-radius:var(--root-border-radius-sm)}.combobox [role=listbox]>*{margin-block-start:0}.combobox [role=option]{align-items:center;border-radius:var(--root-border-radius);display:flex;justify-content:space-between;padding-block:.25rem;padding-inline:.5rem;-webkit-user-select:none;user-select:none}.combobox [role=option][aria-selected=true]{background-color:var(--root-btn-color-light-background);color:var(--root-btn-color-light-foreground)}.combobox [role=option]:hover,.combobox [role=option]:focus,.combobox [role=option].highlighted{background-color:var(--root-btn-color-primary-background);color:var(--root-btn-color-primary-foreground)}.combobox [role=option] svg{--size: .85em;block-size:var(--size);inline-size:var(--size)}.combobox-item{align-items:center;background-color:var(--root-combobox-color-item-background);border-radius:1em;color:var(--root-combobox-color-item-foreground);display:flex;font-size:var(--root-font-size-sm);gap:.25rem;line-height:1;padding-block:.25rem;padding-inline:.5rem .25rem}.combobox-item .btn--sm{--root-icon-padding: .25em;--root-border-radius: 1em}.editor{--root-block-size: 18rem;transition-duration:var(--root-duration);transition-property:all;transition-timing-function:var(--root-timing-function);block-size:var(--root-block-size);border:1px solid var(--root-form-color-border);border-radius:var(--root-border-radius-sm);display:flex;flex-direction:column;grid-template-rows:auto 1fr;overflow:hidden}.editor:focus-within{border-color:var(--root-form-color-border-focus);box-shadow:0 0 0 .25rem var(--root-form-color-ring-focus);outline:2px solid transparent}.editor__controls{align-items:center;border-block-end:1px solid var(--root-base-color-border);display:flex;flex-wrap:wrap;gap:.5rem 1rem;padding:.5rem}.editor__controls .form-control{inline-size:auto}.editor__group{align-items:flex-start;display:flex;flex-wrap:wrap;gap:.5rem}.editor__body{flex:1 1 auto;margin:.25rem;overflow-x:hidden;overflow-y:auto;padding:1rem}.editor__body::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.editor__body::-webkit-scrollbar-thumb{background:var(--root-scrollbar-color-thumb-background);border-radius:var(--root-border-radius-sm)}.editor__body::-webkit-scrollbar-thumb:hover{background:var(--root-scrollbar-color-thumb-background-hover)}.editor__body::-webkit-scrollbar-track{background:var(--root-scrollbar-color-track-background);border-radius:var(--root-border-radius-sm)}.editor__body>[contenteditable=true]{outline:0}.editor__body>[contenteditable=true]>*{margin-block-end:0;margin-block-start:0}.editor__body>[contenteditable=true]>*+*{margin-block-start:.5rem}.file-group-container{container:file-group-container/inline-size}.file-group{--root-border-radius: .45rem;--root-border-width: 1px;align-items:center;border:var(--root-border-width) solid var(--root-form-color-border);border-radius:var(--root-border-radius);display:flex;gap:1.5rem;overflow:hidden;padding:1rem}@container file-group-container (inline-size < 30rem){.file-group{flex-direction:column}}.file-group:has([style*=background-image]) .file-group__remove{display:inline-flex}.file-group__preview{align-items:center;aspect-ratio:1;background-color:var(--root-base-color-primary-lightest);background-position:center;background-size:cover;border-radius:var(--root-border-radius);display:flex;flex-shrink:0;flex-wrap:wrap;inline-size:9rem;justify-content:center}@container file-group-container (inline-size < 30rem){.file-group__preview{aspect-ratio:16/9;inline-size:100%}}.file-group__preview[style*=background-image] .file-group__icon{display:none}.file-group__body{display:flex;flex-direction:column;gap:.25rem;inline-size:100%}.file-group__body>*{margin-block:0}.file-group__icon{--size: 2rem;block-size:var(--size);color:var(--root-base-color-primary);inline-size:var(--size)}.file-group__title{color:var(--root-base-color-heading);font-family:var(--root-font-family-heading);font-weight:700}.file-group__meta{list-style:none;padding-inline-start:0}.file-group__meta>*+*{margin-block-start:0}.file-group__action{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:.5rem}.file-group__remove{display:none}.file-group__input{flex:1}.file-list{--root-border-radius: .45rem;--root-border-width: 1px;display:flex;flex-direction:column;gap:1rem}.file-list__items{list-style:none;margin:0;padding:0;border:var(--root-border-width) solid var(--root-form-color-border);border-radius:var(--root-border-radius);padding:.5rem}.file-list__items>li+li{border-block-start:var(--root-border-width) solid var(--root-base-color-border);margin-block-start:.5rem;padding-block-start:.5rem}.file-list-item{align-items:center;display:flex;gap:1rem;justify-content:space-between}.file-list-item__icon{align-items:center;aspect-ratio:1;background-color:var(--root-media-color-background);border-radius:var(--root-border-radius-sm);display:flex;inline-size:2.5rem;justify-content:center}.file-list-item__icon svg{--size: 1rem;block-size:var(--size);color:var(--root-media-color-icon);inline-size:var(--size)}.file-list-item__column{align-items:center;display:flex;gap:1rem}.file-list-item__thumbnail{aspect-ratio:1;border-radius:var(--root-border-radius-sm);inline-size:2.5rem}.file-list-item__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-inline-size:10ch}@media (min-width: 32em){.file-list-item__name{max-inline-size:25ch}}.file-list-item__actions{align-items:center;display:flex;gap:.25rem}.repeater-container>*{margin-block-end:0;margin-block-start:0}.repeater-container>*+*{margin-block-start:1rem}.repeater{--root-border-radius: .45rem;--root-border-width: 1px;border:var(--root-border-width) solid var(--root-form-color-border);border-radius:var(--root-border-radius);padding:1rem}.repeater__heading{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}.repeater__body{border-block-start:1px solid var(--root-base-color-border);margin-block-start:1rem;padding-block-start:1rem}.repeater__column{align-items:center;display:flex;gap:1rem}.repeater__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--root-font-size-base);margin-block:0;max-inline-size:20ch}.repeater__actions{align-items:center;display:flex;gap:.25rem}.repeater__toggle[aria-expanded=true] .vertical-line{display:none}.search-form{--root-border-radius: .45rem;--root-border-width: 1px;--root-font-size: .938rem;--root-line-height: 1.5;--root-padding: .5em .75em;transition-duration:var(--root-duration);transition-property:all;transition-timing-function:var(--root-timing-function);align-items:center;background-color:var(--root-form-color-background);border:var(--root-border-width) solid var(--root-form-color-border);border-radius:var(--root-border-radius);box-sizing:border-box;display:flex;gap:.5rem;padding:var(--root-padding)}.search-form:focus-within{border-color:var(--root-form-color-border-focus);box-shadow:0 0 0 .25rem var(--root-form-color-ring-focus);outline:2px solid transparent}.search-form__control{background-color:transparent;border:0;color:var(--root-form-color-text);flex-grow:2;font-size:var(--root-font-size);line-height:var(--root-line-height);outline:0;padding:0}.search-form__icon{--size: .9rem;block-size:var(--size);color:var(--root-form-color-border);display:flex;grid-column:1/2;grid-row:1;inline-size:var(--size);justify-content:center}.search-form__helper{background-color:var(--root-btn-color-light-background);border-radius:.45rem;color:var(--root-btn-color-light-foreground);font-weight:600;justify-self:center;line-height:1;padding:.25rem .5rem;pointer-events:none}.open-search{position:relative;align-items:center;display:flex;gap:.5rem}.open-search__btn:before{content:"";top:0;right:0;bottom:0;left:0;position:absolute}.open-search__icon{--size: 1rem;block-size:var(--size);color:var(--root-search-color-icon);inline-size:var(--size)}.or-separator{align-items:center;display:flex;font-size:var(--root-font-size-sm);gap:1rem;text-transform:uppercase}.or-separator:before,.or-separator:after{background-color:var(--root-base-color-border);block-size:1px;content:"";display:flex;inline-size:100%}.pagination__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}.pagination__links>*+*{margin-block-start:0}.pagination [aria-current=page]{background-color:var(--root-btn-color-primary-background);color:var(--root-btn-color-primary-foreground)}.preloader--circle{--color: currentColor;--border-width: .25em;--size: 1.5rem;--animation-duration: 1s;block-size:var(--size);inline-size:var(--size)}.preloader--circle:after{animation:rotation var(--animation-duration) linear infinite;block-size:var(--size);border:var(--border-width) solid var(--color);border-color:var(--color) transparent var(--color) transparent;border-radius:50%;content:"";display:flex;inline-size:var(--size)}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}code[class*=language-],pre[class*=language-]{border-radius:var(--root-border-radius-sm);color:var(--root-prism-color-color);font-family:var(--root-font-family-cursive);font-size:var(--root-font-size-base);-webkit-hyphens:none;hyphens:none;line-height:1.5;-moz-tab-size:4;tab-size:4;text-align:left;white-space:pre;word-break:normal;word-spacing:normal;word-wrap:normal}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{display:grid;overflow:auto;padding:1.5rem}pre[class*=language-] code{background-color:transparent;padding:0}:not(pre)>code[class*=language-],pre[class*=language-]{background:var(--root-prism-color-background);overflow-x:auto}:not(pre)>code[class*=language-]::-webkit-scrollbar,pre[class*=language-]::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}:not(pre)>code[class*=language-]::-webkit-scrollbar-thumb,pre[class*=language-]::-webkit-scrollbar-thumb{background:var(--root-scrollbar-color-thumb-background);border-radius:var(--root-border-radius-sm)}:not(pre)>code[class*=language-]::-webkit-scrollbar-thumb:hover,pre[class*=language-]::-webkit-scrollbar-thumb:hover{background:var(--root-scrollbar-color-thumb-background-hover)}:not(pre)>code[class*=language-]::-webkit-scrollbar-track,pre[class*=language-]::-webkit-scrollbar-track{background:var(--root-scrollbar-color-track-background);border-radius:var(--root-border-radius-sm)}.token.comment,.token.prolog,.token.cdata{color:var(--root-prism-color-comment);font-style:italic}.token.punctuation{color:var(--root-prism-color-punctuation)}.namespace{color:var(--root-prism-color-namespace)}.token.deleted{color:var(--root-prism-color-deleted);font-style:italic}.token.symbol,.token.operator,.token.keyword,.token.property{color:var(--root-prism-color-namespace)}.token.tag{color:var(--root-prism-color-punctuation)}.token.boolean{color:var(--root-prism-color-boolean)}.token.number{color:var(--root-prism-color-number)}.token.constant,.token.builtin,.token.string,.token.url,.token.entity,.language-css .token.string,.style .token.string,.token.char{color:var(--root-prism-color-constant)}.token.selector,.token.function,.token.doctype{color:var(--root-prism-color-punctuation);font-style:italic}.token.attr-name,.token.inserted{color:var(--root-prism-color-constant);font-style:italic}.token.class-name,.token.atrule{color:var(--root-prism-color-class-name)}.token.regex,.token.important,.token.variable{color:var(--root-prism-color-regex)}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.range-group{display:flex;flex-direction:column;gap:.25rem}.range-group .form-label{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.range-group__inner{align-items:center;display:flex;gap:.5rem}.range-group__inner .form-range{flex-grow:1;margin-block-start:0}.range-group__inner .form-range-control{flex-shrink:0}.skip-link{inset:-50vh auto auto 1.5rem;position:fixed}.skip-link:focus{inset-block-start:1.5rem}.no-transition *{transition:none!important}.theme-switcher{color:var(--root-base-color-text);display:inline-flex;position:relative}.theme-switcher[data-theme-mode=system] .theme-switcher__system-mode,.theme-switcher[data-theme-mode=light] .theme-switcher__light-mode,.theme-switcher[data-theme-mode=dark] .theme-switcher__dark-mode{display:flex}.theme-switcher button{display:none}.theme-switcher button>*{pointer-events:none}.user-menu{align-items:center;display:flex;gap:clamp(.5rem,1vw,1rem);position:relative}.user-menu__toggle:before{content:"";top:0;right:0;bottom:0;left:0;position:absolute}.user-menu__avatar{--size: 2.1rem;block-size:var(--size);border-radius:50%;inline-size:var(--size)}.user-menu__caption{display:none;flex-direction:column;font-size:var(--root-font-size-base);gap:.25rem;line-height:1}@media (min-width: 64em){.user-menu__caption{display:flex}}.user-menu__role{font-size:var(--root-font-size-sm)}.user-menu__display-name{color:var(--root-base-color-heading);font-weight:700}.user-menu__toggle{background:none;border:0;cursor:pointer;display:flex;padding:0}.user-menu__toggle svg{--size: 1em;block-size:var(--size);inline-size:var(--size)}.modal-backdrop{align-items:start;background-color:var(--root-modal-color-background);display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;overflow-y:auto;position:fixed;z-index:25}.modal{--root-inline-size: 34rem;background-color:var(--root-base-color-background);border:1px solid var(--root-base-color-border);border-radius:var(--root-border-radius-sm);box-shadow:0 0 .25rem #17638c0d;inline-size:var(--root-inline-size);margin:1.5rem;max-inline-size:100%;outline:0;position:relative}.modal--media{display:flex;flex-direction:column;inline-size:auto;top:0;right:0;bottom:0;left:0;position:fixed}.modal--media .modal__body{flex-grow:1;overflow-y:auto}.modal--media .modal__body::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.modal--media .modal__body::-webkit-scrollbar-thumb{background:var(--root-scrollbar-color-thumb-background);border-radius:var(--root-border-radius-sm)}.modal--media .modal__body::-webkit-scrollbar-thumb:hover{background:var(--root-scrollbar-color-thumb-background-hover)}.modal--media .modal__body::-webkit-scrollbar-track{background:var(--root-scrollbar-color-track-background);border-radius:var(--root-border-radius-sm)}.modal--media .modal__header-caption{order:1}.modal--media .modal__close{order:2}@media (min-width: 64em){.modal--media .modal__close{order:3}}.modal--media .modal__filter{inline-size:100%;order:3}@media (min-width: 64em){.modal--media .modal__filter{inline-size:auto;margin-inline-start:auto;order:2}}.modal--dropzone:before{background-color:var(--root-media-color-dropzone-background);border:2px solid var(--root-media-color-dropzone-border);border-radius:var(--root-border-radius-sm);content:"";top:0;right:0;bottom:0;left:0;pointer-events:none;position:absolute;z-index:2}.modal--dropzone:after{align-items:center;color:#fff;content:attr(data-dropzone);display:flex;font-size:clamp(1.5572265625rem,2vw + 1rem,1.83203125rem);top:0;right:0;bottom:0;left:0;justify-content:center;line-height:var(--root-line-height-md);padding:1.5rem;position:absolute;text-align:center;z-index:3}.modal__header{align-items:center;border-block-end:1px solid var(--root-base-color-border);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding:1rem clamp(1rem,5vw,1.5rem)}.modal__header-caption>*{margin-block-end:0;margin-block-start:0}.modal__header-caption>*+*{margin-block-start:0}.modal__title{font-size:clamp(1.24578125rem,2vw + 1rem,1.465625rem);font-weight:600;margin-block:0}.modal__body{padding:clamp(1rem,5vw,1.5rem)}.modal__body>*{margin-block-end:0;margin-block-start:0}.modal__body>*+*{margin-block-start:1rem}.modal__footer{align-items:center;border-block-start:1px solid var(--root-base-color-border);display:flex;flex-wrap:wrap;gap:1rem;justify-content:end;padding:1rem clamp(1rem,5vw,1.5rem)}.modal__footer--space-between{justify-content:space-between}.modal__footer input{flex-grow:1;max-inline-size:25rem}.modal__filter{align-items:center;display:flex;gap:1rem;margin-inline:-.5rem;-ms-overflow-style:none;overflow-x:auto;padding:.5rem;scrollbar-width:none}@media (min-width: 64em){.modal__filter{margin-inline:0;overflow:initial;padding:0}}.modal__filter::-webkit-scrollbar{display:none}.modal__filter select,.modal__filter input{inline-size:auto;min-inline-size:10rem}.modal__column{align-items:center;display:flex;flex-wrap:wrap;gap:1rem}.app-notification__drawer{transition-duration:var(--root-duration);transition-property:all;transition-timing-function:var(--root-timing-function);background-color:var(--root-base-color-background);block-size:100dvh;box-shadow:0 0 .25rem #17638c0d;display:flex;flex-direction:column;gap:1.5rem;inline-size:100%;inset:0 0 0 auto;padding:1.5rem;position:fixed;transform:translate(100%);z-index:50}.app-notification__drawer[data-state=open]{transform:translate(0)}@media (min-width: 32em){.app-notification__drawer{inline-size:26rem}}.app-notification__header{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between}.app-notification__title{font-size:clamp(.996625rem,2vw + 1rem,1.1725rem);font-weight:600;margin-block:0}.app-notification__list{overflow-y:auto;overscroll-behavior:contain}.app-notification__list::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.app-notification__list::-webkit-scrollbar-thumb{background:var(--root-scrollbar-color-thumb-background);border-radius:var(--root-border-radius-sm)}.app-notification__list::-webkit-scrollbar-thumb:hover{background:var(--root-scrollbar-color-thumb-background-hover)}.app-notification__list::-webkit-scrollbar-track{background:var(--root-scrollbar-color-track-background);border-radius:var(--root-border-radius-sm)}.app-notification__list>*+*{border-block-start:1px solid var(--root-base-color-border);margin-block-start:1rem;padding-block-start:1rem}.notification-card{--icon-size: 2.5rem;position:relative;padding-inline-end:1rem}.notification-card__link:before{content:"";top:0;right:0;bottom:0;left:0;position:absolute}.notification-card--read{opacity:.5}.notification-card--open .notification-card__control svg{rotate:90deg}.notification-card--open .notification-card__control .horizontal-line{opacity:0}.notification-card__header{align-items:start;display:flex;gap:1rem}.notification-card__icon{align-items:center;block-size:var(--icon-size);border-radius:var(--root-border-radius-sm);display:flex;flex-shrink:0;inline-size:var(--icon-size);justify-content:center}.notification-card__icon--info{background-color:#f0fbff;color:var(--root-alert-color-info)}.notification-card__icon--warning{background-color:#fefaec;color:var(--root-alert-color-warning)}.notification-card__icon--danger{background-color:#fdf4f4;color:var(--root-alert-color-danger)}.notification-card__icon--success{background-color:#ebfff5;color:var(--root-alert-color-success)}.notification-card__icon svg{--size: 1rem;block-size:var(--size);inline-size:var(--size)}.notification-card__caption{line-height:var(--root-line-height-md)}.notification-card__caption>*{margin-block-end:0;margin-block-start:0}.notification-card__caption>*+*{margin-block-start:.25rem}.notification-card__title{font-size:var(--root-font-size-base)}.notification-card__link{color:var(--root-base-color-heading);text-decoration:none}.notification-card__link:hover,.notification-card__link:focus{color:var(--root-base-color-link)}.notification-card__control{flex-shrink:0;margin-inline-start:auto}.notification-card__control svg{transition-duration:var(--root-duration);transition-property:all;transition-timing-function:var(--root-timing-function)}.notification-card__body{transition-duration:var(--root-duration);transition-property:all;transition-timing-function:var(--root-timing-function);border-inline-start:1px solid var(--root-base-color-border);display:grid;margin-inline-start:calc(var(--icon-size) / 2);padding-inline-start:calc(var(--icon-size) / 2)}.notification-card__body[aria-hidden=true]{grid-template-rows:0fr}.notification-card__body[aria-hidden=false]{grid-template-rows:1fr;margin-block-start:1rem}.notification-card__body>div{overflow:hidden}.notification-card__body>div>*{margin-block-end:0;margin-block-start:0}.notification-card__body>div>*+*{margin-block-start:.5rem}.media-list{--column: 2;list-style:none;margin:0;padding:0;display:grid;gap:1.5rem;grid-template-columns:repeat(var(--column),minmax(0,1fr))}@media (min-width: 32em){.media-list{--column: 3}}@media (min-width: 48em){.media-list{--column: 4}}@media (min-width: 64em){.media-list{--column: 6}}@media (min-width: 80em){.media-list{--column: 8}}.media-list>*+*{margin-block-start:0}.media-item{border-radius:var(--root-border-radius-sm);line-height:var(--root-line-height-md);position:relative}.media-item[aria-checked=true],.media-item:focus-visible{outline:3px solid var(--root-btn-color-primary-background);outline-offset:3px}.media-item__background{align-items:center;aspect-ratio:1;background-color:var(--root-media-color-background);border-radius:var(--root-border-radius-sm);display:flex;flex-direction:column;gap:.25rem;justify-content:center;padding:1rem}.media-item__icon{--size: 1.5rem;block-size:var(--size);color:var(--root-media-color-icon);inline-size:var(--size)}.media-item__name{overflow:hidden;text-overflow:ellipsis;white-space:inherit;max-inline-size:100%;text-align:center}@supports (-webkit-line-clamp: 2){.media-item__name{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2}}.media-item__selected{--size: 1.5rem;align-items:center;background-color:var(--root-btn-color-primary-background);block-size:var(--size);border-radius:var(--root-border-radius-sm);color:var(--root-btn-color-primary-foreground);display:flex;inline-size:var(--size);inset:.5rem .5rem auto auto;justify-content:center;position:absolute}.media-item__selected svg{--size: 1rem;block-size:var(--size);inline-size:var(--size)}.media-item .progressbar{margin-block-start:1rem}.media-item img{aspect-ratio:1;border-radius:var(--root-border-radius-sm);inline-size:100%;object-fit:cover}.search-modal{display:flex;flex-direction:column;gap:1rem}.search-results{list-style:none;margin:0;padding:0;max-block-size:20rem;overflow-y:auto;padding-inline-end:1rem}.search-results::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.search-results::-webkit-scrollbar-thumb{background:var(--root-scrollbar-color-thumb-background);border-radius:var(--root-border-radius-sm)}.search-results::-webkit-scrollbar-thumb:hover{background:var(--root-scrollbar-color-thumb-background-hover)}.search-results::-webkit-scrollbar-track{background:var(--root-scrollbar-color-track-background);border-radius:var(--root-border-radius-sm)}.search-results>li+li{border-block-start:1px dashed var(--root-base-color-border);margin-block-start:.5rem;padding-block-start:.5rem}.search-result-item{align-items:center;color:var(--root-base-color-text);display:flex;flex-wrap:wrap;gap:.5rem;text-decoration:none}.search-result-item__icon{--size: 1em;block-size:var(--size);color:var(--root-base-color-primary);inline-size:var(--size)}.app-widget{align-items:center;background-color:var(--root-base-color-background);border:1px solid var(--root-base-color-border);border-radius:var(--root-border-radius-sm);box-shadow:0 0 .25rem #17638c0d;display:flex;justify-content:space-between}.app-widget--primary{background-color:var(--root-base-color-primary);border:0}.app-widget--primary .app-widget__title,.app-widget--primary .app-widget__data{color:#fff}.app-widget--secondary{background-color:var(--root-base-color-primary);border:0}.app-widget--secondary .app-widget__title,.app-widget--secondary .app-widget__data{color:#fff}.app-widget--summary{gap:1.5rem;justify-content:start;padding:1.5rem}.app-widget--summary .app-widget__column{padding:0}.app-widget--small-data .app-widget__data{font-size:clamp(.996625rem,2vw + 1rem,1.1725rem)}.app-widget__icon{--size: 4rem;align-items:center;background-color:var(--root-widget-color-icon-background);block-size:var(--size);border-radius:var(--root-border-radius-sm);color:var(--root-base-color-primary);display:flex;flex-shrink:0;inline-size:var(--size);justify-content:center}.app-widget__icon svg{--size: 1.5rem;block-size:var(--size);inline-size:var(--size)}.app-widget__title{font-size:.938rem;font-weight:600;margin-block:0}.app-widget__data-row{align-items:center;display:flex;gap:1rem}.app-widget__data{line-height:var(--root-line-height-heading);margin-block:0}.app-widget__column{align-items:start;color:var(--root-base-color-heading);display:flex;flex-direction:column;font-size:clamp(1.9465332031rem,2vw + 1rem,2.2900390625rem);font-weight:700;line-height:var(--root-line-height-heading);padding:1.5rem}.app-widget__column .app-widget__trending{margin-block-start:.25rem}.app-widget__chart{max-inline-size:65%}.app-widget__chart foreignObject{padding-block:1rem}.app-sidebar{block-size:100%;border-inline-end:1px solid var(--root-base-color-border);display:flex;flex-direction:column;gap:1.5rem;padding-block:0 1.5rem}.app-sidebar__logo{block-size:1.25rem;display:inline-flex}.app-sidebar__search{display:none}@media (min-width: 64em){.app-sidebar__search{display:flex}}.app-sidebar__header{align-items:center;block-size:var(--root-header-block-size);border-block-end:1px solid var(--root-base-color-border);display:flex;flex-shrink:0;justify-content:space-between;margin-inline:1.5rem}.app-sidebar__body{flex-grow:1;margin-inline:.75rem;overflow-y:auto;padding-inline:.75rem}.app-sidebar__body::-webkit-scrollbar{block-size:.5rem;inline-size:.5rem}.app-sidebar__body::-webkit-scrollbar-thumb{background:var(--root-scrollbar-color-thumb-background);border-radius:.15em}.app-sidebar__body::-webkit-scrollbar-thumb:hover{background:var(--root-scrollbar-color-thumb-background-hover)}.app-sidebar__body::-webkit-scrollbar-track{background:var(--root-scrollbar-color-track-background);border-radius:.15em}.app-sidebar__body>*+*{border-block-start:1px solid var(--root-base-color-border);margin-block-start:1rem;padding-block-start:1rem}.app-header{-webkit-backdrop-filter:saturate(180%) blur(.25rem);backdrop-filter:saturate(180%) blur(.25rem);background-color:var(--root-header-color-background);border-block-end:1px solid var(--root-base-color-border);inset-block-start:0;position:sticky;z-index:15}.app-header__inner{align-items:center;block-size:var(--root-header-block-size);display:flex;flex-wrap:wrap;gap:clamp(1rem,5vw,3rem);justify-content:space-between;margin-inline:var(--root-container-gap)}.app-header__column{align-items:center;display:flex;flex-grow:1;gap:clamp(1rem,5vw,1.5rem)}.app-header__actions{align-items:center;display:flex;gap:clamp(1rem,5vw,1.5rem)}.app-header__actions--secondary{gap:1rem}.app-header__logo{block-size:1.25rem;display:inline-flex}@media (min-width: 64em){.app-header__logo{display:none}}.app-header__breadcrumb{display:none}@media (min-width: 64em){.app-header__breadcrumb{display:flex}}.app-heading{padding-block:clamp(1.5rem,5vw,3rem)}.app-heading__inner{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;justify-content:space-between}.app-heading__inner--column{flex-direction:column}.app-heading__caption>*{margin-block-end:0;margin-block-start:0}.app-heading__caption>*+*{margin-block-start:.5rem}.app-heading__title{font-weight:700}.app-heading__description{align-items:center;display:flex;flex-wrap:wrap;font-size:1rem;gap:.5rem 1.5rem}.app-heading__description>*{margin-block-end:0;margin-block-start:0}.app-heading__description>*+*{margin-block-start:.25rem}.app-heading__actions{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:end}.app-body{display:flex;flex-direction:column;gap:1.5rem}.app-actions{justify-content:space-between}@media (min-width: 80em){.app-actions--sidebar{margin-inline-end:21.5rem}}.app-actions,.app-actions__column{display:flex;flex-wrap:wrap;gap:1.5rem}.app-footer{padding-block:clamp(1.5rem,5vw,3rem);text-align:center}.app-footer__created-with{margin-block:0}.btn--light{background-color:var(--root-btn-color-light-background);border-color:var(--root-btn-color-light-background);color:var(--root-btn-color-light-foreground)}.btn--light:focus-visible{outline:2px solid var(--root-btn-color-light-focus-ring);outline-offset:2px}.btn--light:hover,.btn--light.btn--active{background-color:var(--root-btn-color-light-background-hover);border-color:var(--root-btn-color-light-background-hover);color:var(--root-btn-color-light-foreground-hover)}.btn--delete{background-color:var(--root-btn-color-delete-background);border-color:var(--root-btn-color-delete-background);color:var(--root-btn-color-delete-foreground)}.btn--delete:focus-visible{outline:2px solid var(--root-btn-color-delete-focus-ring);outline-offset:2px}.btn--delete:hover{background-color:var(--root-btn-color-delete-background-hover);border-color:var(--root-btn-color-delete-background-hover);color:var(--root-btn-color-delete-foreground-hover)}.btn--dark{background-color:var(--root-btn-color-dark-background);border-color:var(--root-btn-color-dark-background);color:var(--root-btn-color-dark-foreground)}.btn--dark:focus-visible{outline:2px solid var(--root-btn-color-dark-background);outline-offset:2px}.btn--dark:hover{background-color:var(--root-btn-color-dark-background-hover);border-color:var(--root-btn-color-dark-background-hover);color:var(--root-btn-color-dark-foreground)}.btn--dark-shadow{box-shadow:0 .55em 1em -.2em var(--root-btn-color-dark-shadow),0 .15em .35em -.185em var(--root-btn-color-dark-shadow)}.btn--outline-dark{background-color:transparent;border-color:var(--root-btn-color-dark-outline-border);color:var(--root-btn-color-dark-outline-foreground)}.btn--outline-dark:focus-visible{outline:2px solid var(--root-btn-color-dark-outline-focus-ring);outline-offset:2px}.btn--outline-dark:hover{background-color:var(--root-btn-color-dark-outline-background-hover);border-color:var(--root-btn-color-dark-outline-background-hover);color:var(--root-btn-color-dark-outline-foreground-hover)}.btn--counter{position:relative}.btn__counter{background-color:var(--root-alert-color-danger);border-radius:var(--root-border-radius-sm);color:var(--root-btn-color-primary-foreground);font-size:.6375rem;inset:-.5em -.5em auto auto;min-inline-size:1.25rem;padding:.45em;position:absolute;text-align:center}.apexcharts-legend-series{align-items:center;display:flex!important;gap:.25rem}.apexcharts-legend{display:flex;gap:1rem}.apexcharts-legend>*{margin:0!important}.apexcharts-text,.apexcharts-legend-text{color:var(--root-base-color-text)!important;fill:var(--root-base-color-text)}.apexcharts-tooltip,.apexcharts-tooltip-title{background:var(--root-base-color-background)!important;border-color:var(--root-base-color-border)!important}.apexcharts-tooltip-title{line-height:1;padding-block:.75em!important}.apexcharts-xaxis-tick,.apexcharts-gridline,.apexcharts-grid-borders line:last-child{stroke:var(--root-base-color-border)}.form-group-stack>*{margin-block-end:0;margin-block-start:0}.form-group-stack>*+*{margin-block-start:1rem}.form-group-stack--bordered>*+*{border-block-start:1px solid var(--root-base-color-border);padding-block-start:1rem}legend{font-family:var(--root-font-family-heading)}.form-control[type=color]{--root-border-radius: clamp(1.5rem, 5vw, 3rem)}.required-marker{color:var(--root-alert-color-danger)}.progressbar{display:flex;flex-direction:column;gap:.5rem;inline-size:100%}.progressbar__inner{background-color:var(--root-form-color-background);block-size:.5rem;border-radius:var(--root-border-radius-sm);box-shadow:inset 0 0 0 1px var(--root-form-color-border);position:relative}.progressbar__indicator{background-color:var(--root-base-color-primary);block-size:100%;border-radius:var(--root-border-radius-sm);inset:0 auto 0 0;position:absolute}.progressbar__indicator:not([style*=inline-size]){animation:1s progress infinite linear alternate;inline-size:20%}.progressbar__caption{text-align:center}@keyframes progress{0%{inset-inline-start:0%}to{inset-inline-start:80%}}@media (min-width: 32em){.display--flex\:xs{display:flex!important}}@media (min-width: 48em){.display--flex\:sm{display:flex!important}}@media (min-width: 64em){.display--flex\:md{display:flex!important}}@media (min-width: 80em){.display--flex\:lg{display:flex!important}}@media (min-width: 90em){.display--flex\:xl{display:flex!important}}@media (min-width: 110em){.display--flex\:xxl{display:flex!important}}@media (min-width: 32em){.display--none\:xs{display:none!important}}@media (min-width: 48em){.display--none\:sm{display:none!important}}@media (min-width: 64em){.display--none\:md{display:none!important}}@media (min-width: 80em){.display--none\:lg{display:none!important}}@media (min-width: 90em){.display--none\:xl{display:none!important}}@media (min-width: 110em){.display--none\:xxl{display:none!important}}.m-block\:0{margin-block:0!important}:root{--root-sidebar-inline-size: 20rem;--root-header-block-size: 4.5rem;--root-container-gap: clamp(1.5rem, 5vw, 3rem)}body{overflow-x:hidden}[x-cloak]{visibility:hidden!important}img{border-radius:var(--root-border-radius-sm)} diff --git a/public/build/assets/chart-06e0bb8f.js b/public/build/assets/chart-06e0bb8f.js new file mode 100644 index 000000000..76c55e632 --- /dev/null +++ b/public/build/assets/chart-06e0bb8f.js @@ -0,0 +1 @@ +import"./app-b7fc6e7f.js"; diff --git a/public/build/assets/chart-ca6a94d4.js b/public/build/assets/chart-ca6a94d4.js deleted file mode 100644 index 5de0ede68..000000000 --- a/public/build/assets/chart-ca6a94d4.js +++ /dev/null @@ -1 +0,0 @@ -import"./app-34baaef9.js"; diff --git a/public/build/assets/dropdown-06e0bb8f.js b/public/build/assets/dropdown-06e0bb8f.js new file mode 100644 index 000000000..76c55e632 --- /dev/null +++ b/public/build/assets/dropdown-06e0bb8f.js @@ -0,0 +1 @@ +import"./app-b7fc6e7f.js"; diff --git a/public/build/assets/dropdown-ca6a94d4.js b/public/build/assets/dropdown-ca6a94d4.js deleted file mode 100644 index 5de0ede68..000000000 --- a/public/build/assets/dropdown-ca6a94d4.js +++ /dev/null @@ -1 +0,0 @@ -import"./app-34baaef9.js"; diff --git a/public/build/assets/editor-06e0bb8f.js b/public/build/assets/editor-06e0bb8f.js new file mode 100644 index 000000000..76c55e632 --- /dev/null +++ b/public/build/assets/editor-06e0bb8f.js @@ -0,0 +1 @@ +import"./app-b7fc6e7f.js"; diff --git a/public/build/assets/editor-ca6a94d4.js b/public/build/assets/editor-ca6a94d4.js deleted file mode 100644 index 5de0ede68..000000000 --- a/public/build/assets/editor-ca6a94d4.js +++ /dev/null @@ -1 +0,0 @@ -import"./app-34baaef9.js"; diff --git a/public/build/assets/media-manager-06e0bb8f.js b/public/build/assets/media-manager-06e0bb8f.js new file mode 100644 index 000000000..76c55e632 --- /dev/null +++ b/public/build/assets/media-manager-06e0bb8f.js @@ -0,0 +1 @@ +import"./app-b7fc6e7f.js"; diff --git a/public/build/assets/media-manager-ca6a94d4.js b/public/build/assets/media-manager-ca6a94d4.js deleted file mode 100644 index 5de0ede68..000000000 --- a/public/build/assets/media-manager-ca6a94d4.js +++ /dev/null @@ -1 +0,0 @@ -import"./app-34baaef9.js"; diff --git a/public/build/assets/repeater-06e0bb8f.js b/public/build/assets/repeater-06e0bb8f.js new file mode 100644 index 000000000..76c55e632 --- /dev/null +++ b/public/build/assets/repeater-06e0bb8f.js @@ -0,0 +1 @@ +import"./app-b7fc6e7f.js"; diff --git a/public/build/assets/repeater-ca6a94d4.js b/public/build/assets/repeater-ca6a94d4.js deleted file mode 100644 index 5de0ede68..000000000 --- a/public/build/assets/repeater-ca6a94d4.js +++ /dev/null @@ -1 +0,0 @@ -import"./app-34baaef9.js"; diff --git a/public/build/assets/table-06e0bb8f.js b/public/build/assets/table-06e0bb8f.js new file mode 100644 index 000000000..76c55e632 --- /dev/null +++ b/public/build/assets/table-06e0bb8f.js @@ -0,0 +1 @@ +import"./app-b7fc6e7f.js"; diff --git a/public/build/assets/table-ca6a94d4.js b/public/build/assets/table-ca6a94d4.js deleted file mode 100644 index 5de0ede68..000000000 --- a/public/build/assets/table-ca6a94d4.js +++ /dev/null @@ -1 +0,0 @@ -import"./app-34baaef9.js"; diff --git a/public/build/manifest.json b/public/build/manifest.json index 672014cb4..83895fe76 100644 --- a/public/build/manifest.json +++ b/public/build/manifest.json @@ -1,18 +1,18 @@ { "resources/js/app.css": { - "file": "assets/app-d00ef1bd.css", + "file": "assets/app-dba7d4c7.css", "src": "resources/js/app.css" }, "resources/js/app.js": { "css": [ - "assets/app-d00ef1bd.css" + "assets/app-dba7d4c7.css" ], - "file": "assets/app-34baaef9.js", + "file": "assets/app-b7fc6e7f.js", "isEntry": true, "src": "resources/js/app.js" }, "resources/js/chart.js": { - "file": "assets/chart-ca6a94d4.js", + "file": "assets/chart-06e0bb8f.js", "imports": [ "resources/js/app.js" ], @@ -20,7 +20,7 @@ "src": "resources/js/chart.js" }, "resources/js/dropdown.js": { - "file": "assets/dropdown-ca6a94d4.js", + "file": "assets/dropdown-06e0bb8f.js", "imports": [ "resources/js/app.js" ], @@ -28,7 +28,7 @@ "src": "resources/js/dropdown.js" }, "resources/js/editor.js": { - "file": "assets/editor-ca6a94d4.js", + "file": "assets/editor-06e0bb8f.js", "imports": [ "resources/js/app.js" ], @@ -36,7 +36,7 @@ "src": "resources/js/editor.js" }, "resources/js/media-manager.js": { - "file": "assets/media-manager-ca6a94d4.js", + "file": "assets/media-manager-06e0bb8f.js", "imports": [ "resources/js/app.js" ], @@ -44,7 +44,7 @@ "src": "resources/js/media-manager.js" }, "resources/js/repeater.js": { - "file": "assets/repeater-ca6a94d4.js", + "file": "assets/repeater-06e0bb8f.js", "imports": [ "resources/js/app.js" ], @@ -52,7 +52,7 @@ "src": "resources/js/repeater.js" }, "resources/js/table.js": { - "file": "assets/table-ca6a94d4.js", + "file": "assets/table-06e0bb8f.js", "imports": [ "resources/js/app.js" ], @@ -60,7 +60,7 @@ "src": "resources/js/table.js" }, "resources/sass/app.scss": { - "file": "assets/app-8c4d86f4.js", + "file": "assets/app-2339afd5.js", "imports": [ "resources/js/app.js" ], diff --git a/resources/sass/app.scss b/resources/sass/app.scss index 980346749..962c1d050 100644 --- a/resources/sass/app.scss +++ b/resources/sass/app.scss @@ -15,6 +15,10 @@ )); } +body { + overflow-x: hidden; +} + [x-cloak] { visibility: hidden !important; } diff --git a/resources/sass/component/_alert.scss b/resources/sass/component/_alert.scss index 95d3e3a2d..9ab2170da 100644 --- a/resources/sass/component/_alert.scss +++ b/resources/sass/component/_alert.scss @@ -3,61 +3,61 @@ @use 'sprucecss/scss/spruce' as *; .alert { - align-items: center; - border: 1px solid; - border-left: 0.4rem solid; - border-radius: config('border-radius-sm', $display); - display: flex; - gap: spacer('m'); - justify-content: space-between; - line-height: config('line-height-md', $typography); - padding: 0.65em 1em; - - @each $name, $value in map.get($colors, 'alert') { - @at-root .alert--#{$name} { - background-color: color.scale($value, $lightness: 95%); - color: color.scale($value, $lightness: -30%); - } - - @at-root .alert--#{$name} .alert__close { - background-color: color.scale($value, $lightness: -30%); - color: color.scale($value, $lightness: 90%); - } + align-items: center; + border: 1px solid; + border-left: 0.4rem solid; + border-radius: config('border-radius-sm', $display); + display: flex; + gap: spacer('m'); + justify-content: space-between; + line-height: config('line-height-md', $typography); + padding: 0.65em 1em; + + @each $name, $value in map.get($colors, 'alert') { + @at-root .alert--#{$name} { + background-color: color.scale($value, $lightness: 95%); + color: color.scale($value, $lightness: -30%); + } + + @at-root .alert--#{$name} .alert__close { + background-color: color.scale($value, $lightness: -30%); + color: color.scale($value, $lightness: 90%); } + } - @each $name, $value in map.get($colors, 'alert') { - @at-root [data-theme-mode='dark'] .alert--#{$name} { - background-color: transparent; - border-color: color.scale($value, $lightness: -30%); - color: color('text'); - } + @each $name, $value in map.get($colors, 'alert') { + @at-root [data-theme-mode='dark'] .alert--#{$name} { + background-color: transparent; + border-color: color.scale($value, $lightness: -30%); + color: color('text'); } + } + + &__caption { + @include layout-stack('xxs'); + } + + &__close { + --size: 1.5rem; + @include clear-btn; + @include transition; + align-items: center; + block-size: var(--size); + border-radius: config('border-radius-sm', $display); + display: flex; + flex-shrink: 0; + inline-size: var(--size); + justify-content: center; - &__caption { - @include layout-stack('xxs'); + &:hover, + &:focus { + opacity: 0.75; } - &__close { - --dimension: 1.5rem; - @include clear-btn; - @include transition; - align-items: center; - block-size: var(--dimension); - border-radius: config('border-radius-sm', $display); - display: flex; - flex-shrink: 0; - inline-size: var(--dimension); - justify-content: center; - - &:hover, - &:focus { - opacity: 0.75; - } - - svg { - --dimension: 0.85rem; - block-size: var(--dimension); - inline-size: var(--dimension); - } + svg { + --size: 0.85rem; + block-size: var(--size); + inline-size: var(--size); } + } } diff --git a/resources/sass/component/_auth-form.scss b/resources/sass/component/_auth-form.scss index c63c60825..0341ba290 100644 --- a/resources/sass/component/_auth-form.scss +++ b/resources/sass/component/_auth-form.scss @@ -1,26 +1,26 @@ @use 'sprucecss/scss/spruce' as *; .auth-form { - @include layout-stack('s'); - margin-block: auto; + @include layout-stack('s'); + margin-block: auto; - &__title { - font-weight: 700; - } + &__title { + font-weight: 700; + } - .or-separator { - margin-block-start: spacer('m'); - } + .or-separator { + margin-block-start: spacer('m'); + } } .form-group-stacked, .social-logins { - @include layout-stack('s'); + @include layout-stack('s'); } .form-label { - &--space-between { - display: flex; - justify-content: space-between; - } + &--space-between { + display: flex; + justify-content: space-between; + } } diff --git a/resources/sass/component/_block-navigation.scss b/resources/sass/component/_block-navigation.scss index aae7f9afb..cf32030a9 100644 --- a/resources/sass/component/_block-navigation.scss +++ b/resources/sass/component/_block-navigation.scss @@ -1,103 +1,102 @@ @use 'sprucecss/scss/spruce' as *; .block-navigation { - @include a11y-card-link('.block-navigation__toggle', true); + @include a11y-card-link('.block-navigation__toggle', true); + display: flex; + flex-direction: column; + gap: spacer('s'); + position: relative; + z-index: 1; + + &__title { + align-items: center; + color: color('heading'); display: flex; - flex-direction: column; - gap: spacer('s'); - position: relative; - z-index: 1; - - &__title { - align-items: center; - color: color('heading'); - display: flex; - font-size: config('font-size-base', $typography); - font-weight: 700; - justify-content: space-between; - margin-block: 0; + font-size: config('font-size-base', $typography); + font-weight: 700; + justify-content: space-between; + margin-block: 0; + } + + &__toggle { + &[aria-expanded='true'] { + svg { + rotate: 180deg; + } } - &__toggle { - &[aria-expanded='true'] { - svg { - rotate: 180deg; - } - } + svg { + pointer-events: none; + } + } - svg { - pointer-events: none; - } + &__menu { + &[data-state='closed'] { + display: none; } - &__menu { - &:not(.is-open) { - display: none; - } + &[data-state='open'] { + display: block; + } - &.is-open { - display: block; - } + ul { + @include clear-list; + } - ul { - @include clear-list; + a { + align-items: center; + color: color('text'); + display: flex; + gap: 0.75em; + padding-block: 0.35em; + padding-inline: 0.75em; + position: relative; + text-decoration: none; + + &:hover:not([aria-current='page']) { + &::before { + background-color: color('primary-lightest'); + } + } + + &::before { + border-radius: config('border-radius-sm', $display); + content: ''; + inset-block: 0; + inset-inline: 0; + position: absolute; + z-index: -1; + } + + &[aria-current='page'] { + color: hsl(0deg 0% 100%); + + &::before { + background-color: color('primary'); } - a { - align-items: center; - color: color('text'); - display: flex; - gap: 0.75em; - padding-block: 0.35em; - padding-inline: 0.75em; - position: relative; - text-decoration: none; - - &:hover:not([aria-current='page']) { - &::before { - background-color: color('primary-lightest'); - } - } - - &::before { - border-radius: config('border-radius-sm', $display); - content: ''; - inset-block: 0; - inset-inline: 0; - position: absolute; - z-index: -1; - } - - /* stylelint-disable-next-line selector-no-qualifying-type */ - &[aria-current='page'] { - color: hsl(0deg 0% 100%); - - &::before { - background-color: color('primary'); - } - - svg { - color: hsl(0deg 0% 100%); - } - } - - svg { - --dimension: 1.15em; - block-size: var(--dimension); - color: color('primary'); - inline-size: var(--dimension); - } + svg { + color: hsl(0deg 0% 100%); } + } + + svg { + --size: 1.15em; + block-size: var(--size); + color: color('primary'); + inline-size: var(--size); + } + } - &--breakout { - a { - padding-block: 0.35em; - padding-inline: 0; + &--breakout { + a { + padding-block: 0.35em; + padding-inline: 0; - &::before { - inset-inline: -0.75rem -0.35em; - } - } + &::before { + inset-inline: -0.75rem -0.35em; } + } } + } } diff --git a/resources/sass/component/_breadcrumb-list.scss b/resources/sass/component/_breadcrumb-list.scss index 9ad98c59a..2ce99a0a7 100644 --- a/resources/sass/component/_breadcrumb-list.scss +++ b/resources/sass/component/_breadcrumb-list.scss @@ -1,45 +1,44 @@ @use 'sprucecss/scss/spruce' as *; .breadcrumb-list { - @include clear-list; - align-items: center; - display: flex; - max-inline-size: 100%; - overflow-x: auto; - white-space: nowrap; + @include clear-list; + align-items: center; + display: flex; + max-inline-size: 100%; + overflow-x: auto; + white-space: nowrap; - > li { - align-items: center; - display: inline-flex; - margin-block: 0; + > li { + align-items: center; + display: inline-flex; + margin-block: 0; - + li::before { - block-size: 0.4em; - border-block-end: 2px solid color('separator', 'breadcrumb'); - border-inline-end: 2px solid color('separator', 'breadcrumb'); - content: ''; - display: inline-flex; - inline-size: 0.4em; - margin-inline: 0.75em; - transform: rotate(-45deg); + + li::before { + block-size: 0.4em; + border-block-end: 2px solid color('separator', 'breadcrumb'); + border-inline-end: 2px solid color('separator', 'breadcrumb'); + content: ''; + display: inline-flex; + inline-size: 0.4em; + margin-inline: 0.75em; + transform: rotate(-45deg); - @at-root { - /* stylelint-disable-next-line selector-max-compound-selectors */ - [dir='rtl'] & { - transform: rotate(45deg); - } - } + @at-root { + [dir='rtl'] & { + transform: rotate(45deg); } + } } + } - a { - text-decoration: none; - } + a { + text-decoration: none; + } - [aria-current='page'] { - @include text-ellipsis(1); - display: inline-block; - max-inline-size: 20ch; - text-align: start; - } + [aria-current='page'] { + @include text-ellipsis(1); + display: inline-block; + max-inline-size: 20ch; + text-align: start; + } } diff --git a/resources/sass/component/_card.scss b/resources/sass/component/_card.scss index 20a42f77d..d0e3c193a 100644 --- a/resources/sass/component/_card.scss +++ b/resources/sass/component/_card.scss @@ -1,100 +1,121 @@ @use 'sprucecss/scss/spruce' as *; .app-card { - $this: &; - background-color: color('background'); - border: 1px solid color('border'); - border-radius: config('border-radius-sm', $display); - box-shadow: 0 0 spacer('xxs') hsl(201.15deg 72.03% 32.71% / 5%); - - &:focus-within { - z-index: 5; + $this: &; + background-color: color('background'); + border: 1px solid color('border'); + border-radius: config('border-radius-sm', $display); + box-shadow: 0 0 spacer('xxs') hsl(201deg 72% 32% / 5%); + + &:focus-within { + z-index: 5; + } + + &--edit { + #{$this}__header { + padding-inline: spacer('m'); } - &--edit { - #{$this}__header { - padding-inline: spacer('m'); - } + #{$this}__body { + padding-block: spacer('m'); - #{$this}__body { - padding: spacer('m'); - } + > * { + padding-inline: spacer('m'); + } } + } - &--setting { - #{$this}__body { - @include layout-stack(0.75rem); - padding: spacer('m'); - } + &--setting { + #{$this}__body { + @include layout-stack(0.75rem); + padding-block: spacer('m'); - #{$this}__content { - @include layout-stack('xs'); - } + > * { + padding-inline: spacer('m'); + } } - &--sidebar { - display: grid; - gap: spacer-clamp('m', 'l'); - grid-template-columns: minmax(0, 1fr); - padding: spacer('m'); + #{$this}__content { + @include layout-stack('xs'); + } + } - @include breakpoint('md') { - grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); - } + &--sidebar { + display: grid; + gap: spacer-clamp('m', 'l'); + grid-template-columns: minmax(0, 1fr); + padding: spacer('m'); - > #{$this}__body { - @include layout-stack('m'); - padding: 0; - } + @include breakpoint('md') { + grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); } - &--info { - box-shadow: none; + > #{$this}__body { + @include layout-stack('m'); + padding: 0; + } + } - #{$this}__header { - border-block-end: 0; - min-block-size: 0; - padding-block: spacer('m') 0; - padding-inline: spacer('m'); - } + &--info { + box-shadow: none; - #{$this}__body { - padding: spacer('m'); - } + #{$this}__header { + border-block-end: 0; + min-block-size: 0; + padding-block: spacer('m') 0; + padding-inline: spacer('m'); } - &__header { - align-items: center; - border-block-end: 1px solid color('border'); - display: flex; - flex-wrap: wrap; - gap: spacer('xs') spacer('m'); - justify-content: space-between; - min-block-size: 3.4rem; - padding: 0.75rem spacer('s'); - } + #{$this}__body { + padding-block: spacer('m'); - &__actions { - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); - margin-inline-start: auto; + > * { + padding-inline: spacer('m'); + } } - - &__title { - font-size: font-size('h4'); - font-weight: 600; - margin-block: 0; + } + + &__header { + align-items: center; + border-block-end: 1px solid color('border'); + display: flex; + flex-wrap: wrap; + gap: spacer('xs') spacer('m'); + justify-content: space-between; + min-block-size: 3.4rem; + padding: 0.75rem spacer('s'); + } + + &__actions { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + margin-inline-start: auto; + } + + &__title { + font-size: font-size('h4'); + font-weight: 600; + margin-block: 0; + } + + &__body { + padding-block: spacer('s'); + + &--plain { + align-items: center; + display: flex; + justify-content: space-between; + padding: 0; } - &__body { - padding: spacer('s'); + > * { + padding-inline: spacer('s'); + } - &--plain { - align-items: center; - display: flex; - justify-content: space-between; - padding: 0; - } + img:not(.data-table__image) { + border-radius: config('border-radius-sm', $display); } + } } diff --git a/resources/sass/component/_context-menu.scss b/resources/sass/component/_context-menu.scss index af8d82a70..4350cf65a 100644 --- a/resources/sass/component/_context-menu.scss +++ b/resources/sass/component/_context-menu.scss @@ -1,67 +1,67 @@ @use 'sprucecss/scss/spruce' as *; .context-menu { - --inset-block-start: calc(100% + 1rem); - --inline-size: 10rem; + --inset-block-start: calc(100% + 1rem); + --inline-size: 10rem; - @include clear-list; - @include transition; - background-color: color('background'); - border: 1px solid color('border'); - border-radius: config('border-radius-sm', $display); - box-shadow: 0 0 spacer('xxs') hsl(201.15deg 72.03% 32.71% / 5%); - inline-size: var(--inline-size); - opacity: 0; - position: absolute; - scale: 0.85; - visibility: hidden; - z-index: 10; + @include clear-list; + @include transition; + background-color: color('background'); + border: 1px solid color('border'); + border-radius: config('border-radius-sm', $display); + box-shadow: 0 0 spacer('xxs') hsl(201deg 72% 32% / 5%); + inline-size: var(--inline-size); + opacity: 0; + position: absolute; + scale: 0.85; + visibility: hidden; + z-index: 10; - &--inline-start { - inset: var(--inset-block-start) auto auto 0; - } + &--inline-start { + inset: var(--inset-block-start) auto auto 0; + } - &--inline-end { - inset: var(--inset-block-start) 0 auto auto; - } + &--inline-end { + inset: var(--inset-block-start) 0 auto auto; + } - &.is-open { - opacity: 1; - scale: 1; - visibility: visible; - } + &[data-state='open'] { + opacity: 1; + scale: 1; + visibility: visible; + } - > li { - display: flex; - flex-direction: column; - } + > li { + display: flex; + flex-direction: column; + } - > li + li { - border-block-start: 1px solid color('border'); - margin-block-start: 0; - } + > li + li { + border-block-start: 1px solid color('border'); + margin-block-start: 0; + } - &__item { - align-items: center; - background: none; - block-size: 2.25rem; - border: 0; - border-radius: config('border-radius-sm', $display); - color: color('text'); - display: flex; - justify-content: space-between; - line-height: config('line-height-md', $typography); - margin: 0.15em; - padding-block: 0.25em; - padding-inline: 0.6em; - text-decoration: none; + &__item { + align-items: center; + background: none; + block-size: 2.25rem; + border: 0; + border-radius: config('border-radius-sm', $display); + color: color('text'); + display: flex; + justify-content: space-between; + line-height: config('line-height-md', $typography); + margin: 0.15em; + padding-block: 0.25em; + padding-inline: 0.6em; + text-decoration: none; - &:hover:not([aria-current='page'], :has(.theme-switcher)) { - background-color: color('primary-lightest'); - } + &:hover:not([aria-current='page'], :has(.theme-switcher)) { + background-color: color('primary-lightest'); + } - &[aria-current='page'] { - color: color('primary'); - } + &[aria-current='page'] { + color: color('primary'); } + } } diff --git a/resources/sass/component/_data-group.scss b/resources/sass/component/_data-group.scss index ccfc6b1e5..6801bc513 100644 --- a/resources/sass/component/_data-group.scss +++ b/resources/sass/component/_data-group.scss @@ -1,13 +1,13 @@ @use 'sprucecss/scss/spruce' as *; .data-group { - @include layout-stack('xxs'); + @include layout-stack('xxs'); - &__content { - @include text-ellipsis(2); - color: color('heading'); - font-family: config('font-family-heading', $typography); - font-weight: 600; - line-height: config('line-height-heading', $typography); - } + &__content { + @include text-ellipsis(2); + color: color('heading'); + font-family: config('font-family-heading', $typography); + font-weight: 600; + line-height: config('line-height-heading', $typography); + } } diff --git a/resources/sass/component/_data-table.scss b/resources/sass/component/_data-table.scss index 7176e6f2b..0378b1296 100644 --- a/resources/sass/component/_data-table.scss +++ b/resources/sass/component/_data-table.scss @@ -2,103 +2,103 @@ @use 'sprucecss/scss/spruce' as *; .data-table { - overflow: hidden; - position: relative; - - &__image { - --dimension: 2.25rem; - block-size: var(--dimension); - border-radius: 50%; - inline-size: var(--dimension); - } + overflow: hidden; + position: relative; - &__actions { - align-items: center; - display: flex; - gap: spacer('xs'); - justify-content: end; - } + &__image { + --size: 2.25rem; + block-size: var(--size); + border-radius: 50%; + inline-size: var(--size); + } + + &__actions { + align-items: center; + display: flex; + gap: spacer('xs'); + justify-content: end; + } + + &__no-results { + text-align: center; + } - &__footer { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('s'); - justify-content: space-between; - margin-block: spacer('m') spacer('s'); - - &-column { - display: flex; - flex-wrap: wrap; - gap: spacer('s'); - - > * { - margin-block: 0; - } - } + &__footer { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('s'); + justify-content: space-between; + margin-block: spacer('m') spacer('s'); + + &-column { + display: flex; + flex-wrap: wrap; + gap: spacer('s'); + + > * { + margin-block: 0; + } } + } } .data-table-alert { - border-width: 1px; + border-width: 1px; + flex-wrap: wrap; + gap: spacer('xs') spacer('s'); + padding-inline-end: 0.65em; + + &__actions { + align-items: center; + display: flex; flex-wrap: wrap; - gap: spacer('xs') spacer('s'); - padding-inline-end: 0.65em; - - &__actions { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('xs') spacer('m'); - - .form-control { - inline-size: auto; - } - } + gap: spacer('xs') spacer('m'); - &__column { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); + .form-control { + inline-size: auto; } + } + + &__column { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + } } .data-table-filter { - position: relative; - - &__actions { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); - } + position: relative; - .context-menu { - --inline-size: 16rem; - padding: spacer('s'); - } -} - -.data-table-sort { - @include a11y-card-link('.data-table-sort__control', true); + &__actions { align-items: center; display: flex; + flex-wrap: wrap; gap: spacer('xs'); - white-space: nowrap; + } - &__control { - @include clear-btn; - } + .context-menu { + --inline-size: 16rem; + padding: spacer('s'); + } +} - svg { - --dimension: 0.85em; - block-size: var(--dimension); - color: color('icon', 'data-table'); - inline-size: var(--dimension); - } +.sort-btn { + @include clear-btn; + align-items: center; + display: flex; + gap: spacer('xs'); + white-space: nowrap; + + svg { + --size: 0.85em; + block-size: var(--size); + color: color('icon', 'data-table'); + inline-size: var(--size); + } } .data-table-deleted { - color: color('danger', 'alert'); + color: color('danger', 'alert'); } diff --git a/resources/sass/component/_index.scss b/resources/sass/component/_index.scss index 46994a84a..bb07574e4 100644 --- a/resources/sass/component/_index.scss +++ b/resources/sass/component/_index.scss @@ -20,4 +20,5 @@ @forward 'modal'; @forward 'notification'; @forward 'media-uploader'; +@forward 'search-modal'; @forward 'widget'; diff --git a/resources/sass/component/_media-uploader.scss b/resources/sass/component/_media-uploader.scss index 21019cc95..8d25817eb 100644 --- a/resources/sass/component/_media-uploader.scss +++ b/resources/sass/component/_media-uploader.scss @@ -1,102 +1,102 @@ @use 'sprucecss/scss/spruce' as *; .media-list { - --column: 2; - @include clear-list; - display: grid; - gap: spacer('m'); - grid-template-columns: repeat(var(--column), minmax(0, 1fr)); + --column: 2; + @include clear-list; + display: grid; + gap: spacer('m'); + grid-template-columns: repeat(var(--column), minmax(0, 1fr)); - @include breakpoint('xs') { - --column: 3; - } + @include breakpoint('xs') { + --column: 3; + } - @include breakpoint('sm') { - --column: 4; - } + @include breakpoint('sm') { + --column: 4; + } - @include breakpoint('md') { - --column: 6; - } + @include breakpoint('md') { + --column: 6; + } - @include breakpoint('lg') { - --column: 8; - } + @include breakpoint('lg') { + --column: 8; + } - > * + * { - margin-block-start: 0; - } + > * + * { + margin-block-start: 0; + } } .media-item { - border-radius: config('border-radius-lg', $display); - line-height: config('line-height-md', $typography); - position: relative; + border-radius: config('border-radius-sm', $display); + line-height: config('line-height-md', $typography); + position: relative; - &[aria-checked="true"], - &:focus-visible { - @include focus-ring( - $type: config('focus-ring-type', $btn, false), - $ring-color: color('primary-background', 'btn'), - $box-shadow-type: config('focus-ring-box-shadow-type', $btn, false), - $ring-size: 3px, - $ring-offset: 3px - ); - } + &[aria-checked="true"], + &:focus-visible { + @include focus-ring( + $type: config('focus-ring-type', $btn, false), + $ring-color: color('primary-background', 'btn'), + $box-shadow-type: config('focus-ring-box-shadow-type', $btn, false), + $ring-size: 3px, + $ring-offset: 3px + ); + } - &__background { - align-items: center; - aspect-ratio: 1; - background-color: color('background', 'media'); - border-radius: config('border-radius-lg', $display); - display: flex; - flex-direction: column; - gap: spacer('xxs'); - justify-content: center; - padding: spacer('s'); - } + &__background { + align-items: center; + aspect-ratio: 1; + background-color: color('background', 'media'); + border-radius: config('border-radius-sm', $display); + display: flex; + flex-direction: column; + gap: spacer('xxs'); + justify-content: center; + padding: spacer('s'); + } - &__icon { - --size: 1.5rem; - block-size: var(--size); - color: color('icon', 'media'); - inline-size: var(--size); - } + &__icon { + --size: 1.5rem; + block-size: var(--size); + color: color('icon', 'media'); + inline-size: var(--size); + } - &__name { - @include text-ellipsis(2); - max-inline-size: 100%; - text-align: center; - } + &__name { + @include text-ellipsis(2); + max-inline-size: 100%; + text-align: center; + } - &__selected { - --size: 1.5rem; - align-items: center; - background-color: color('primary-background', 'btn'); - block-size: var(--size); - border-radius: config('border-radius-sm', $display); - color: color('primary-foreground', 'btn'); - display: flex; - inline-size: var(--size); - inset: spacer('xs') spacer('xs') auto auto; - justify-content: center; - position: absolute; + &__selected { + --size: 1.5rem; + align-items: center; + background-color: color('primary-background', 'btn'); + block-size: var(--size); + border-radius: config('border-radius-sm', $display); + color: color('primary-foreground', 'btn'); + display: flex; + inline-size: var(--size); + inset: spacer('xs') spacer('xs') auto auto; + justify-content: center; + position: absolute; - svg { - --size: 1rem; - block-size: var(--size); - inline-size: var(--size); - } + svg { + --size: 1rem; + block-size: var(--size); + inline-size: var(--size); } + } - .progressbar { - margin-block-start: spacer('s'); - } + .progressbar { + margin-block-start: spacer('s'); + } - img { - aspect-ratio: 1; - border-radius: config('border-radius-lg', $display); - inline-size: 100%; - object-fit: cover; - } + img { + aspect-ratio: 1; + border-radius: config('border-radius-sm', $display); + inline-size: 100%; + object-fit: cover; + } } diff --git a/resources/sass/component/_modal.scss b/resources/sass/component/_modal.scss index 84cecea61..c7d37e877 100644 --- a/resources/sass/component/_modal.scss +++ b/resources/sass/component/_modal.scss @@ -1,171 +1,172 @@ @use 'sprucecss/scss/spruce' as *; .modal-backdrop { - align-items: start; - background-color: color('background', 'modal'); + align-items: start; + background-color: color('background', 'modal'); + display: flex; + inset: 0; + justify-content: center; + overflow-y: auto; + position: fixed; + z-index: 25; +} + +.modal { + $this: &; + + @include set-css-variable(( + --inline-size: 34rem + )); + background-color: color('background'); + border: 1px solid color('border'); + border-radius: config('border-radius-sm', $display); + box-shadow: 0 0 spacer('xxs') hsl(201deg 72% 32% / 5%); + inline-size: get-css-variable(--inline-size); + margin: spacer('m'); + max-inline-size: 100%; + outline: 0; + position: relative; + + &--media { display: flex; + flex-direction: column; + inline-size: auto; inset: 0; - justify-content: center; - overflow-y: auto; position: fixed; - z-index: 25; -} -.modal { - $this: &; - - @include set-css-variable(( - --inline-size: 34rem - )); - background-color: color('background'); - border: 1px solid color('border'); - border-radius: config('border-radius-sm', $display); - box-shadow: 0 0 spacer('xxs') hsl(201.15deg 72.03% 32.71% / 5%); - inline-size: get-css-variable(--inline-size); - margin: spacer('m'); - max-inline-size: 100%; - position: relative; - - &--media { - display: flex; - flex-direction: column; + #{$this}__body { + @include scrollbar; + flex-grow: 1; + overflow-y: auto; + } + + #{$this}__header-caption { + order: 1; + } + + #{$this}__close { + order: 2; + + @include breakpoint('md') { + order: 3; + } + } + + #{$this}__filter { + inline-size: 100%; + order: 3; + + @include breakpoint('md') { inline-size: auto; - inset: 0; - position: fixed; - - #{$this}__body { - @include scrollbar; - flex-grow: 1; - overflow-y: auto; - } - - #{$this}__header-caption { - order: 1; - } - - #{$this}__close { - order: 2; - - @include breakpoint('md') { - order: 3; - } - } - - #{$this}__filter { - inline-size: 100%; - order: 3; - - @include breakpoint('md') { - inline-size: auto; - margin-inline-start: auto; - order: 2; - } - } + margin-inline-start: auto; + order: 2; + } + } + } + + &--dropzone { + &::before { + background-color: color('dropzone-background', 'media'); + border: 2px solid color('dropzone-border', 'media'); + border-radius: config('border-radius-sm', $display); + content: ''; + inset: 0; + pointer-events: none; + position: absolute; + z-index: 2; } - &--dropzone { - &::before { - background-color: color('dropzone-background', 'media'); - border: 2px solid color('dropzone-border', 'media'); - border-radius: config('border-radius-sm', $display); - content: ''; - inset: 0; - pointer-events: none; - position: absolute; - z-index: 2; - } - - &::after { - align-items: center; - color: hsl(0deg 0% 100%); - content: attr(data-dropzone); - display: flex; - font-size: font-size('h2'); - inset: 0; - justify-content: center; - line-height: config('line-height-md', $typography); - padding: spacer('m'); - position: absolute; - text-align: center; - z-index: 3; - } + &::after { + align-items: center; + color: hsl(0deg 0% 100%); + content: attr(data-dropzone); + display: flex; + font-size: font-size('h2'); + inset: 0; + justify-content: center; + line-height: config('line-height-md', $typography); + padding: spacer('m'); + position: absolute; + text-align: center; + z-index: 3; } + } + + &__header { + align-items: center; + border-block-end: 1px solid color('border'); + display: flex; + flex-wrap: wrap; + gap: spacer('s'); + justify-content: space-between; + padding: spacer('s') spacer-clamp('s', 'm'); - &__header { - align-items: center; - border-block-end: 1px solid color('border'); - display: flex; - flex-wrap: wrap; - gap: spacer('s'); - justify-content: space-between; - padding: spacer('s') spacer-clamp('s', 'm'); - - &-caption { - @include layout-stack(0); - } + &-caption { + @include layout-stack(0); } + } + + &__title { + font-size: font-size('h3'); + font-weight: 600; + margin-block: 0; + } + + &__body { + @include layout-stack('s'); + padding: spacer-clamp('s', 'm'); + } + + &__footer { + align-items: center; + border-block-start: 1px solid color('border'); + display: flex; + flex-wrap: wrap; + gap: spacer('s'); + justify-content: end; + padding: spacer('s') spacer-clamp('s', 'm'); - &__title { - font-size: font-size('h3'); - font-weight: 600; - margin-block: 0; + &--space-between { + justify-content: space-between; } - &__body { - @include layout-stack('s'); - padding: spacer-clamp('s', 'm'); + input { + flex-grow: 1; + max-inline-size: 25rem; } + } - &__footer { - align-items: center; - border-block-start: 1px solid color('border'); - display: flex; - flex-wrap: wrap; - gap: spacer('s'); - justify-content: end; - padding: spacer('s') spacer-clamp('s', 'm'); - - &--space-between { - justify-content: space-between; - } - - input { - flex-grow: 1; - max-inline-size: 25rem; - } + &__filter { + align-items: center; + display: flex; + gap: spacer('s'); + margin-inline: calc(#{spacer('xs')} * -1); + -ms-overflow-style: none; + overflow-x: auto; + padding: spacer('xs'); + scrollbar-width: none; + + @include breakpoint('md') { + margin-inline: 0; + overflow: initial; + padding: 0; } - &__filter { - align-items: center; - display: flex; - gap: spacer('s'); - margin-inline: calc(#{spacer('xs')} * -1); - -ms-overflow-style: none; - overflow-x: auto; - padding: spacer('xs'); - scrollbar-width: none; - - @include breakpoint('md') { - margin-inline: 0; - overflow: initial; - padding: 0; - } - - &::-webkit-scrollbar { - display: none; - } - - select, - input { - inline-size: auto; - min-inline-size: 10rem; - } + &::-webkit-scrollbar { + display: none; } - &__column { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('s'); + select, + input { + inline-size: auto; + min-inline-size: 10rem; } + } + + &__column { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('s'); + } } diff --git a/resources/sass/component/_notification.scss b/resources/sass/component/_notification.scss index 40dbab303..5f7341309 100644 --- a/resources/sass/component/_notification.scss +++ b/resources/sass/component/_notification.scss @@ -3,116 +3,168 @@ @use 'sprucecss/scss/spruce' as *; .app-notification { - position: relative; - - &__header { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); - justify-content: space-between; - } - - &__title { - font-size: font-size('h4'); - font-weight: 600; - margin-block: 0; + &__drawer { + @include transition; + background-color: color('background'); + block-size: 100dvh; + box-shadow: 0 0 spacer('xxs') hsl(201deg 72% 32% / 5%); + display: flex; + flex-direction: column; + gap: spacer('m'); + inline-size: 100%; + inset: 0 0 0 auto; + padding: spacer('m'); + position: fixed; + transform: translateX(100%); + z-index: 50; + + &[data-state='open'] { + transform: translateX(0); } - &__list { - @include scrollbar; - max-block-size: 25rem; - overflow-y: auto; - overscroll-behavior: contain; - - > * + * { - border-block-start: 1px solid color('border'); - margin-block-start: spacer('s'); - padding-block-start: spacer('s'); - } + @include breakpoint('xs') { + inline-size: 26rem; } + } - .context-menu { - --inline-size: 20rem; - display: flex; - flex-direction: column; - gap: spacer('s'); - inset: var(--inset-block-start) -4.75rem auto auto; - padding: spacer('s'); - - @include breakpoint('sm') { - inset: var(--inset-block-start) 0 auto auto; - } - - @include breakpoint('md') { - --inline-size: 26rem; - } + &__header { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + justify-content: space-between; + } + + &__title { + font-size: font-size('h4'); + font-weight: 600; + margin-block: 0; + } + + &__list { + @include scrollbar; + overflow-y: auto; + overscroll-behavior: contain; + + > * + * { + border-block-start: 1px solid color('border'); + margin-block-start: spacer('s'); + padding-block-start: spacer('s'); } + } } .notification-card { - @include a11y-card-link('.notification-card__link', true); + $this: &; + --icon-size: 2.5rem; + @include a11y-card-link('.notification-card__link', true); + padding-inline-end: spacer('s'); + + &--read { + opacity: 0.5; + } + + &--open { + #{$this}__control { + svg { + rotate: 90deg; + } + + .horizontal-line { + opacity: 0; + } + } + } + + &__header { + align-items: start; display: flex; gap: spacer('s'); + } + + &__icon { + align-items: center; + block-size: var(--icon-size); + border-radius: config('border-radius-sm', $display); + display: flex; + flex-shrink: 0; + inline-size: var(--icon-size); + justify-content: center; + + &--info { + background-color: color.adjust(color('info', 'alert', $only-color: true), $lightness: 55%); + color: color('info', 'alert'); + } + + &--warning { + background-color: color.adjust(color('warning', 'alert', $only-color: true), $lightness: 41%); + color: color('warning', 'alert'); + } - &--read { - opacity: 0.5; + &--danger { + background-color: color.adjust(color('danger', 'alert', $only-color: true), $lightness: 46.5%); + color: color('danger', 'alert'); } - &__icon { - --size: 2.5rem; - align-items: center; - block-size: var(--size); - border-radius: config('border-radius-sm', $display); - display: flex; - flex-shrink: 0; - inline-size: var(--size); - justify-content: center; - - &--info { - background-color: color.adjust(color('info', 'alert', $only-color: true), $lightness: 55%); - color: color('info', 'alert'); - } - - &--warning { - background-color: color.adjust(color('warning', 'alert', $only-color: true), $lightness: 41%); - color: color('warning', 'alert'); - } - - &--danger { - background-color: color.adjust(color('danger', 'alert', $only-color: true), $lightness: 46.5%); - color: color('danger', 'alert'); - } - - &--success { - background-color: color.adjust(color('success', 'alert', $only-color: true), $lightness: 63%); - color: color('success', 'alert'); - } - - svg { - --size: 1rem; - block-size: var(--size); - inline-size: var(--size); - } + &--success { + background-color: color.adjust(color('success', 'alert', $only-color: true), $lightness: 63%); + color: color('success', 'alert'); } - &__caption { - @include layout-stack('xxs'); - line-height: config('line-height-md', $typography); - padding-inline-end: spacer('s'); + svg { + --size: 1rem; + block-size: var(--size); + inline-size: var(--size); } + } + + &__caption { + @include layout-stack('xxs'); + line-height: config('line-height-md', $typography); + } + + &__title { + font-size: config('font-size-base', $typography); + } - &__title { - font-size: config('font-size-base', $typography); + &__link { + color: color('heading'); + text-decoration: none; + + &:hover, + &:focus { + color: color('link'); } + } + + &__control { + flex-shrink: 0; + margin-inline-start: auto; - &__link { - color: color('heading'); - text-decoration: none; + svg { + @include transition; + } + } + + &__body { + @include transition; + border-inline-start: 1px solid color('border'); + display: grid; + margin-inline-start: calc(var(--icon-size) / 2); + padding-inline-start: calc(var(--icon-size) / 2); + + &[aria-hidden="true"] { + grid-template-rows: 0fr; + } + + &[aria-hidden="false"] { + grid-template-rows: 1fr; + margin-block-start: spacer('s'); + } - &:hover, - &:focus { - color: color('link'); - } + > div { + @include layout-stack('xs'); + overflow: hidden; } + } } diff --git a/resources/sass/component/_open-search.scss b/resources/sass/component/_open-search.scss index c61b77af0..597008f3d 100644 --- a/resources/sass/component/_open-search.scss +++ b/resources/sass/component/_open-search.scss @@ -1,15 +1,15 @@ @use 'sprucecss/scss/spruce' as *; .open-search { - @include a11y-card-link('.open-search__btn', true); - align-items: center; - display: flex; - gap: spacer('xs'); + @include a11y-card-link('.open-search__btn', true); + align-items: center; + display: flex; + gap: spacer('xs'); - &__icon { - --dimension: 1rem; - block-size: var(--dimension); - color: color('icon', 'search'); - inline-size: var(--dimension); - } + &__icon { + --size: 1rem; + block-size: var(--size); + color: color('icon', 'search'); + inline-size: var(--size); + } } diff --git a/resources/sass/component/_or-separator.scss b/resources/sass/component/_or-separator.scss index f6caf2eae..1aeab6612 100644 --- a/resources/sass/component/_or-separator.scss +++ b/resources/sass/component/_or-separator.scss @@ -1,18 +1,18 @@ @use 'sprucecss/scss/spruce' as *; .or-separator { - align-items: center; - display: flex; - font-size: config('font-size-sm', $typography); - gap: spacer('s'); - text-transform: uppercase; + align-items: center; + display: flex; + font-size: config('font-size-sm', $typography); + gap: spacer('s'); + text-transform: uppercase; - &::before, - &::after { - background-color: color('border'); - block-size: 1px; - content: ''; - display: flex; - inline-size: 100%; - } + &::before, + &::after { + background-color: color('border'); + block-size: 1px; + content: ''; + display: flex; + inline-size: 100%; + } } diff --git a/resources/sass/component/_pagination.scss b/resources/sass/component/_pagination.scss index f8eed3b28..6874d026b 100644 --- a/resources/sass/component/_pagination.scss +++ b/resources/sass/component/_pagination.scss @@ -1,19 +1,19 @@ @use 'sprucecss/scss/spruce' as *; .pagination { - &__links { - @include clear-list; - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); + &__links { + @include clear-list; + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); - > * + * { - margin-block-start: 0; - } + > * + * { + margin-block-start: 0; } + } - [aria-current="page"] { - background-color: color('primary-background', 'btn'); - color: color('primary-foreground', 'btn'); - } + [aria-current="page"] { + background-color: color('primary-background', 'btn'); + color: color('primary-foreground', 'btn'); + } } diff --git a/resources/sass/component/_preloader.scss b/resources/sass/component/_preloader.scss index 604246db8..67f7de3c4 100644 --- a/resources/sass/component/_preloader.scss +++ b/resources/sass/component/_preloader.scss @@ -1,27 +1,27 @@ @use 'sprucecss/scss/spruce' as *; .preloader--circle { - --color: currentColor; - --border-width: 0.25em; - --size: 1.5rem; - --animation-duration: 1s; + --color: currentColor; + --border-width: 0.25em; + --size: 1.5rem; + --animation-duration: 1s; + block-size: var(--size); + inline-size: var(--size); + + &::after { + animation: rotation var(--animation-duration) linear infinite; block-size: var(--size); + border: var(--border-width) solid var(--color); + border-color: var(--color) transparent var(--color) transparent; + border-radius: 50%; + content: ''; + display: flex; inline-size: var(--size); - - &::after { - animation: rotation var(--animation-duration) linear infinite; - block-size: var(--size); - border: var(--border-width) solid var(--color); - border-color: var(--color) transparent var(--color) transparent; - border-radius: 50%; - content: ''; - display: flex; - inline-size: var(--size); - } + } } @keyframes rotation { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } } diff --git a/resources/sass/component/_prism.scss b/resources/sass/component/_prism.scss index 57dfdc35d..8da7a0ec6 100644 --- a/resources/sass/component/_prism.scss +++ b/resources/sass/component/_prism.scss @@ -1,85 +1,84 @@ @use 'sprucecss/scss/spruce' as *; -/* stylelint-disable selector-no-qualifying-type */ code[class*='language-'], pre[class*='language-'] { - border-radius: config('border-radius-lg', $display); - color: color('color', 'prism'); - font-family: config('font-family-cursive', $typography); - font-size: config('font-size-base', $typography); - hyphens: none; - line-height: 1.5; - tab-size: 4; - text-align: left; - white-space: pre; - word-break: normal; - word-spacing: normal; - word-wrap: normal; + border-radius: config('border-radius-sm', $display); + color: color('color', 'prism'); + font-family: config('font-family-cursive', $typography); + font-size: config('font-size-base', $typography); + hyphens: none; + line-height: 1.5; + tab-size: 4; + text-align: left; + white-space: pre; + word-break: normal; + word-spacing: normal; + word-wrap: normal; } @media print { - code[class*='language-'], - pre[class*='language-'] { - text-shadow: none; - } + code[class*='language-'], + pre[class*='language-'] { + text-shadow: none; + } } /* Code blocks */ pre[class*='language-'] { - display: grid; - overflow: auto; - padding: spacer('m'); + display: grid; + overflow: auto; + padding: spacer('m'); } pre[class*='language-'] code { - background-color: transparent; - padding: 0; + background-color: transparent; + padding: 0; } :not(pre) > code[class*='language-'], pre[class*='language-'] { - @include scrollbar; - background: color('background', 'prism'); - overflow-x: auto; + @include scrollbar; + background: color('background', 'prism'); + overflow-x: auto; } .token.comment, .token.prolog, .token.cdata { - color: color('comment', 'prism'); - font-style: italic; + color: color('comment', 'prism'); + font-style: italic; } .token.punctuation { - color: color('punctuation', 'prism'); + color: color('punctuation', 'prism'); } .namespace { - color: color('namespace', 'prism'); + color: color('namespace', 'prism'); } .token.deleted { - color: color('deleted', 'prism'); - font-style: italic; + color: color('deleted', 'prism'); + font-style: italic; } .token.symbol, .token.operator, .token.keyword, .token.property { - color: color('namespace', 'prism'); + color: color('namespace', 'prism'); } .token.tag { - color: color('punctuation', 'prism'); + color: color('punctuation', 'prism'); } .token.boolean { - color: color('boolean', 'prism'); + color: color('boolean', 'prism'); } .token.number { - color: color('number', 'prism'); + color: color('number', 'prism'); } .token.constant, @@ -90,38 +89,38 @@ pre[class*='language-'] { .language-css .token.string, .style .token.string, .token.char { - color: color('constant', 'prism'); + color: color('constant', 'prism'); } .token.selector, .token.function, .token.doctype { - color: color('punctuation', 'prism'); - font-style: italic; + color: color('punctuation', 'prism'); + font-style: italic; } .token.attr-name, .token.inserted { - color: color('constant', 'prism'); - font-style: italic; + color: color('constant', 'prism'); + font-style: italic; } .token.class-name, .token.atrule { - color: color('class-name', 'prism'); + color: color('class-name', 'prism'); } .token.regex, .token.important, .token.variable { - color: color('regex', 'prism'); + color: color('regex', 'prism'); } .token.important, .token.bold { - font-weight: bold; + font-weight: bold; } .token.italic { - font-style: italic; + font-style: italic; } diff --git a/resources/sass/component/_range-group.scss b/resources/sass/component/_range-group.scss index b479b0c97..8a65fec58 100644 --- a/resources/sass/component/_range-group.scss +++ b/resources/sass/component/_range-group.scss @@ -1,30 +1,30 @@ @use 'sprucecss/scss/spruce' as *; .range-group { - display: flex; - flex-direction: column; - gap: spacer('xxs'); + display: flex; + flex-direction: column; + gap: spacer('xxs'); - .form-label { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); - justify-content: center; - } + .form-label { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + justify-content: center; + } - &__inner { - align-items: center; - display: flex; - gap: spacer('xs'); + &__inner { + align-items: center; + display: flex; + gap: spacer('xs'); - .form-range { - flex-grow: 1; - margin-block-start: 0; - } + .form-range { + flex-grow: 1; + margin-block-start: 0; + } - .form-range-control { - flex-shrink: 0; - } + .form-range-control { + flex-shrink: 0; } + } } diff --git a/resources/sass/component/_search-modal.scss b/resources/sass/component/_search-modal.scss new file mode 100644 index 000000000..95424b541 --- /dev/null +++ b/resources/sass/component/_search-modal.scss @@ -0,0 +1,37 @@ +@use 'sprucecss/scss/spruce' as *; + +.search-modal { + display: flex; + flex-direction: column; + gap: spacer('s'); +} + +.search-results { + @include scrollbar; + @include clear-list; + max-block-size: 20rem; + overflow-y: auto; + padding-inline-end: spacer('s'); + + > li + li { + border-block-start: 1px dashed color('border'); + margin-block-start: spacer('xs'); + padding-block-start: spacer('xs'); + } +} + +.search-result-item { + align-items: center; + color: color('text'); + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + text-decoration: none; + + &__icon { + --size: 1em; + block-size: var(--size); + color: color('primary'); + inline-size: var(--size); + } +} diff --git a/resources/sass/component/_skip-link.scss b/resources/sass/component/_skip-link.scss index c0d9a77d6..02466663f 100644 --- a/resources/sass/component/_skip-link.scss +++ b/resources/sass/component/_skip-link.scss @@ -1,10 +1,10 @@ @use 'sprucecss/scss/spruce' as *; .skip-link { - inset: -50vh auto auto spacer('m'); - position: fixed; + inset: -50vh auto auto spacer('m'); + position: fixed; - &:focus { - inset-block-start: spacer('m'); - } + &:focus { + inset-block-start: spacer('m'); + } } diff --git a/resources/sass/component/_theme-switcher.scss b/resources/sass/component/_theme-switcher.scss index 0ae628755..fe859e268 100644 --- a/resources/sass/component/_theme-switcher.scss +++ b/resources/sass/component/_theme-switcher.scss @@ -1,25 +1,25 @@ @use 'sprucecss/scss/spruce' as *; .no-transition { - * { - transition: none !important; - } + * { + transition: none !important; + } } .theme-switcher { - color: color('text'); - display: inline-flex; - position: relative; + color: color('text'); + display: inline-flex; + position: relative; - &[data-theme-mode='system'] &__system-mode { display: flex; } - &[data-theme-mode='light'] &__light-mode { display: flex; } - &[data-theme-mode='dark'] &__dark-mode { display: flex; } + &[data-theme-mode='system'] &__system-mode { display: flex; } + &[data-theme-mode='light'] &__light-mode { display: flex; } + &[data-theme-mode='dark'] &__dark-mode { display: flex; } - button { - display: none; + button { + display: none; - > * { - pointer-events: none; - } + > * { + pointer-events: none; } + } } diff --git a/resources/sass/component/_user-menu.scss b/resources/sass/component/_user-menu.scss index 23683c3ea..bb4c773e2 100644 --- a/resources/sass/component/_user-menu.scss +++ b/resources/sass/component/_user-menu.scss @@ -1,51 +1,51 @@ @use 'sprucecss/scss/spruce' as *; .user-menu { - @include a11y-card-link('.user-menu__toggle', true); - align-items: center; - display: flex; - gap: spacer-clamp('xs', 's', '1vw'); - position: relative; - - &__avatar { - --dimension: 2.1rem; - block-size: var(--dimension); - border-radius: 50%; - inline-size: var(--dimension); + @include a11y-card-link('.user-menu__toggle', true); + align-items: center; + display: flex; + gap: spacer-clamp('xs', 's', '1vw'); + position: relative; + + &__avatar { + --size: 2.1rem; + block-size: var(--size); + border-radius: 50%; + inline-size: var(--size); + } + + &__caption { + display: none; + flex-direction: column; + font-size: config('font-size-base', $typography); + gap: spacer('xxs'); + line-height: 1; + + @include breakpoint('md') { + display: flex; } + } - &__caption { - display: none; - flex-direction: column; - font-size: config('font-size-base', $typography); - gap: spacer('xxs'); - line-height: 1; - - @include breakpoint('md') { - display: flex; - } - } + &__role { + font-size: config('font-size-sm', $typography); + } - &__role { - font-size: config('font-size-sm', $typography); - } + &__display-name { + color: color('heading'); + font-weight: 700; + } - &__display-name { - color: color('heading'); - font-weight: 700; - } + &__toggle { + background: none; + border: 0; + cursor: pointer; + display: flex; + padding: 0; - &__toggle { - background: none; - border: 0; - cursor: pointer; - display: flex; - padding: 0; - - svg { - --dimension: 1em; - block-size: var(--dimension); - inline-size: var(--dimension); - } + svg { + --size: 1em; + block-size: var(--size); + inline-size: var(--size); } + } } diff --git a/resources/sass/component/_widget.scss b/resources/sass/component/_widget.scss index 4dd1a662f..c32764b99 100644 --- a/resources/sass/component/_widget.scss +++ b/resources/sass/component/_widget.scss @@ -2,108 +2,108 @@ @use 'sprucecss/scss/spruce' as *; .app-widget { - $this: &; - align-items: center; - - background-color: color('background'); - border: 1px solid color('border'); - border-radius: config('border-radius-sm', $display); - box-shadow: 0 0 spacer('xxs') hsl(201.15deg 72.03% 32.71% / 5%); - display: flex; - justify-content: space-between; - - &--primary { - background-color: color('primary'); - border: 0; - - #{$this}__title, - #{$this}__data { - color: hsl(0deg 0% 100%); - } + $this: &; + align-items: center; + + background-color: color('background'); + border: 1px solid color('border'); + border-radius: config('border-radius-sm', $display); + box-shadow: 0 0 spacer('xxs') hsl(201deg 72% 32% / 5%); + display: flex; + justify-content: space-between; + + &--primary { + background-color: color('primary'); + border: 0; + + #{$this}__title, + #{$this}__data { + color: hsl(0deg 0% 100%); } + } - &--secondary { - background-color: color('primary'); - border: 0; + &--secondary { + background-color: color('primary'); + border: 0; - #{$this}__title, - #{$this}__data { - color: hsl(0deg 0% 100%); - } + #{$this}__title, + #{$this}__data { + color: hsl(0deg 0% 100%); } + } - &--summary { - gap: spacer('m'); - justify-content: start; - padding: spacer('m'); + &--summary { + gap: spacer('m'); + justify-content: start; + padding: spacer('m'); - #{$this}__column { - padding: 0; - } + #{$this}__column { + padding: 0; } + } - &--small-data { - #{$this}__data { - font-size: font-size('h4'); - } + &--small-data { + #{$this}__data { + font-size: font-size('h4'); } + } - &__icon { - --dimension: 4rem; - align-items: center; - background-color: color('icon-background', 'widget'); - block-size: var(--dimension); - border-radius: config('border-radius-lg', $display); - color: color('primary'); - display: flex; - flex-shrink: 0; - inline-size: var(--dimension); - justify-content: center; - - svg { - --dimension: 1.5rem; - block-size: var(--dimension); - inline-size: var(--dimension); - } + &__icon { + --size: 4rem; + align-items: center; + background-color: color('icon-background', 'widget'); + block-size: var(--size); + border-radius: config('border-radius-sm', $display); + color: color('primary'); + display: flex; + flex-shrink: 0; + inline-size: var(--size); + justify-content: center; + + svg { + --size: 1.5rem; + block-size: var(--size); + inline-size: var(--size); } + } - &__title { - font-size: font-size('h5'); - font-weight: 600; - margin-block: 0; - } + &__title { + font-size: font-size('h5'); + font-weight: 600; + margin-block: 0; + } - &__data-row { - align-items: center; - display: flex; - gap: spacer('s'); - } + &__data-row { + align-items: center; + display: flex; + gap: spacer('s'); + } - &__data { - line-height: config('line-height-heading', $typography); - margin-block: 0; - } + &__data { + line-height: config('line-height-heading', $typography); + margin-block: 0; + } - &__column { - align-items: start; - color: color('heading'); - display: flex; - flex-direction: column; - font-size: font-size('h1'); - font-weight: 700; - line-height: config('line-height-heading', $typography); - padding: spacer('m'); - - #{$this}__trending { - margin-block-start: spacer('xxs'); - } + &__column { + align-items: start; + color: color('heading'); + display: flex; + flex-direction: column; + font-size: font-size('h1'); + font-weight: 700; + line-height: config('line-height-heading', $typography); + padding: spacer('m'); + + #{$this}__trending { + margin-block-start: spacer('xxs'); } + } - &__chart { - max-inline-size: 65%; + &__chart { + max-inline-size: 65%; - foreignObject { - padding-block: spacer('s'); - } + foreignObject { + padding-block: spacer('s'); } + } } diff --git a/resources/sass/component/badge/_status.scss b/resources/sass/component/badge/_status.scss index a80a302f1..8a20a7688 100644 --- a/resources/sass/component/badge/_status.scss +++ b/resources/sass/component/badge/_status.scss @@ -3,25 +3,25 @@ @use 'sprucecss/scss/spruce' as *; .status { - align-items: center; - display: inline-flex; - gap: spacer('xs'); - line-height: 1; - position: relative; - white-space: nowrap; + align-items: center; + display: inline-flex; + gap: spacer('xs'); + line-height: 1; + position: relative; + white-space: nowrap; - @each $name, $value in map.get($colors, 'alert') { - &--#{$name}::before { - background-color: color($name, 'alert'); - } + @each $name, $value in map.get($colors, 'alert') { + &--#{$name}::before { + background-color: color($name, 'alert'); } + } - &::before { - --dimension: 0.55em; - block-size: var(--dimension); - border-radius: 50%; - content: ''; - flex-shrink: 0; - inline-size: var(--dimension); - } + &::before { + --size: 0.55em; + block-size: var(--size); + border-radius: 50%; + content: ''; + flex-shrink: 0; + inline-size: var(--size); + } } diff --git a/resources/sass/component/badge/_trending.scss b/resources/sass/component/badge/_trending.scss index 3a7bfa4f3..717f7c6e5 100644 --- a/resources/sass/component/badge/_trending.scss +++ b/resources/sass/component/badge/_trending.scss @@ -2,29 +2,29 @@ @use 'sprucecss/scss/spruce' as *; .trending { - align-items: center; - border-radius: 2rem; - display: inline-flex; - font-family: config('font-family-heading', $typography); - font-size: config('font-size-sm', $typography); - font-weight: 600; - gap: spacer('xxs'); - line-height: 1; - padding: 0.35em 0.55em; + align-items: center; + border-radius: 2rem; + display: inline-flex; + font-family: config('font-family-heading', $typography); + font-size: config('font-size-sm', $typography); + font-weight: 600; + gap: spacer('xxs'); + line-height: 1; + padding: 0.35em 0.55em; - &--up { - background: color.adjust(color('success', 'alert', $only-color: true), $lightness: 60%); - color: color.adjust(color('success', 'alert', $only-color: true), $lightness: -7.5%); - } + &--up { + background: color.adjust(color('success', 'alert', $only-color: true), $lightness: 60%); + color: color.adjust(color('success', 'alert', $only-color: true), $lightness: -7.5%); + } - &--down { - background: color.adjust(color('danger', 'alert', $only-color: true), $lightness: 45%); - color: color.adjust(color('danger', 'alert', $only-color: true), $lightness: -5%); - } + &--down { + background: color.adjust(color('danger', 'alert', $only-color: true), $lightness: 45%); + color: color.adjust(color('danger', 'alert', $only-color: true), $lightness: -5%); + } - &__icon { - --dimension: 0.95em; - block-size: var(--dimension); - inline-size: var(--dimension); - } + &__icon { + --size: 0.95em; + block-size: var(--size); + inline-size: var(--size); + } } diff --git a/resources/sass/component/form/_btn-dropdown.scss b/resources/sass/component/form/_btn-dropdown.scss index 70263c4be..ecc575e61 100644 --- a/resources/sass/component/form/_btn-dropdown.scss +++ b/resources/sass/component/form/_btn-dropdown.scss @@ -1,7 +1,7 @@ @use 'sprucecss/scss/spruce' as *; .btn-dropdown { - display: inline-flex; - position: relative; - z-index: 10; + display: inline-flex; + position: relative; + z-index: 10; } diff --git a/resources/sass/component/form/_combobox.scss b/resources/sass/component/form/_combobox.scss index c72ddcfd5..13c05edf9 100644 --- a/resources/sass/component/form/_combobox.scss +++ b/resources/sass/component/form/_combobox.scss @@ -1,114 +1,114 @@ @use 'sprucecss/scss/spruce' as *; .combobox { - @include generate-variables($form-control, $include: ('border-width', 'border-radius')); + @include generate-variables($form-control, $include: ('border-width', 'border-radius')); + display: flex; + flex-direction: column; + gap: spacer('xs'); + + &__inner { + position: relative; + } + + &__selected-items { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + } + + &__toggle { + inset: 0 0 0 auto; + pointer-events: none; + position: absolute; + } + + &__reset { + align-self: start; + } + + &__no-results { + padding-inline: spacer('xs'); + } + + &__control { + @include field-icon(config('select', $form-icon, false), color('select-foreground', 'form', true)); + background-position: center right config('icon-right-offset', $form-select, false); + background-repeat: no-repeat; + background-size: config('icon-inline-size', $form-select, false) auto; + padding-inline-end: config('padding-right', $form-select, false); + } + + &__dropdown { + background-color: color('background', 'form'); + border: config('border-width', $form-control) solid color('border', 'form'); + border-radius: config('border-radius', $form-control); + inset: calc(100% + #{spacer('xs')}) 0 auto 0; + padding: spacer('xs'); + position: absolute; + z-index: 5; + } + + [role="listbox"] { + @include clear-list; + @include scrollbar; display: flex; flex-direction: column; gap: spacer('xs'); + max-block-size: 10rem; + overflow-y: auto; + padding-inline-end: spacer('xs'); - &__inner { - position: relative; - } - - &__selected-items { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); - } - - &__toggle { - inset: 0 0 0 auto; - pointer-events: none; - position: absolute; - } - - &__reset { - align-self: start; + > * { + margin-block-start: 0; } + } - &__no-results { - padding-inline: spacer('xs'); - } - - &__control { - @include field-icon(config('select', $form-icon, false), color('select-foreground', 'form', true)); - background-position: center right config('icon-right-offset', $form-select, false); - background-repeat: no-repeat; - background-size: config('icon-inline-size', $form-select, false) auto; - padding-inline-end: config('padding-right', $form-select, false); - } + [role="option"] { + align-items: center; + border-radius: config('border-radius', $form-control); + display: flex; + justify-content: space-between; + padding-block: spacer('xxs'); + padding-inline: spacer('xs'); + user-select: none; - &__dropdown { - background-color: color('background', 'form'); - border: config('border-width', $form-control) solid color('border', 'form'); - border-radius: config('border-radius', $form-control); - inset: calc(100% + #{spacer('xs')}) 0 auto 0; - padding: spacer('xs'); - position: absolute; - z-index: 5; + &[aria-selected="true"] { + background-color: color('light-background', 'btn'); + color: color('light-foreground', 'btn'); } - [role="listbox"] { - @include clear-list; - @include scrollbar; - display: flex; - flex-direction: column; - gap: spacer('xs'); - max-block-size: 10rem; - overflow-y: auto; - padding-inline-end: spacer('xs'); - - > * { - margin-block-start: 0; - } + &:hover, + &:focus, + &.highlighted { + background-color: color('primary-background', 'btn'); + color: color('primary-foreground', 'btn'); } - [role="option"] { - align-items: center; - border-radius: config('border-radius', $form-control); - display: flex; - justify-content: space-between; - padding-block: spacer('xxs'); - padding-inline: spacer('xs'); - user-select: none; - - &[aria-selected="true"] { - background-color: color('light-background', 'btn'); - color: color('light-foreground', 'btn'); - } - - &:hover, - &:focus, - &.highlighted { - background-color: color('primary-background', 'btn'); - color: color('primary-foreground', 'btn'); - } - - svg { - --dimension: 0.85em; - block-size: var(--dimension); - inline-size: var(--dimension); - } + svg { + --size: 0.85em; + block-size: var(--size); + inline-size: var(--size); } + } } .combobox-item { - align-items: center; - background-color: color('item-background', 'combobox'); - border-radius: 1em; - color: color('item-foreground', 'combobox'); - display: flex; - font-size: config('font-size-sm', $typography); - gap: spacer('xxs'); - line-height: 1; - padding-block: spacer('xxs'); - padding-inline: spacer('xs') spacer('xxs'); - - .btn--sm { - @include set-css-variable(( - --icon-padding: 0.25em, - --border-radius: 1em, - )); - } + align-items: center; + background-color: color('item-background', 'combobox'); + border-radius: 1em; + color: color('item-foreground', 'combobox'); + display: flex; + font-size: config('font-size-sm', $typography); + gap: spacer('xxs'); + line-height: 1; + padding-block: spacer('xxs'); + padding-inline: spacer('xs') spacer('xxs'); + + .btn--sm { + @include set-css-variable(( + --icon-padding: 0.25em, + --border-radius: 1em, + )); + } } diff --git a/resources/sass/component/form/_editor.scss b/resources/sass/component/form/_editor.scss index bfba78fb5..07bd4af55 100644 --- a/resources/sass/component/form/_editor.scss +++ b/resources/sass/component/form/_editor.scss @@ -1,60 +1,60 @@ @use 'sprucecss/scss/spruce' as *; .editor { - @include set-css-variable(( - --block-size: 18rem - )); - @include transition; - block-size: get-css-variable(--block-size); - border: 1px solid color('border', 'form'); - border-radius: config('border-radius-sm', $display); - display: flex; - flex-direction: column; - grid-template-rows: auto 1fr; - overflow: hidden; + @include set-css-variable(( + --block-size: 18rem + )); + @include transition; + block-size: get-css-variable(--block-size); + border: 1px solid color('border', 'form'); + border-radius: config('border-radius-sm', $display); + display: flex; + flex-direction: column; + grid-template-rows: auto 1fr; + overflow: hidden; - &:focus-within { - @include focus-ring( - $type: config('focus-ring-type', $form-control, false), - $border-color: color('border-focus', 'form'), - $ring-color: color('ring-focus', 'form'), - $box-shadow-type: config('focus-ring-box-shadow-type', $form-control, false), - $ring-size: config('focus-ring-size', $form-control, false), - $ring-offset: config('focus-ring-offset', $form-control, false) - ); - } + &:focus-within { + @include focus-ring( + $type: config('focus-ring-type', $form-control, false), + $border-color: color('border-focus', 'form'), + $ring-color: color('ring-focus', 'form'), + $box-shadow-type: config('focus-ring-box-shadow-type', $form-control, false), + $ring-size: config('focus-ring-size', $form-control, false), + $ring-offset: config('focus-ring-offset', $form-control, false) + ); + } - &__controls { - align-items: center; - border-block-end: 1px solid color('border'); - display: flex; - flex-wrap: wrap; - gap: spacer('xs') spacer('s'); - padding: spacer('xs'); + &__controls { + align-items: center; + border-block-end: 1px solid color('border'); + display: flex; + flex-wrap: wrap; + gap: spacer('xs') spacer('s'); + padding: spacer('xs'); - .form-control { - inline-size: auto; - } + .form-control { + inline-size: auto; } + } - &__group { - align-items: flex-start; - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); - } + &__group { + align-items: flex-start; + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + } - &__body { - @include scrollbar; - flex: 1 1 auto; - margin: spacer('xxs'); - overflow-x: hidden; - overflow-y: auto; - padding: spacer('s'); + &__body { + @include scrollbar; + flex: 1 1 auto; + margin: spacer('xxs'); + overflow-x: hidden; + overflow-y: auto; + padding: spacer('s'); - > [contenteditable='true'] { - @include layout-stack('xs'); - outline: 0; - } + > [contenteditable='true'] { + @include layout-stack('xs'); + outline: 0; } + } } diff --git a/resources/sass/component/form/_file-group.scss b/resources/sass/component/form/_file-group.scss index 65636a17f..f12d9aa57 100644 --- a/resources/sass/component/form/_file-group.scss +++ b/resources/sass/component/form/_file-group.scss @@ -1,98 +1,98 @@ @use 'sprucecss/scss/spruce' as *; .file-group-container { - container: file-group-container / inline-size; + container: file-group-container / inline-size; } .file-group { - $this: &; - @include generate-variables($form-control, $include: ('border-width', 'border-radius')); + $this: &; + @include generate-variables($form-control, $include: ('border-width', 'border-radius')); + align-items: center; + border: config('border-width', $form-control) solid color('border', 'form'); + border-radius: config('border-radius', $form-control); + display: flex; + gap: spacer('m'); + overflow: hidden; + padding: spacer('s'); + + @container file-group-container (inline-size < 30rem) { + flex-direction: column; + } + + &:has([style*='background-image']) { + #{$this}__remove { + display: inline-flex; + } + } + + &__preview { align-items: center; - border: config('border-width', $form-control) solid color('border', 'form'); + aspect-ratio: 1; + background-color: color('primary-lightest'); + background-position: center; + background-size: cover; border-radius: config('border-radius', $form-control); display: flex; - gap: spacer('m'); - overflow: hidden; - padding: spacer('s'); + flex-shrink: 0; + flex-wrap: wrap; + inline-size: 9rem; + justify-content: center; @container file-group-container (inline-size < 30rem) { - flex-direction: column; - } - - &:has([style*='background-image']) { - #{$this}__remove { - display: inline-flex; - } - } - - &__preview { - align-items: center; - aspect-ratio: 1; - background-color: color('primary-lightest'); - background-position: center; - background-size: cover; - border-radius: config('border-radius', $form-control); - display: flex; - flex-shrink: 0; - flex-wrap: wrap; - inline-size: 9rem; - justify-content: center; - - @container file-group-container (inline-size < 30rem) { - aspect-ratio: 16 / 9; - inline-size: 100%; - } - - &[style*='background-image'] #{$this}__icon { - display: none; - } - } - - &__body { - display: flex; - flex-direction: column; - gap: spacer('xxs'); - inline-size: 100%; - - > * { - margin-block: 0; - } + aspect-ratio: 16 / 9; + inline-size: 100%; } - &__icon { - --dimension: 2rem; - block-size: var(--dimension); - color: color('primary'); - inline-size: var(--dimension); + &[style*='background-image'] #{$this}__icon { + display: none; } + } - &__title { - color: color('heading'); - font-family: config('font-family-heading', $typography); - font-weight: 700; - } - - &__meta { - list-style: none; - padding-inline-start: 0; - - > * + * { - margin-block-start: 0; - } - } + &__body { + display: flex; + flex-direction: column; + gap: spacer('xxs'); + inline-size: 100%; - &__action { - display: flex; - flex-wrap: wrap; - gap: spacer('xs'); - margin-block-start: spacer('xs'); + > * { + margin-block: 0; } - - &__remove { - display: none; + } + + &__icon { + --size: 2rem; + block-size: var(--size); + color: color('primary'); + inline-size: var(--size); + } + + &__title { + color: color('heading'); + font-family: config('font-family-heading', $typography); + font-weight: 700; + } + + &__meta { + list-style: none; + padding-inline-start: 0; + + > * + * { + margin-block-start: 0; } + } - &__input { - flex: 1; - } + &__action { + display: flex; + flex-wrap: wrap; + gap: spacer('xs'); + margin-block-start: spacer('xs'); + } + + &__remove { + display: none; + } + + &__input { + flex: 1; + } } diff --git a/resources/sass/component/form/_file-list.scss b/resources/sass/component/form/_file-list.scss index 1713dae2c..4ace32899 100644 --- a/resources/sass/component/form/_file-list.scss +++ b/resources/sass/component/form/_file-list.scss @@ -1,68 +1,72 @@ @use 'sprucecss/scss/spruce' as *; .file-list { - @include generate-variables($form-control, $include: ('border-width', 'border-radius')); - display: flex; - flex-direction: column; - gap: spacer('s'); + @include generate-variables($form-control, $include: ('border-width', 'border-radius')); + display: flex; + flex-direction: column; + gap: spacer('s'); - &__items { - @include clear-list; - border: config('border-width', $form-control) solid color('border', 'form'); - border-radius: config('border-radius', $form-control); - padding: spacer('xs'); + &__items { + @include clear-list; + border: config('border-width', $form-control) solid color('border', 'form'); + border-radius: config('border-radius', $form-control); + padding: spacer('xs'); - > li + li { - border-block-start: config('border-width', $form-control) solid color('border'); - margin-block-start: spacer('xs'); - padding-block-start: spacer('xs'); - } + > li + li { + border-block-start: config('border-width', $form-control) solid color('border'); + margin-block-start: spacer('xs'); + padding-block-start: spacer('xs'); } + } } .file-list-item { + align-items: center; + display: flex; + gap: spacer('s'); + justify-content: space-between; + + &__icon { align-items: center; + aspect-ratio: 1; + background-color: color('background', 'media'); + border-radius: config('border-radius-sm', $display); display: flex; - gap: spacer('s'); - justify-content: space-between; + inline-size: 2.5rem; + justify-content: center; - &__icon { - align-items: center; - aspect-ratio: 1; - background-color: color('background', 'media'); - border-radius: config('border-radius-sm', $display); - display: flex; - inline-size: 2.5rem; - justify-content: center; - - svg { - --size: 1rem; - block-size: var(--size); - color: color('icon', 'media'); - inline-size: var(--size); - } + svg { + --size: 1rem; + block-size: var(--size); + color: color('icon', 'media'); + inline-size: var(--size); } + } - &__column { - align-items: center; - display: flex; - gap: spacer('s'); - } + &__column { + align-items: center; + display: flex; + gap: spacer('s'); + } - &__thumbnail { - aspect-ratio: 1; - border-radius: config('border-radius-sm', $display); - inline-size: 2.5rem; - } + &__thumbnail { + aspect-ratio: 1; + border-radius: config('border-radius-sm', $display); + inline-size: 2.5rem; + } - &__name { - @include text-ellipsis(1); - max-inline-size: 25ch; - } + &__name { + @include text-ellipsis(1); + max-inline-size: 10ch; - &__actions { - align-items: center; - display: flex; - gap: spacer('xxs'); + @include breakpoint('xs') { + max-inline-size: 25ch; } + } + + &__actions { + align-items: center; + display: flex; + gap: spacer('xxs'); + } } diff --git a/resources/sass/component/form/_repeater.scss b/resources/sass/component/form/_repeater.scss index b0b04a5df..89baf01b5 100644 --- a/resources/sass/component/form/_repeater.scss +++ b/resources/sass/component/form/_repeater.scss @@ -1,53 +1,53 @@ @use 'sprucecss/scss/spruce' as *; .repeater-container { - @include layout-stack('s'); + @include layout-stack('s'); } .repeater { - @include generate-variables($form-control, $include: ('border-width', 'border-radius')); - border: config('border-width', $form-control) solid color('border', 'form'); - border-radius: config('border-radius', $form-control); - padding: spacer('s'); - - &__heading { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('s'); - justify-content: space-between; - } - - &__body { - border-block-start: 1px solid color('border'); - margin-block-start: spacer('s'); - padding-block-start: spacer('s'); - } - - &__column { - align-items: center; - display: flex; - gap: spacer('s'); - } - - &__title { - @include text-ellipsis(1); - font-size: config('font-size-base', $typography); - margin-block: 0; - max-inline-size: 20ch; - } - - &__actions { - align-items: center; - display: flex; - gap: spacer('xxs'); - } - - &__toggle { - &[aria-expanded='true'] { - .vertical-line { - display: none; - } - } + @include generate-variables($form-control, $include: ('border-width', 'border-radius')); + border: config('border-width', $form-control) solid color('border', 'form'); + border-radius: config('border-radius', $form-control); + padding: spacer('s'); + + &__heading { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('s'); + justify-content: space-between; + } + + &__body { + border-block-start: 1px solid color('border'); + margin-block-start: spacer('s'); + padding-block-start: spacer('s'); + } + + &__column { + align-items: center; + display: flex; + gap: spacer('s'); + } + + &__title { + @include text-ellipsis(1); + font-size: config('font-size-base', $typography); + margin-block: 0; + max-inline-size: 20ch; + } + + &__actions { + align-items: center; + display: flex; + gap: spacer('xxs'); + } + + &__toggle { + &[aria-expanded='true'] { + .vertical-line { + display: none; + } } + } } diff --git a/resources/sass/component/form/_search-form.scss b/resources/sass/component/form/_search-form.scss index 1782aeae2..2a0e64864 100644 --- a/resources/sass/component/form/_search-form.scss +++ b/resources/sass/component/form/_search-form.scss @@ -1,43 +1,59 @@ @use 'sprucecss/scss/spruce' as *; .search-form { - $this: &; - position: relative; + @include generate-variables($form-control, ('focus-', 'textarea-')); + @include transition($property: all); + align-items: center; + background-color: color('background', 'form'); + border: config('border-width', $form-control) solid color('border', 'form'); + border-radius: config('border-radius', $form-control); + box-sizing: border-box; + display: flex; + gap: spacer('xs'); + padding: config('padding', $form-control); - &--sm { - #{$this}__control { - padding-inline-start: 1.75em; - } + &:focus-within { + @include focus-ring( + $type: config('focus-ring-type', $form-control, false), + $border-color: color('border-focus', 'form'), + $ring-color: color('ring-focus', 'form'), + $box-shadow-type: config('focus-ring-box-shadow-type', $form-control, false), + $ring-size: config('focus-ring-size', $form-control, false), + $ring-offset: config('focus-ring-offset', $form-control, false) + ); + } - #{$this}__submit { - padding-inline: 0.6em; - } + &__control { + background-color: transparent; + border: 0; + color: color('text', 'form'); + flex-grow: 2; + font-size: config('font-size', $form-control); + font-weight: config('font-weight', $form-control); + line-height: config('line-height', $form-control); + outline: 0; + padding: 0; + } - #{$this}__icon { - --dimension: 0.75rem; - } - } + &__icon { + --size: 0.9rem; + block-size: var(--size); + color: color('border', 'form'); + display: flex; + grid-column: 1 / 2; + grid-row: 1; + inline-size: var(--size); + justify-content: center; + } - &__control { - padding-inline-start: 2.15em; - } - - &__submit { - align-items: center; - background: none; - border: 0; - color: color('border', 'form'); - display: flex; - inset: 0 auto 0 0; - justify-content: center; - padding-block: 0; - padding-inline: 0.75em; - position: absolute; - } - - &__icon { - --dimension: 0.9rem; - block-size: var(--dimension); - inline-size: var(--dimension); - } + &__helper { + background-color: color('light-background', 'btn'); + border-radius: config('border-radius', $form-control, false); + color: color('light-foreground', 'btn'); + font-weight: config('font-weight', $btn, false); + justify-self: center; + line-height: 1; + padding: spacer('xxs') spacer('xs'); + pointer-events: none; + } } diff --git a/resources/sass/config/_config.scss b/resources/sass/config/_config.scss index b9fbd6d1e..ab7e48e55 100644 --- a/resources/sass/config/_config.scss +++ b/resources/sass/config/_config.scss @@ -7,126 +7,127 @@ $color-primary-lightest: hsl(210deg 60% 98%); $color-danger: hsl(0deg 71% 51%); @use 'sprucecss/scss/spruce' with ( - $btn: ( - 'font-family': #{'Manrope', sans-serif}, - 'font-weight': 600, + $btn: ( + 'font-family': #{'Manrope', sans-serif}, + 'font-weight': 600, + ), + $btn-lg: ( + 'font-size': 1rem, + ), + $colors: ( + 'base': ( + 'border': hsl(215deg 100% 96%), + 'primary-lightest': $color-primary-lightest, ), - $btn-lg: ( - 'font-size': 1rem, + 'btn': ( + 'dark-background': hsl(205deg 100% 2%), + 'dark-background-hover': hsl(205deg 100% 5%), + 'dark-foreground': hsl(0deg 0% 100%), + 'dark-outline-background-hover': hsl(205deg 100% 2%), + 'dark-outline-border': hsl(260deg 4% 70%), + 'dark-outline-foreground': hsl(205deg 100% 2%), + 'dark-outline-foreground-hover': hsl(0deg 0% 100%), + 'dark-outline-focus-ring': hsl(205deg 100% 2%), + 'dark-shadow': hsl(205deg 100% 2% / 5%), + 'light-background': $color-primary-lightest, + 'light-background-hover': $color-primary, + 'light-focus-ring': $color-primary, + 'light-foreground': $color-primary, + 'light-foreground-hover': hsl(0deg 0% 100%), + 'delete-background': color.adjust($color-danger, $lightness: 45%), + 'delete-background-hover': $color-danger, + 'delete-focus-ring': $color-danger, + 'delete-foreground': $color-danger, + 'delete-foreground-hover': hsl(0deg 0% 100%), + 'primary-outline-foreground': $color-primary, ), - $colors: ( - 'base': ( - 'border': hsl(215deg 100% 96%), - 'primary-lightest': $color-primary-lightest, - ), - 'btn': ( - 'dark-background': hsl(205deg 100% 2%), - 'dark-background-hover': hsl(205deg 100% 5%), - 'dark-foreground': hsl(0deg 0% 100%), - 'dark-outline-border': hsl(260deg 4% 70%), - 'dark-outline-foreground': hsl(205deg 100% 2%), - 'dark-outline-foreground-hover': hsl(0deg 0% 100%), - 'dark-outline-background-hover': hsl(205deg 100% 2%), - 'dark-outline-focus-ring': hsl(205deg 100% 2%), - 'light-background': $color-primary-lightest, - 'light-background-hover': $color-primary, - 'light-focus-ring': $color-primary, - 'light-foreground': $color-primary, - 'light-foreground-hover': hsl(0deg 0% 100%), - 'delete-background': color.adjust($color-danger, $lightness: 45%), - 'delete-background-hover': $color-danger, - 'delete-focus-ring': $color-danger, - 'delete-foreground': $color-danger, - 'delete-foreground-hover': hsl(0deg 0% 100%), - 'primary-outline-foreground': $color-primary, - ), - 'breadcrumb': ( - 'separator': hsl(0deg 0% 80%), - ), - 'combobox': ( - 'item-background': $color-primary-lightest, - 'item-foreground': $color-primary, - ), - 'data-table': ( - 'icon': hsl(0deg 0% 80%), - ), - 'form': ( - 'border': hsl(260deg 4% 75%), - ), - 'header': ( - 'background': hsl(0deg 0% 100% / 95%), - ), - 'navigation': ( - 'arrow': hsl(0deg 0% 0% / 15%), - ), - 'main': ( - 'background': $color-primary-lightest, - ), - 'media': ( - 'background': $color-primary-lightest, - 'dropzone-background': hsl(214deg 98% 49% / 75%), - 'dropzone-border': hsl(214deg 98% 40%), - 'icon': $color-primary, - ), - 'modal': ( - 'background': hsl(210deg 60% 98% / 90%), - ), - 'search': ( - 'icon': hsl(229deg 26% 48% / 25%), - ), - 'prism': ( - 'color': hsl(243deg 14% 29%), - 'background': hsl(0deg 0% 98%), - 'comment': hsl(225deg 14% 46%), - 'punctuation': hsl(279deg 50% 53%), - 'namespace': hsl(173deg 100% 24%), - 'deleted': hsl(1deg 83% 63% / 56%), - 'boolean': hsl(0deg 44% 53%), - 'number': hsl(315deg 90% 35%), - 'constant': hsl(221deg 57% 52%), - 'class-name': hsl(0deg 0% 7%), - 'regex': hsl(1deg 48% 59%), - ), - 'table': ( - 'hover': $color-primary-lightest, - 'stripe': $color-primary-lightest, - ), - 'widget': ( - 'icon-background': color.adjust($color-primary, $lightness: 49%), - ), + 'breadcrumb': ( + 'separator': hsl(0deg 0% 80%), ), - $color-primary: $color-primary, - $color-secondary: $color-secondary, - $dark-colors: dark.$colors, - $display: ( - 'border-radius-sm': 0.45rem, + 'combobox': ( + 'item-background': $color-primary-lightest, + 'item-foreground': $color-primary, ), - $form-check: ( - 'font-weight': 400, + 'data-table': ( + 'icon': hsl(0deg 0% 80%), ), - $form-control-sm: ( - 'padding': 0.1em 0.45em, + 'form': ( + 'border': hsl(260deg 4% 75%), ), - $form-fieldset: ( - 'gap': 0.5rem, - 'legend-font-size': 0.938rem, - 'legend-font-weight': 600, + 'header': ( + 'background': hsl(0deg 0% 100% / 95%), ), - $form-group: ( - 'row-container-inline-size': 40rem, + 'navigation': ( + 'arrow': hsl(0deg 0% 0% / 15%), ), - $form-label: ( - 'font-family': #{'Manrope', sans-serif}, - 'font-weight': 600, + 'main': ( + 'background': $color-primary-lightest, ), - $typography: ( - 'font-family-base': #{'Open Sans', sans-serif}, - 'font-family-heading': #{'Manrope', sans-serif}, - 'font-size-base': 0.938rem, - 'font-weight-heading': 600, + 'media': ( + 'background': $color-primary-lightest, + 'dropzone-background': hsl(214deg 98% 49% / 75%), + 'dropzone-border': hsl(214deg 98% 40%), + 'icon': $color-primary, ), - $settings: ( - 'css-custom-properties': true, - 'prefix': 'root', - ) + 'modal': ( + 'background': hsl(210deg 60% 98% / 90%), + ), + 'search': ( + 'icon': hsl(229deg 26% 48% / 25%), + ), + 'prism': ( + 'color': hsl(243deg 14% 29%), + 'background': hsl(0deg 0% 98%), + 'comment': hsl(225deg 14% 46%), + 'punctuation': hsl(279deg 50% 53%), + 'namespace': hsl(173deg 100% 24%), + 'deleted': hsl(1deg 83% 63% / 56%), + 'boolean': hsl(0deg 44% 53%), + 'number': hsl(315deg 90% 35%), + 'constant': hsl(221deg 57% 52%), + 'class-name': hsl(0deg 0% 7%), + 'regex': hsl(1deg 48% 59%), + ), + 'table': ( + 'hover': $color-primary-lightest, + 'stripe': $color-primary-lightest, + ), + 'widget': ( + 'icon-background': color.adjust($color-primary, $lightness: 49%), + ), + ), + $color-primary: $color-primary, + $color-secondary: $color-secondary, + $dark-colors: dark.$colors, + $display: ( + 'border-radius-sm': 0.45rem, + ), + $form-check: ( + 'font-weight': 400, + ), + $form-control-sm: ( + 'padding': 0.1em 0.45em, + ), + $form-fieldset: ( + 'gap': 0.5rem, + 'legend-font-size': 0.938rem, + 'legend-font-weight': 600, + ), + $form-group: ( + 'row-container-inline-size': 40rem, + ), + $form-label: ( + 'font-family': #{'Manrope', sans-serif}, + 'font-weight': 600, + ), + $typography: ( + 'font-family-base': #{'Open Sans', sans-serif}, + 'font-family-heading': #{'Manrope', sans-serif}, + 'font-size-base': 0.938rem, + 'font-weight-heading': 600, + ), + $settings: ( + 'css-custom-properties': true, + 'prefix': 'root', + ) ); diff --git a/resources/sass/config/_dark-colors.scss b/resources/sass/config/_dark-colors.scss index 6f332e625..29eea5aeb 100644 --- a/resources/sass/config/_dark-colors.scss +++ b/resources/sass/config/_dark-colors.scss @@ -10,138 +10,138 @@ $dark-color-success: hsl(150deg 100% 33%); $dark-color-white: hsl(0deg 0% 95%); $colors: ( - 'base': ( - 'background': $dark-color-black, - 'blockquote-border': $dark-color-primary, - 'border': $dark-color-gray-dark, - 'card-border': hsl(207deg 90% 13%), - 'code-background': hsl(207deg 64% 21%), - 'code-foreground': $dark-color-white, - 'footer-background': hsl(0deg 0% 0% / 15%), - 'heading': $dark-color-white, - 'link-hover': hsl(205deg 100% 62%), - 'link': hsl(205deg 100% 56%), - 'mark-background': hsl(50deg 100% 80%), - 'mark-foreground': $dark-color-black, - 'marker': $dark-color-primary, - 'primary': $dark-color-primary, - 'primary-lightest': hsl(240deg 30% 16%), - 'secondary': $dark-color-secondary, - 'text': $dark-color-gray, - ), - 'breadcrumb': ( - 'arrow': hsl(0deg 0% 100% / 10%), - ), - 'btn': ( - 'dark-background': hsl(0deg 0% 100%), - 'dark-background-hover': hsl(0deg 0% 95%), - 'dark-foreground': hsl(205deg 100% 5%), - 'dark-outline-border': hsl(0 0% 100% / 15%), - 'dark-outline-foreground': hsl(0deg 0% 100%), - 'dark-outline-foreground-hover': hsl(205deg 100% 2%), - 'dark-outline-background-hover': hsl(0deg 0% 100%), - 'dark-outline-focus-ring': hsl(0deg 0% 100%), - 'light-background': hsl(240deg 30% 12%), - 'light-background-hover': $dark-color-primary, - 'light-focus-ring': $dark-color-primary, - 'light-foreground': $dark-color-primary, - 'light-foreground-hover': hsl(0deg 0% 100%), - 'primary-background': $dark-color-primary, - 'primary-background-hover': color.adjust($dark-color-primary, $lightness: 10%), - 'primary-foreground': hsl(0deg 0% 100%), - 'primary-shadow': color.adjust($dark-color-primary, $lightness: -25%), - 'primary-outline-foreground': hsl(211deg 99% 60%), - 'secondary-background': $dark-color-secondary, - 'secondary-background-hover': color.adjust($dark-color-secondary, $lightness: 5%), - 'secondary-foreground': $dark-color-white, - ), - 'card': ( - 'background': $dark-color-black, - ), - 'combobox': ( - 'item-background': hsl(240deg 30% 12%), - 'item-foreground': $dark-color-primary, - ), - 'data-table': ( - 'icon': hsl(0deg 0% 100% / 0.1), - ), - 'form': ( - 'background': color.scale($dark-color-black, $lightness: 5%), - 'background-disabled': $dark-color-black, - 'border-disabled': $dark-color-gray-dark, - 'border-focus': $dark-color-primary, - 'border': hsl(0deg 0% 100% / 12%), - 'check-background': $dark-color-primary, - 'check-foreground': $dark-color-black, - 'group-label-background': color.scale($dark-color-black, $lightness: 2.5%), - 'group-label-foreground': $dark-color-gray, - 'invalid': $dark-color-danger, - 'invalid-shadow': color.adjust($dark-color-danger, $alpha: -0.75), - 'label': $dark-color-white, - 'legend': $dark-color-white, - 'placeholder': hsl(0deg 0% 90%), - 'select-foreground': hsl(0deg 0% 100%), - 'shadow-focus': color.adjust($dark-color-primary, $alpha: -0.75), - 'text': $dark-color-gray, - 'valid': $dark-color-success, - 'valid-shadow': color.adjust($dark-color-success, $alpha: -0.75), - ), - 'header': ( - 'background': hsl(240deg 30% 12% / 95%), - ), - 'navigation': ( - 'arrow': hsl(0deg 0% 100% / 15%), - 'icon-background': hsl(245deg 38% 10%), - 'icon-background-hover': $dark-color-primary, - 'icon-foreground': $dark-color-primary, - 'icon-foreground-hover': hsl(186deg 100% 5%), - ), - 'main': ( - 'background': hsl(240deg 30% 13%), - ), - 'media': ( - 'background': hsl(240deg 30% 12%), - 'dropzone-background': hsl(214deg 98% 49% / 75%), - 'dropzone-border': hsl(214deg 98% 40%), - 'icon': $dark-color-primary, - ), - 'modal': ( - 'background': hsla(240, 3%, 7%, 0.9), - ), - 'prism': ( - 'color': hsl(217deg 34% 88%), - 'background': hsl(245deg 38% 7%), - 'comment': hsl(180deg 9% 55%), - 'punctuation': hsl(276deg 68% 75%), - 'namespace': hsl(197deg 31% 77%), - 'deleted': hsl(1deg 83% 63% / 56%), - 'boolean': hsl(350deg 100% 67%), - 'number': hsl(14deg 90% 70%), - 'constant': hsl(221deg 100% 75%), - 'class-name': hsl(33deg 100% 77%), - 'regex': hsl(217deg 34% 88%), - ), - 'table': ( - 'border': $dark-color-gray-dark, - 'caption': $dark-color-gray, - 'heading': $dark-color-white, - 'hover': hsl(0deg 0% 100% / 2%), - 'stripe': hsl(0deg 0% 100% / 2.5%), - 'text': $dark-color-gray, - ), - 'selection': ( - 'background': $dark-color-primary, - 'foreground': hsl(0deg 0% 100%), - ), - 'search': ( - 'icon': hsl(0deg 0% 100% / 25%), - ), - 'scrollbar': ( - 'thumb-background': hsl(0 0% 100% / 15%), - 'thumb-background-hover': hsl(0 0% 100% / 25%), - 'track-background': hsl(0 0% 100% / 5%), - ), - 'widget': ( - 'icon-background': color.adjust($dark-color-black, $lightness: 5%), - ), + 'base': ( + 'background': $dark-color-black, + 'blockquote-border': $dark-color-primary, + 'border': $dark-color-gray-dark, + 'card-border': hsl(207deg 90% 13%), + 'code-background': hsl(207deg 64% 21%), + 'code-foreground': $dark-color-white, + 'footer-background': hsl(0deg 0% 0% / 15%), + 'heading': $dark-color-white, + 'link-hover': hsl(205deg 100% 62%), + 'link': hsl(205deg 100% 56%), + 'mark-background': hsl(50deg 100% 80%), + 'mark-foreground': $dark-color-black, + 'marker': $dark-color-primary, + 'primary': $dark-color-primary, + 'primary-lightest': hsl(240deg 30% 16%), + 'secondary': $dark-color-secondary, + 'text': $dark-color-gray, + ), + 'breadcrumb': ( + 'arrow': hsl(0deg 0% 100% / 10%), + ), + 'btn': ( + 'dark-background': hsl(0deg 0% 100%), + 'dark-background-hover': hsl(0deg 0% 95%), + 'dark-foreground': hsl(205deg 100% 5%), + 'dark-outline-border': hsl(0 0% 100% / 15%), + 'dark-outline-foreground': hsl(0deg 0% 100%), + 'dark-outline-foreground-hover': hsl(205deg 100% 2%), + 'dark-outline-background-hover': hsl(0deg 0% 100%), + 'dark-outline-focus-ring': hsl(0deg 0% 100%), + 'light-background': hsl(240deg 30% 12%), + 'light-background-hover': $dark-color-primary, + 'light-focus-ring': $dark-color-primary, + 'light-foreground': $dark-color-primary, + 'light-foreground-hover': hsl(0deg 0% 100%), + 'primary-background': $dark-color-primary, + 'primary-background-hover': color.adjust($dark-color-primary, $lightness: 10%), + 'primary-foreground': hsl(0deg 0% 100%), + 'primary-shadow': color.adjust($dark-color-primary, $lightness: -25%), + 'primary-outline-foreground': hsl(211deg 99% 60%), + 'secondary-background': $dark-color-secondary, + 'secondary-background-hover': color.adjust($dark-color-secondary, $lightness: 5%), + 'secondary-foreground': $dark-color-white, + ), + 'card': ( + 'background': $dark-color-black, + ), + 'combobox': ( + 'item-background': hsl(240deg 30% 12%), + 'item-foreground': $dark-color-primary, + ), + 'data-table': ( + 'icon': hsl(0deg 0% 100% / 0.1), + ), + 'form': ( + 'background': color.scale($dark-color-black, $lightness: 5%), + 'background-disabled': $dark-color-black, + 'border-disabled': $dark-color-gray-dark, + 'border-focus': $dark-color-primary, + 'border': hsl(0deg 0% 100% / 12%), + 'check-background': $dark-color-primary, + 'check-foreground': $dark-color-black, + 'group-label-background': color.scale($dark-color-black, $lightness: 2.5%), + 'group-label-foreground': $dark-color-gray, + 'invalid': $dark-color-danger, + 'invalid-shadow': color.adjust($dark-color-danger, $alpha: -0.75), + 'label': $dark-color-white, + 'legend': $dark-color-white, + 'placeholder': hsl(0deg 0% 90%), + 'select-foreground': hsl(0deg 0% 100%), + 'shadow-focus': color.adjust($dark-color-primary, $alpha: -0.75), + 'text': $dark-color-gray, + 'valid': $dark-color-success, + 'valid-shadow': color.adjust($dark-color-success, $alpha: -0.75), + ), + 'header': ( + 'background': hsl(240deg 30% 12% / 95%), + ), + 'navigation': ( + 'arrow': hsl(0deg 0% 100% / 15%), + 'icon-background': hsl(245deg 38% 10%), + 'icon-background-hover': $dark-color-primary, + 'icon-foreground': $dark-color-primary, + 'icon-foreground-hover': hsl(186deg 100% 5%), + ), + 'main': ( + 'background': hsl(240deg 30% 13%), + ), + 'media': ( + 'background': hsl(240deg 30% 12%), + 'dropzone-background': hsl(214deg 98% 49% / 75%), + 'dropzone-border': hsl(214deg 98% 40%), + 'icon': $dark-color-primary, + ), + 'modal': ( + 'background': hsla(240, 3%, 7%, 0.9), + ), + 'prism': ( + 'color': hsl(217deg 34% 88%), + 'background': hsl(245deg 38% 7%), + 'comment': hsl(180deg 9% 55%), + 'punctuation': hsl(276deg 68% 75%), + 'namespace': hsl(197deg 31% 77%), + 'deleted': hsl(1deg 83% 63% / 56%), + 'boolean': hsl(350deg 100% 67%), + 'number': hsl(14deg 90% 70%), + 'constant': hsl(221deg 100% 75%), + 'class-name': hsl(33deg 100% 77%), + 'regex': hsl(217deg 34% 88%), + ), + 'table': ( + 'border': $dark-color-gray-dark, + 'caption': $dark-color-gray, + 'heading': $dark-color-white, + 'hover': hsl(0deg 0% 100% / 2%), + 'stripe': hsl(0deg 0% 100% / 2.5%), + 'text': $dark-color-gray, + ), + 'selection': ( + 'background': $dark-color-primary, + 'foreground': hsl(0deg 0% 100%), + ), + 'search': ( + 'icon': hsl(0deg 0% 100% / 25%), + ), + 'scrollbar': ( + 'thumb-background': hsl(0 0% 100% / 15%), + 'thumb-background-hover': hsl(0 0% 100% / 25%), + 'track-background': hsl(0 0% 100% / 5%), + ), + 'widget': ( + 'icon-background': color.adjust($dark-color-black, $lightness: 5%), + ), ); diff --git a/resources/sass/config/_dark-mode.scss b/resources/sass/config/_dark-mode.scss index 26b5ad9c4..79bf74c2c 100644 --- a/resources/sass/config/_dark-mode.scss +++ b/resources/sass/config/_dark-mode.scss @@ -1,20 +1,20 @@ @use 'sprucecss/scss/spruce' as *; @include generate-color-variables( - $dark-colors, - ':root[data-theme-mode="dark"]' + $dark-colors, + ':root[data-theme-mode="dark"]' ); [data-theme-mode='dark'] { - color-scheme: dark; + color-scheme: dark; - /* stylelint-disable */ - select.form-control:not([multiple]):not([size]), - .combobox__control { - @include field-icon( - config('select', $form-icon, false), - color('select-foreground', 'form', true, $dark-colors) - ); - } - /* stylelint-enable */ + /* stylelint-disable */ + select.form-control:not([multiple]):not([size]), + .combobox__control { + @include field-icon( + config('select', $form-icon, false), + color('select-foreground', 'form', true, $dark-colors) + ); + } + /* stylelint-enable */ } diff --git a/resources/sass/config/_font.scss b/resources/sass/config/_font.scss index 270b7a61c..18a331439 100644 --- a/resources/sass/config/_font.scss +++ b/resources/sass/config/_font.scss @@ -1,35 +1,35 @@ @use 'sprucecss/scss/spruce' as *; @include font-face( - 'Manrope', - '/vendor/root/fonts/manrope-v14-latin-regular.woff2' + 'Manrope', + '/vendor/root/fonts/manrope-v14-latin-regular.woff2' ); @include font-face( - 'Manrope', - '/vendor/root/fonts/manrope-v14-latin-500.woff2', - 500 + 'Manrope', + '/vendor/root/fonts/manrope-v14-latin-500.woff2', + 500 ); @include font-face( - 'Manrope', - '/vendor/root/fonts/manrope-v14-latin-600.woff2', - 600 + 'Manrope', + '/vendor/root/fonts/manrope-v14-latin-600.woff2', + 600 ); @include font-face( - 'Manrope', - '/vendor/root/fonts/manrope-v14-latin-800.woff2', - 700 + 'Manrope', + '/vendor/root/fonts/manrope-v14-latin-800.woff2', + 700 ); @include font-face( - 'Open Sans', - '/vendor/root/fonts/open-sans-v35-latin-regular.woff2' + 'Open Sans', + '/vendor/root/fonts/open-sans-v35-latin-regular.woff2' ); @include font-face( - 'Open Sans', - '/vendor/root/fonts/open-sans-v35-latin-700.woff2', - 700 + 'Open Sans', + '/vendor/root/fonts/open-sans-v35-latin-700.woff2', + 700 ); diff --git a/resources/sass/extend/_btn.scss b/resources/sass/extend/_btn.scss index 6f4d21f3b..c4c639cb4 100644 --- a/resources/sass/extend/_btn.scss +++ b/resources/sass/extend/_btn.scss @@ -1,46 +1,42 @@ @use 'sass:color'; @use 'sprucecss/scss/spruce' as *; -.btn--dark { - @include btn-variant('dark'); -} - .btn--light { - @include btn-variant('light'); + @include btn-variant('light'); - &.btn--active { - background-color: color('light-background-hover', 'btn'); - border-color: color('light-background-hover', 'btn'); - color: color('light-foreground-hover', 'btn'); - } + &.btn--active { + background-color: color('light-background-hover', 'btn'); + border-color: color('light-background-hover', 'btn'); + color: color('light-foreground-hover', 'btn'); + } } .btn--delete { - @include btn-variant('delete'); + @include btn-variant('delete'); } .btn--dark { - @include btn-variant('dark'); + @include btn-variant('dark'); } .btn--outline-dark { - @include btn-variant-outline('dark'); + @include btn-variant-outline('dark'); } .btn { - &--counter { - position: relative; - } - - &__counter { - background-color: color('danger', 'alert'); - border-radius: config('border-radius-sm', $display); - color: color('primary-foreground', 'btn'); - font-size: 0.6375rem; - inset: -0.5em -0.5em auto auto; - min-inline-size: 1.25rem; - padding: 0.45em; - position: absolute; - text-align: center; - } + &--counter { + position: relative; + } + + &__counter { + background-color: color('danger', 'alert'); + border-radius: config('border-radius-sm', $display); + color: color('primary-foreground', 'btn'); + font-size: 0.6375rem; + inset: -0.5em -0.5em auto auto; + min-inline-size: 1.25rem; + padding: 0.45em; + position: absolute; + text-align: center; + } } diff --git a/resources/sass/extend/_chart.scss b/resources/sass/extend/_chart.scss index 47719deb8..a2546de53 100644 --- a/resources/sass/extend/_chart.scss +++ b/resources/sass/extend/_chart.scss @@ -1,39 +1,39 @@ @use 'sprucecss/scss/spruce' as *; .apexcharts-legend-series { - align-items: center; - display: flex !important; - gap: spacer('xxs'); + align-items: center; + display: flex !important; + gap: spacer('xxs'); } .apexcharts-legend { - display: flex; - gap: spacer('s'); + display: flex; + gap: spacer('s'); - > * { - margin: 0 !important; - } + > * { + margin: 0 !important; + } } .apexcharts-text, .apexcharts-legend-text { - color: color('text') !important; - fill: color('text'); + color: color('text') !important; + fill: color('text'); } .apexcharts-tooltip, .apexcharts-tooltip-title { - background: color('background') !important; - border-color: color('border') !important; + background: color('background') !important; + border-color: color('border') !important; } .apexcharts-tooltip-title { - line-height: 1; - padding-block: 0.75em !important; + line-height: 1; + padding-block: 0.75em !important; } .apexcharts-xaxis-tick, .apexcharts-gridline, .apexcharts-grid-borders line:last-child { - stroke: color('border'); + stroke: color('border'); } diff --git a/resources/sass/extend/_form.scss b/resources/sass/extend/_form.scss index f41c7db83..88cb13835 100644 --- a/resources/sass/extend/_form.scss +++ b/resources/sass/extend/_form.scss @@ -1,26 +1,26 @@ @use 'sprucecss/scss/spruce' as *; .form-group-stack { - @include layout-stack('s'); + @include layout-stack('s'); - &--bordered { - > * + * { - border-block-start: 1px solid color('border'); - padding-block-start: spacer('s'); - } + &--bordered { + > * + * { + border-block-start: 1px solid color('border'); + padding-block-start: spacer('s'); } + } } legend { - font-family: config('font-family-heading', $typography); + font-family: config('font-family-heading', $typography); } .form-control[type=color] { - @include set-css-variable(( - --border-radius: spacer-clamp('m', 'l') - )); + @include set-css-variable(( + --border-radius: spacer-clamp('m', 'l') + )); } .required-marker { - color: color('danger', 'alert'); + color: color('danger', 'alert'); } diff --git a/resources/sass/extend/_progress.scss b/resources/sass/extend/_progress.scss index c671f346c..c55e28429 100644 --- a/resources/sass/extend/_progress.scss +++ b/resources/sass/extend/_progress.scss @@ -1,43 +1,43 @@ @use 'sprucecss/scss/spruce' as *; .progressbar { - display: flex; - flex-direction: column; - gap: spacer('xs'); - inline-size: 100%; + display: flex; + flex-direction: column; + gap: spacer('xs'); + inline-size: 100%; - &__inner { - background-color: color('background', 'form'); - block-size: 0.5rem; - border-radius: config('border-radius-sm', $display); - box-shadow: inset 0 0 0 1px color('border', 'form'); - position: relative; - } + &__inner { + background-color: color('background', 'form'); + block-size: 0.5rem; + border-radius: config('border-radius-sm', $display); + box-shadow: inset 0 0 0 1px color('border', 'form'); + position: relative; + } - &__indicator { - background-color: color('primary'); - block-size: 100%; - border-radius: config('border-radius-sm', $display); - inset: 0 auto 0 0; - position: absolute; + &__indicator { + background-color: color('primary'); + block-size: 100%; + border-radius: config('border-radius-sm', $display); + inset: 0 auto 0 0; + position: absolute; - &:not([style*="inline-size"]) { - animation: 1s progress infinite linear alternate; - inline-size: 20%; - } + &:not([style*="inline-size"]) { + animation: 1s progress infinite linear alternate; + inline-size: 20%; } + } - &__caption { - text-align: center; - } + &__caption { + text-align: center; + } } @keyframes progress { - 0% { - inset-inline-start: 0%; - } + 0% { + inset-inline-start: 0%; + } - 100% { - inset-inline-start: 80%; - } + 100% { + inset-inline-start: 80%; + } } diff --git a/resources/sass/helper/_display.scss b/resources/sass/helper/_display.scss index b3162836f..ac449b9a3 100644 --- a/resources/sass/helper/_display.scss +++ b/resources/sass/helper/_display.scss @@ -1,19 +1,19 @@ @use 'sprucecss/scss/spruce' as *; .display { - @each $name, $breakpoint in $breakpoints { - @include breakpoint($name) { - &--flex\:#{$name} { - display: flex !important; - } - } + @each $name, $breakpoint in $breakpoints { + @include breakpoint($name) { + &--flex\:#{$name} { + display: flex !important; + } } + } - @each $name, $breakpoint in $breakpoints { - @include breakpoint($name) { - &--none\:#{$name} { - display: none !important; - } - } + @each $name, $breakpoint in $breakpoints { + @include breakpoint($name) { + &--none\:#{$name} { + display: none !important; + } } + } } diff --git a/resources/sass/helper/_margin.scss b/resources/sass/helper/_margin.scss index 6903e069c..2ecdecfd7 100644 --- a/resources/sass/helper/_margin.scss +++ b/resources/sass/helper/_margin.scss @@ -1,5 +1,5 @@ @use 'sprucecss/scss/spruce' as *; .m-block\:0 { - margin-block: 0 !important; + margin-block: 0 !important; } diff --git a/resources/sass/layout/_auth.scss b/resources/sass/layout/_auth.scss index 35609dc75..5fe78e8ba 100644 --- a/resources/sass/layout/_auth.scss +++ b/resources/sass/layout/_auth.scss @@ -1,85 +1,85 @@ @use 'sprucecss/scss/spruce' as *; .l-auth { - &__inner { - background-attachment: fixed; - display: flex; - flex-direction: column; - min-block-size: 100vh; - text-align: center; + &__inner { + background-attachment: fixed; + display: flex; + flex-direction: column; + min-block-size: 100vh; + text-align: center; - @include breakpoint('md') { - align-items: center; - flex-direction: row; - text-align: start; - } + @include breakpoint('md') { + align-items: center; + flex-direction: row; + text-align: start; } + } - &__sidebar { - background-image: url('/vendor/root/img/auth-background.png'); - background-position: center; - background-size: cover; - border-radius: 2rem; - margin-block-end: spacer-clamp('m', 'l'); - margin-inline: spacer-clamp('m', 'l'); - min-block-size: 10rem; + &__sidebar { + background-image: url('https://conedevel.com/assets/sprucecss/auth-background.png'); + background-position: center; + background-size: cover; + border-radius: 2rem; + margin-block-end: spacer-clamp('m', 'l'); + margin-inline: spacer-clamp('m', 'l'); + min-block-size: 10rem; - @include breakpoint('md') { - block-size: calc(100% - 2 * #{spacer('l')}); - inline-size: calc(50% - #{spacer('l')}); - inset-block: spacer('l'); - inset-inline: 50% spacer('l'); - margin: 0; - position: fixed; - } + @include breakpoint('md') { + block-size: calc(100% - 2 * #{spacer('l')}); + inline-size: calc(50% - #{spacer('l')}); + inset-block: spacer('l'); + inset-inline: 50% spacer('l'); + margin: 0; + position: fixed; } + } - &__form { - align-items: center; - block-size: 100%; - display: flex; - flex-direction: column; - gap: spacer('l'); - justify-content: center; - padding-block: spacer('l'); - padding-inline: spacer-clamp('m', 'l'); + &__form { + align-items: center; + block-size: 100%; + display: flex; + flex-direction: column; + gap: spacer('l'); + justify-content: center; + padding-block: spacer('l'); + padding-inline: spacer-clamp('m', 'l'); - @include breakpoint('md') { - inline-size: 50%; - margin-inline-start: 0; - min-block-size: 100vh; - } + @include breakpoint('md') { + inline-size: 50%; + margin-inline-start: 0; + min-block-size: 100vh; } + } - &__logo { - align-self: center; - block-size: 1.5rem; - display: inline-flex; + &__logo { + align-self: center; + block-size: 1.5rem; + display: inline-flex; - @include breakpoint('md') { - align-self: flex-start; - } + @include breakpoint('md') { + align-self: flex-start; + } - img { - block-size: 100%; - inline-size: auto; - } + img { + block-size: 100%; + inline-size: auto; } + } - &__footer { - inline-size: 100%; + &__footer { + inline-size: 100%; - p { - margin-block: 0; - } + p { + margin-block: 0; } + } - .auth-form { - inline-size: 100%; - max-inline-size: 25rem; + .auth-form { + inline-size: 100%; + max-inline-size: 25rem; - @include breakpoint('md') { - padding-block-end: spacer('m'); - } + @include breakpoint('md') { + padding-block-end: spacer('m'); } + } } diff --git a/resources/sass/layout/_container.scss b/resources/sass/layout/_container.scss index ca37c2669..adf7e8443 100644 --- a/resources/sass/layout/_container.scss +++ b/resources/sass/layout/_container.scss @@ -1,19 +1,19 @@ @use 'sprucecss/scss/spruce' as *; .container { - --inline-size: #{config('container-inline-size', $layout)}; - --gap: #{get-css-variable(--container-gap)}; + --inline-size: #{config('container-inline-size', $layout)}; + --gap: #{get-css-variable(--container-gap)}; - @include layout-center( - var(--gap), - var(--inline-size) - ); + @include layout-center( + var(--gap), + var(--inline-size) + ); - &--wide { - --inline-size: 100%; - } + &--wide { + --inline-size: 100%; + } - &--narrow { - --inline-size: 50rem; - } + &--narrow { + --inline-size: 50rem; + } } diff --git a/resources/sass/layout/_main.scss b/resources/sass/layout/_main.scss index e0c0b124f..7ffc09c5d 100644 --- a/resources/sass/layout/_main.scss +++ b/resources/sass/layout/_main.scss @@ -1,35 +1,35 @@ @use 'sprucecss/scss/spruce' as *; .l-main { - display: flex; - position: relative; + display: flex; + position: relative; - &__sidebar { - background-color: color('background'); - display: none; - inline-size: get-css-variable(--sidebar-inline-size); - inset-block: 0; - inset-inline: 0 auto; - position: fixed; - z-index: 20; + &__sidebar { + background-color: color('background'); + display: none; + inline-size: get-css-variable(--sidebar-inline-size); + inset-block: 0; + inset-inline: 0 auto; + position: fixed; + z-index: 20; - @include breakpoint('md') { - display: block; - } + @include breakpoint('md') { + display: block; + } - &--open { - display: block; - } + &--open { + display: block; } + } - &__body { - background-color: color('background', 'main'); - inline-size: 100%; - min-block-size: 100lvh; + &__body { + background-color: color('background', 'main'); + inline-size: 100%; + min-block-size: calc(100lvh + 1rem); - @include breakpoint('md') { - inline-size: calc(100% - #{get-css-variable(--sidebar-inline-size)}); - margin-inline-start: get-css-variable(--sidebar-inline-size); - } + @include breakpoint('md') { + inline-size: calc(100% - #{get-css-variable(--sidebar-inline-size)}); + margin-inline-start: get-css-variable(--sidebar-inline-size); } + } } diff --git a/resources/sass/layout/_row.scss b/resources/sass/layout/_row.scss index a26675ba1..7b09d46a3 100644 --- a/resources/sass/layout/_row.scss +++ b/resources/sass/layout/_row.scss @@ -1,30 +1,34 @@ @use 'sprucecss/scss/spruce' as *; .l-row { - align-items: start; - display: grid; - gap: spacer('m'); - grid-template-columns: minmax(0, 1fr); + align-items: start; + display: grid; + gap: spacer('m'); + grid-template-columns: minmax(0, 1fr); - @each $name, $breakpoint in $breakpoints { - @for $i from 1 through 4 { - @include breakpoint($name) { - &--column\:#{$name}\:#{$i} { - grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); - } - } - } - } + &--stretch { + align-items: stretch; + } - &--sidebar { - @include breakpoint('lg') { - grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); + @each $name, $breakpoint in $breakpoints { + @for $i from 1 through 4 { + @include breakpoint($name) { + &--column\:#{$name}\:#{$i} { + grid-template-columns: repeat(#{$i}, minmax(0, 1fr)); } + } } + } - &__column { - display: grid; - gap: spacer('m'); - grid-template-columns: minmax(0, 1fr); + &--sidebar { + @include breakpoint('lg') { + grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); } + } + + &__column { + display: grid; + gap: spacer('m'); + grid-template-columns: minmax(0, 1fr); + } } diff --git a/resources/sass/section/_actions.scss b/resources/sass/section/_actions.scss index 7d914dccf..848b5e94d 100644 --- a/resources/sass/section/_actions.scss +++ b/resources/sass/section/_actions.scss @@ -1,18 +1,18 @@ @use 'sprucecss/scss/spruce' as *; .app-actions { - justify-content: space-between; + justify-content: space-between; - &--sidebar { - @include breakpoint('lg') { - margin-inline-end: calc(20rem + #{spacer('m')}); - } + &--sidebar { + @include breakpoint('lg') { + margin-inline-end: calc(20rem + #{spacer('m')}); } + } - &, - &__column { - display: flex; - flex-wrap: wrap; - gap: spacer('m'); - } + &, + &__column { + display: flex; + flex-wrap: wrap; + gap: spacer('m'); + } } diff --git a/resources/sass/section/_body.scss b/resources/sass/section/_body.scss index d7d6327bb..17f324c04 100644 --- a/resources/sass/section/_body.scss +++ b/resources/sass/section/_body.scss @@ -1,7 +1,7 @@ @use 'sprucecss/scss/spruce' as *; .app-body { - display: flex; - flex-direction: column; - gap: spacer('m'); + display: flex; + flex-direction: column; + gap: spacer('m'); } diff --git a/resources/sass/section/_footer.scss b/resources/sass/section/_footer.scss index 7f84a7016..7324a2013 100644 --- a/resources/sass/section/_footer.scss +++ b/resources/sass/section/_footer.scss @@ -1,10 +1,10 @@ @use 'sprucecss/scss/spruce' as *; .app-footer { - padding-block: spacer-clamp('m', 'l'); - text-align: center; + padding-block: spacer-clamp('m', 'l'); + text-align: center; - &__created-with { - margin-block: 0; - } + &__created-with { + margin-block: 0; + } } diff --git a/resources/sass/section/_header.scss b/resources/sass/section/_header.scss index 24b0ea865..42740b236 100644 --- a/resources/sass/section/_header.scss +++ b/resources/sass/section/_header.scss @@ -1,56 +1,56 @@ @use 'sprucecss/scss/spruce' as *; .app-header { - backdrop-filter: saturate(180%) blur(.25rem); - background-color: color('background', 'header'); - border-block-end: 1px solid color('border'); - inset-block-start: 0; - inset-block-start: 0; - position: sticky; - position: sticky; - z-index: 15; - - &__inner { - align-items: center; - block-size: get-css-variable(--header-block-size); - display: flex; - flex-wrap: wrap; - gap: spacer-clamp('s', 'l'); - justify-content: space-between; - margin-inline: get-css-variable(--container-gap); + backdrop-filter: saturate(180%) blur(.25rem); + background-color: color('background', 'header'); + border-block-end: 1px solid color('border'); + inset-block-start: 0; + inset-block-start: 0; + position: sticky; + position: sticky; + z-index: 15; + + &__inner { + align-items: center; + block-size: get-css-variable(--header-block-size); + display: flex; + flex-wrap: wrap; + gap: spacer-clamp('s', 'l'); + justify-content: space-between; + margin-inline: get-css-variable(--container-gap); + } + + &__column { + align-items: center; + display: flex; + flex-grow: 1; + gap: spacer-clamp('s', 'm'); + } + + &__actions { + align-items: center; + display: flex; + gap: spacer-clamp('s', 'm'); + + &--secondary { + gap: spacer('s'); } + } - &__column { - align-items: center; - display: flex; - flex-grow: 1; - gap: spacer-clamp('s', 'm'); - } - - &__actions { - align-items: center; - display: flex; - gap: spacer-clamp('s', 'm'); - - &--secondary { - gap: spacer('s'); - } - } - - &__logo { - block-size: 1.25rem; - display: inline-flex; + &__logo { + block-size: 1.25rem; + display: inline-flex; - @include breakpoint('md') { - display: none; - } + @include breakpoint('md') { + display: none; } + } - &__breadcrumb { - display: none; + &__breadcrumb { + display: none; - @include breakpoint('md') { - display: flex; - } + @include breakpoint('md') { + display: flex; } + } } diff --git a/resources/sass/section/_heading.scss b/resources/sass/section/_heading.scss index 905f33e93..eeee75b53 100644 --- a/resources/sass/section/_heading.scss +++ b/resources/sass/section/_heading.scss @@ -1,41 +1,41 @@ @use 'sprucecss/scss/spruce' as *; .app-heading { - padding-block: spacer-clamp('m', 'l'); + padding-block: spacer-clamp('m', 'l'); - &__inner { - display: flex; - flex-wrap: wrap; - gap: spacer('s') spacer('m'); - justify-content: space-between; + &__inner { + display: flex; + flex-wrap: wrap; + gap: spacer('s') spacer('m'); + justify-content: space-between; - &--column { - flex-direction: column; - } + &--column { + flex-direction: column; } + } - &__caption { - @include layout-stack('xs'); - } + &__caption { + @include layout-stack('xs'); + } - &__title { - font-weight: 700; - } + &__title { + font-weight: 700; + } - &__description { - @include layout-stack('xxs'); - align-items: center; - display: flex; - flex-wrap: wrap; - font-size: 1rem; - gap: spacer('xs') spacer('m'); - } + &__description { + @include layout-stack('xxs'); + align-items: center; + display: flex; + flex-wrap: wrap; + font-size: 1rem; + gap: spacer('xs') spacer('m'); + } - &__actions { - align-items: center; - display: flex; - flex-wrap: wrap; - gap: spacer('xs')spacer('s'); - justify-content: end; - } + &__actions { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: spacer('xs')spacer('s'); + justify-content: end; + } } diff --git a/resources/sass/section/_sidebar.scss b/resources/sass/section/_sidebar.scss index 3164ce24e..a8f7ed33c 100644 --- a/resources/sass/section/_sidebar.scss +++ b/resources/sass/section/_sidebar.scss @@ -1,49 +1,49 @@ @use 'sprucecss/scss/spruce' as *; .app-sidebar { - block-size: 100%; - border-inline-end: 1px solid color('border'); - display: flex; - flex-direction: column; - gap: spacer('m'); - padding-block: 0 spacer('m'); + block-size: 100%; + border-inline-end: 1px solid color('border'); + display: flex; + flex-direction: column; + gap: spacer('m'); + padding-block: 0 spacer('m'); - &__logo { - block-size: 1.25rem; - display: inline-flex; - } + &__logo { + block-size: 1.25rem; + display: inline-flex; + } - &__search { - display: none; + &__search { + display: none; - @include breakpoint('md') { - display: flex; - } + @include breakpoint('md') { + display: flex; } + } - &__header { - align-items: center; - block-size: get-css-variable(--header-block-size); - border-block-end: 1px solid color('border'); - display: flex; - flex-shrink: 0; - justify-content: space-between; - margin-inline: spacer('m'); - } + &__header { + align-items: center; + block-size: get-css-variable(--header-block-size); + border-block-end: 1px solid color('border'); + display: flex; + flex-shrink: 0; + justify-content: space-between; + margin-inline: spacer('m'); + } - &__body { - @include scrollbar( - $border-radius: 0.15em - ); - flex-grow: 1; - margin-inline: calc(#{spacer('m')} / 2); - overflow-y: auto; - padding-inline: calc(#{spacer('m')} / 2); + &__body { + @include scrollbar( + $border-radius: 0.15em + ); + flex-grow: 1; + margin-inline: calc(#{spacer('m')} / 2); + overflow-y: auto; + padding-inline: calc(#{spacer('m')} / 2); - > * + * { - border-block-start: 1px solid color('border'); - margin-block-start: spacer('s'); - padding-block-start: spacer('s'); - } + > * + * { + border-block-start: 1px solid color('border'); + margin-block-start: spacer('s'); + padding-block-start: spacer('s'); } + } } diff --git a/resources/views/components/layout/notifications.blade.php b/resources/views/components/layout/notifications.blade.php index 055dd7811..a7cf1c704 100644 --- a/resources/views/components/layout/notifications.blade.php +++ b/resources/views/components/layout/notifications.blade.php @@ -10,7 +10,7 @@ class="btn btn--light btn--icon btn--counter app-notification__toggle" -
+

{{ __('Notifications') }}

+ diff --git a/resources/views/table/column.blade.php b/resources/views/table/column.blade.php index b0d2fe381..24beeea1e 100644 --- a/resources/views/table/column.blade.php +++ b/resources/views/table/column.blade.php @@ -1,29 +1,30 @@ @if($sortable) -
- {{ $label }} - @if(Request::input($sortKey.'.by') !== $attribute || Request::input($sortKey.'.order', 'asc') === 'asc') - - @if(Request::input($sortKey.'.by') !== $attribute) - - @else - - @endif - - @else - - - - @endif -
+ @if(Request::input($sortKey.'.by') !== $attribute || Request::input($sortKey.'.order', 'asc') === 'asc') + + {{ $label }} + @if(Request::input($sortKey.'.by') !== $attribute) + + @else + + @endif + + @else + + {{ $label }} + + + @endif @else {{ $label }} @endif diff --git a/yarn.lock b/yarn.lock index 8d454c559..2ca5bd8b4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2052,10 +2052,10 @@ spdx-license-ids@^3.0.0: resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.15.tgz#142460aabaca062bc7cd4cc87b7d50725ed6a4ba" integrity sha512-lpT8hSQp9jAKp9mhtBU4Xjon8LPGBvLIuBiSVhMEtmLecTh2mO0tlqrAMp47tBXzMr13NJMQ2lf7RpQGLJ3HsQ== -sprucecss@^2.2.1: - version "2.2.2" - resolved "https://registry.yarnpkg.com/sprucecss/-/sprucecss-2.2.2.tgz#a44c3a4d14523a8eba2ed6766194a4e1577c4c9e" - integrity sha512-qzQxDPk3WKMFbvEIoA79guWiO7YeQz4g+7zv/NUACOg4fmebzChULZTdwt1u2ThLo5DKSIDfIWyHBsjN7JU/qg== +sprucecss@^2.3.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/sprucecss/-/sprucecss-2.3.1.tgz#21c044f2a19f4c871fb550d786cd2c72e8944cd3" + integrity sha512-Hz7vHYLpo/doApgIK4fy+CI+Acc830ZmFbpq9sXFrGp2nPP0hrb6YPqv6drN1PgIOZWZ6SrkItLUvKC702XLmg== string-width@^4.2.3: version "4.2.3"