@studiolxd/brand 38.15.0 → 38.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +53 -0
- package/dist/_shared/tokens.js +2 -0
- package/dist/_types/molecules/Alert/Alert.d.ts +14 -0
- package/dist/alert.css +1 -1
- package/dist/alert.js +36 -24
- package/dist/brand.css +3 -1
- package/dist/dialogsurface.css +1 -1
- package/dist/filter-bar.css +1 -1
- package/dist/modal.css +1 -1
- package/dist/sheet.css +1 -1
- package/dist/toaster.css +1 -1
- package/dist/tokens.css +3 -1
- package/package.json +1 -1
- package/src/tokens/molecules/alert.css +2 -0
- package/src/tokens/scss/molecules/_alert.scss +2 -0
- package/src/tokens/tokens.json +2 -0
package/dist/dialogsurface.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes dialog-overlay-in{0%{opacity:0}to{opacity:var(--dialog-overlay-opacity)}}@keyframes dialog-overlay-out{0%{opacity:var(--dialog-overlay-opacity)}to{opacity:0}}.dialog-overlay{z-index:var(--dialog-overlay-z-index);background-color:var(--dialog-overlay-bg);opacity:var(--dialog-overlay-opacity);position:fixed;inset:0}.dialog-overlay[data-open]{animation:dialog-overlay-in var(--dialog-transition-duration) var(--dialog-transition-easing) forwards}.dialog-overlay[data-closed]{animation:dialog-overlay-out var(--dialog-transition-duration) var(--dialog-transition-easing) forwards}.dialog-header{gap:var(--dialog-header-gap);display:flex}.dialog-header--inline{justify-content:space-between;align-items:flex-start;margin-block-end:var(--dialog-header-gap)}.dialog-header--inline.dialog-header--no-title{justify-content:flex-end}.dialog-header--stacked{flex-direction:column;padding-inline-end:var(--dialog-header-close-room)}.dialog-footer{gap:var(--dialog-footer-gap);flex-direction:column-reverse;display:flex}.dialog-footer>*{inline-size:100%}@
|
|
1
|
+
@keyframes dialog-overlay-in{0%{opacity:0}to{opacity:var(--dialog-overlay-opacity)}}@keyframes dialog-overlay-out{0%{opacity:var(--dialog-overlay-opacity)}to{opacity:0}}.dialog-overlay{z-index:var(--dialog-overlay-z-index);background-color:var(--dialog-overlay-bg);opacity:var(--dialog-overlay-opacity);position:fixed;inset:0}.dialog-overlay[data-open]{animation:dialog-overlay-in var(--dialog-transition-duration) var(--dialog-transition-easing) forwards}.dialog-overlay[data-closed]{animation:dialog-overlay-out var(--dialog-transition-duration) var(--dialog-transition-easing) forwards}.dialog-header{gap:var(--dialog-header-gap);display:flex}.dialog-header--inline{justify-content:space-between;align-items:flex-start;margin-block-end:var(--dialog-header-gap)}.dialog-header--inline.dialog-header--no-title{justify-content:flex-end}.dialog-header--stacked{flex-direction:column;padding-inline-end:var(--dialog-header-close-room)}.dialog-footer{gap:var(--dialog-footer-gap);flex-direction:column-reverse;display:flex}.dialog-footer>*{inline-size:100%}@container dialog (width>=480px){.dialog-footer{flex-direction:row;justify-content:flex-end}.dialog-footer>*{inline-size:auto}}
|
package/dist/filter-bar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.filter-bar{gap:var(--filter-bar-gap);flex-direction:column;display:flex}.filter-bar__search{inline-size:100%}.filter-bar__row{
|
|
1
|
+
.filter-bar{gap:var(--filter-bar-gap);flex-direction:column;display:flex}.filter-bar__search{inline-size:100%}.filter-bar__row{grid-template-columns:repeat(auto-fill, minmax(min(var(--filter-bar-column-min-inline-size), 100%), 1fr));column-gap:var(--filter-bar-column-gap);row-gap:var(--filter-bar-row-gap);display:grid}.filter-bar__filters{display:contents}.filter-bar__filter{min-inline-size:0}.filter-bar__actions{align-self:end;align-items:stretch;gap:var(--filter-bar-actions-gap);flex-direction:column;min-inline-size:0;display:flex}.filter-bar__actions>*{inline-size:100%}@media (width>=768px){.filter-bar__actions{flex-flow:wrap;align-items:center}.filter-bar__actions>*{inline-size:auto}}
|
package/dist/modal.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes modal-content-in{0%{opacity:0;transform:translate(-50%, calc(-50% - var(--modal-content-enter-offset)))}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modal-content-out{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%, calc(-50% - var(--modal-content-enter-offset)))}}.modal__overlay{--dialog-overlay-bg:var(--modal-backdrop-bg);--dialog-overlay-opacity:var(--modal-backdrop-opacity);--dialog-overlay-z-index:var(--modal-backdrop-z-index);--dialog-transition-duration:var(--modal-transition-duration);--dialog-transition-easing:var(--modal-transition-easing)}.modal__content{z-index:var(--modal-z-index);width:90vw;max-width:var(--modal-width-max);max-height:var(--modal-max-height);background-color:var(--modal-bg);border:var(--modal-border-width) solid var(--modal-border-color);border-radius:var(--modal-border-radius);box-shadow:var(--modal-shadow);padding-block:var(--modal-padding-block);padding-inline:var(--modal-padding-inline);flex-direction:column;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.modal__content[data-open]{animation:modal-content-in var(--modal-transition-duration) var(--modal-transition-easing) forwards}.modal__content[data-closed]{animation:modal-content-out var(--modal-transition-duration) var(--modal-transition-easing) forwards}.modal__header{--dialog-header-gap:var(--modal-header-gap)}.modal__title{font-size:var(--modal-title-font-size);font-weight:var(--modal-title-font-weight);color:var(--modal-title-color);line-height:var(--modal-title-line-height);flex:1;margin:0}.modal__close.close-button{--close-button-size:var(--modal-close-size);--close-button-icon-size:var(--modal-close-icon-size);--close-button-color:var(--modal-close-color);--close-button-focus-ring-width:var(--modal-close-focus-ring-width);--close-button-focus-ring-offset:var(--modal-close-focus-ring-offset);--close-button-focus-ring-color:var(--modal-close-focus-ring-color)}.modal__header:not(.modal__header--no-title) .modal__close.close-button{margin-block-start:calc((var(--modal-title-font-size) * var(--modal-title-line-height) - var(--modal-close-size)) / 2)}.modal__description{font-size:var(--modal-description-font-size);color:var(--modal-description-color);margin-block-start:0;margin-block-end:var(--modal-description-margin-block-end)}.modal__body{flex:1;min-height:0;overflow-y:auto}.modal__footer{--dialog-footer-gap:var(--modal-footer-gap);margin-block-start:var(--modal-footer-margin-block-start)}
|
|
1
|
+
@keyframes modal-content-in{0%{opacity:0;transform:translate(-50%, calc(-50% - var(--modal-content-enter-offset)))}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes modal-content-out{0%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%, calc(-50% - var(--modal-content-enter-offset)))}}.modal__overlay{--dialog-overlay-bg:var(--modal-backdrop-bg);--dialog-overlay-opacity:var(--modal-backdrop-opacity);--dialog-overlay-z-index:var(--modal-backdrop-z-index);--dialog-transition-duration:var(--modal-transition-duration);--dialog-transition-easing:var(--modal-transition-easing)}.modal__content{z-index:var(--modal-z-index);width:90vw;max-width:var(--modal-width-max);max-height:var(--modal-max-height);background-color:var(--modal-bg);border:var(--modal-border-width) solid var(--modal-border-color);border-radius:var(--modal-border-radius);box-shadow:var(--modal-shadow);padding-block:var(--modal-padding-block);padding-inline:var(--modal-padding-inline);flex-direction:column;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);container:dialog/inline-size}.modal__content[data-open]{animation:modal-content-in var(--modal-transition-duration) var(--modal-transition-easing) forwards}.modal__content[data-closed]{animation:modal-content-out var(--modal-transition-duration) var(--modal-transition-easing) forwards}.modal__header{--dialog-header-gap:var(--modal-header-gap)}.modal__title{font-size:var(--modal-title-font-size);font-weight:var(--modal-title-font-weight);color:var(--modal-title-color);line-height:var(--modal-title-line-height);flex:1;margin:0}.modal__close.close-button{--close-button-size:var(--modal-close-size);--close-button-icon-size:var(--modal-close-icon-size);--close-button-color:var(--modal-close-color);--close-button-focus-ring-width:var(--modal-close-focus-ring-width);--close-button-focus-ring-offset:var(--modal-close-focus-ring-offset);--close-button-focus-ring-color:var(--modal-close-focus-ring-color)}.modal__header:not(.modal__header--no-title) .modal__close.close-button{margin-block-start:calc((var(--modal-title-font-size) * var(--modal-title-line-height) - var(--modal-close-size)) / 2)}.modal__description{font-size:var(--modal-description-font-size);color:var(--modal-description-color);margin-block-start:0;margin-block-end:var(--modal-description-margin-block-end)}.modal__body{flex:1;min-height:0;overflow-y:auto}.modal__footer{--dialog-footer-gap:var(--modal-footer-gap);margin-block-start:var(--modal-footer-margin-block-start)}
|
package/dist/sheet.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sheet__overlay{--dialog-overlay-bg:var(--sheet-backdrop-bg);--dialog-overlay-opacity:var(--sheet-backdrop-opacity);--dialog-overlay-z-index:var(--sheet-backdrop-z-index);--dialog-transition-duration:var(--sheet-transition-duration);--dialog-transition-easing:var(--sheet-transition-easing)}.sheet{z-index:var(--sheet-z-index);gap:var(--sheet-gap);padding-block:var(--sheet-padding-block);padding-inline:var(--sheet-padding-inline);background-color:var(--sheet-bg);box-shadow:var(--sheet-shadow);animation-duration:var(--sheet-transition-duration);animation-timing-function:var(--sheet-transition-easing);flex-direction:column;animation-fill-mode:forwards;display:flex;position:fixed;overflow-y:auto}.sheet[data-side=left],.sheet[data-side=right]{width:var(--sheet-inline-size);top:0;bottom:0}.sheet[data-side=left]{left:0}.sheet[data-side=right]{right:0}.sheet[data-side=top],.sheet[data-side=bottom]{max-height:var(--sheet-block-size);left:0;right:0}.sheet[data-side=top]{top:0}.sheet[data-side=bottom]{bottom:0}@keyframes sheet-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sheet-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes sheet-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes sheet-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes sheet-in-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes sheet-out-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes sheet-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sheet-out-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.sheet[data-side=right][data-open]{animation-name:sheet-in-right}.sheet[data-side=right][data-closed]{animation-name:sheet-out-right}.sheet[data-side=left][data-open]{animation-name:sheet-in-left}.sheet[data-side=left][data-closed]{animation-name:sheet-out-left}.sheet[data-side=top][data-open]{animation-name:sheet-in-top}.sheet[data-side=top][data-closed]{animation-name:sheet-out-top}.sheet[data-side=bottom][data-open]{animation-name:sheet-in-bottom}.sheet[data-side=bottom][data-closed]{animation-name:sheet-out-bottom}.sheet__header{--dialog-header-gap:var(--sheet-header-gap);--dialog-header-close-room:var(--sheet-padding-inline)}.sheet__title{color:var(--sheet-title-color);font-size:var(--sheet-title-font-size);font-weight:var(--sheet-title-font-weight);margin:0}.sheet__description{font-size:var(--sheet-description-font-size);color:var(--sheet-description-color);margin:0}.sheet__close.close-button{--close-button-size:var(--sheet-close-size);--close-button-icon-size:var(--sheet-close-icon-size);--close-button-color:var(--sheet-close-color);--close-button-focus-ring-width:var(--sheet-close-focus-ring-width);--close-button-focus-ring-offset:var(--sheet-close-focus-ring-offset);--close-button-focus-ring-color:var(--sheet-close-focus-ring-color);position:absolute;inset-block-start:var(--sheet-close-inset);inset-inline-end:var(--sheet-close-inset)}.sheet__body{flex:1;min-height:0}.sheet__footer{--dialog-footer-gap:var(--sheet-footer-gap)}
|
|
1
|
+
.sheet__overlay{--dialog-overlay-bg:var(--sheet-backdrop-bg);--dialog-overlay-opacity:var(--sheet-backdrop-opacity);--dialog-overlay-z-index:var(--sheet-backdrop-z-index);--dialog-transition-duration:var(--sheet-transition-duration);--dialog-transition-easing:var(--sheet-transition-easing)}.sheet{z-index:var(--sheet-z-index);gap:var(--sheet-gap);padding-block:var(--sheet-padding-block);padding-inline:var(--sheet-padding-inline);background-color:var(--sheet-bg);box-shadow:var(--sheet-shadow);animation-duration:var(--sheet-transition-duration);animation-timing-function:var(--sheet-transition-easing);flex-direction:column;animation-fill-mode:forwards;display:flex;position:fixed;overflow-y:auto;container:dialog/inline-size}.sheet[data-side=left],.sheet[data-side=right]{width:var(--sheet-inline-size);top:0;bottom:0}.sheet[data-side=left]{left:0}.sheet[data-side=right]{right:0}.sheet[data-side=top],.sheet[data-side=bottom]{max-height:var(--sheet-block-size);left:0;right:0}.sheet[data-side=top]{top:0}.sheet[data-side=bottom]{bottom:0}@keyframes sheet-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sheet-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes sheet-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes sheet-out-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes sheet-in-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes sheet-out-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes sheet-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sheet-out-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.sheet[data-side=right][data-open]{animation-name:sheet-in-right}.sheet[data-side=right][data-closed]{animation-name:sheet-out-right}.sheet[data-side=left][data-open]{animation-name:sheet-in-left}.sheet[data-side=left][data-closed]{animation-name:sheet-out-left}.sheet[data-side=top][data-open]{animation-name:sheet-in-top}.sheet[data-side=top][data-closed]{animation-name:sheet-out-top}.sheet[data-side=bottom][data-open]{animation-name:sheet-in-bottom}.sheet[data-side=bottom][data-closed]{animation-name:sheet-out-bottom}.sheet__header{--dialog-header-gap:var(--sheet-header-gap);--dialog-header-close-room:var(--sheet-padding-inline)}.sheet__title{color:var(--sheet-title-color);font-size:var(--sheet-title-font-size);font-weight:var(--sheet-title-font-weight);margin:0}.sheet__description{font-size:var(--sheet-description-font-size);color:var(--sheet-description-color);margin:0}.sheet__close.close-button{--close-button-size:var(--sheet-close-size);--close-button-icon-size:var(--sheet-close-icon-size);--close-button-color:var(--sheet-close-color);--close-button-focus-ring-width:var(--sheet-close-focus-ring-width);--close-button-focus-ring-offset:var(--sheet-close-focus-ring-offset);--close-button-focus-ring-color:var(--sheet-close-focus-ring-color);position:absolute;inset-block-start:var(--sheet-close-inset);inset-inline-end:var(--sheet-close-inset)}.sheet__body{flex:1;min-height:0}.sheet__footer{--dialog-footer-gap:var(--sheet-footer-gap)}
|
package/dist/toaster.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--button-border-style:solid;--button-border-color:#0000;--button-justify-content:center;--button-cursor:pointer;--button-white-space:nowrap;--button-text-decoration:none;--button-disabled-cursor:not-allowed;--button-focus-ring-style:solid;--button-block-width:100%;--button-outline-bg:#0000;--button-text-border-width:0;--button-text-padding-inline:0;--button-text-bg:#0000;--button-text-border:#0000;--button-text-hover-bg:#0000;--button-text-hover-border:#0000;--button-text-active-bg:#0000;--button-text-active-border:#0000;--button-ghost-border-width:0;--button-ghost-bg:#0000;--button-ghost-border:#0000;--button-ghost-hover-border:#0000;--button-ghost-active-border:#0000;--button-font-family:var(--font-family-sans);--button-font-size:var(--font-size-2);--button-line-height:var(--line-height-none);--button-transition-duration:var(--motion-duration-fast);--button-transition-easing:var(--motion-easing-default);--button-height:var(--size-component-md);--button-sm-height:var(--size-component-sm);--button-lg-height:var(--size-component-lg);--button-padding-inline:var(--spacing-6);--button-focus-ring-offset:var(--spacing-1);--button-sm-padding-inline:var(--spacing-5);--button-sm-font-size:var(--font-size-1);--button-lg-padding-inline:var(--spacing-8);--button-lg-font-size:var(--font-size-3);--button-primary-border-style:var(--button-border-style);--button-primary-justify-content:var(--button-justify-content);--button-primary-cursor:var(--button-cursor);--button-primary-white-space:var(--button-white-space);--button-primary-text-decoration:var(--button-text-decoration);--button-primary-disabled-cursor:var(--button-disabled-cursor);--button-primary-disabled-color:var(--color-white);--button-primary-focus-ring-style:var(--button-focus-ring-style);--button-destructive-border-style:var(--button-border-style);--button-destructive-justify-content:var(--button-justify-content);--button-destructive-cursor:var(--button-cursor);--button-destructive-white-space:var(--button-white-space);--button-destructive-text-decoration:var(--button-text-decoration);--button-destructive-disabled-cursor:var(--button-disabled-cursor);--button-destructive-focus-ring-style:var(--button-focus-ring-style);--button-destructive-bg:var(--color-white);--button-outline-border-style:var(--button-border-style);--button-outline-justify-content:var(--button-justify-content);--button-outline-cursor:var(--button-cursor);--button-outline-white-space:var(--button-white-space);--button-outline-text-decoration:var(--button-text-decoration);--button-outline-disabled-cursor:var(--button-disabled-cursor);--button-outline-focus-ring-style:var(--button-focus-ring-style);--button-text-border-style:var(--button-border-style);--button-text-justify-content:var(--button-justify-content);--button-text-cursor:var(--link-cursor);--button-text-white-space:var(--button-white-space);--button-text-hover-underline-width:var(--link-hover-underline-width);--button-text-ink-hover-underline-width:var(--link-ink-hover-underline-width);--button-text-disabled-cursor:var(--button-disabled-cursor);--button-text-focus-ring-style:var(--button-focus-ring-style);--button-ghost-border-style:var(--button-border-style);--button-ghost-justify-content:var(--button-justify-content);--button-ghost-cursor:var(--button-cursor);--button-ghost-white-space:var(--button-white-space);--button-ghost-text-decoration:var(--button-text-decoration);--button-ghost-disabled-cursor:var(--button-disabled-cursor);--button-ghost-focus-ring-style:var(--button-focus-ring-style);--button-border-radius:var(--border-radius-default);--button-border-width:var(--border-width-default);--button-font-weight:var(--font-weight-default);--button-disabled-bg:var(--color-disabled-bg-on-light);--button-disabled-color:var(--color-disabled-text-on-light);--button-disabled-border:var(--color-disabled-text-on-light);--button-focus-ring-width:var(--border-width-focus);--button-primary-font-family:var(--button-font-family);--button-primary-font-size:var(--button-font-size);--button-primary-line-height:var(--button-line-height);--button-primary-transition-duration:var(--button-transition-duration);--button-primary-transition-easing:var(--button-transition-easing);--button-primary-padding-inline:var(--button-padding-inline);--button-primary-focus-ring-offset:var(--button-focus-ring-offset);--button-primary-focus-ring-color:var(--color-primary);--button-primary-bg:var(--color-accent-1);--button-primary-color:var(--color-primary);--button-primary-border:var(--color-accent-1);--button-primary-hover-bg:var(--color-accent-2);--button-primary-hover-color:var(--color-primary);--button-primary-hover-border:var(--color-accent-2);--button-primary-active-bg:var(--color-accent-2);--button-primary-active-color:var(--color-primary);--button-primary-active-border:var(--color-accent-2);--button-destructive-font-family:var(--button-font-family);--button-destructive-font-size:var(--button-font-size);--button-destructive-line-height:var(--button-line-height);--button-destructive-transition-duration:var(--button-transition-duration);--button-destructive-transition-easing:var(--button-transition-easing);--button-destructive-padding-inline:var(--button-padding-inline);--button-destructive-focus-ring-offset:var(--button-focus-ring-offset);--button-destructive-focus-ring-color:var(--color-destructive-text-on-light);--button-destructive-color:var(--color-destructive-text-on-light);--button-destructive-border:var(--color-destructive-text-on-light);--button-destructive-hover-bg:var(--color-destructive-fill);--button-destructive-hover-color:var(--color-destructive-fill-text);--button-destructive-hover-border:var(--color-destructive-fill);--button-destructive-active-bg:var(--color-destructive-fill);--button-destructive-active-color:var(--color-destructive-fill-text);--button-destructive-active-border:var(--color-destructive-fill);--button-outline-font-family:var(--button-font-family);--button-outline-font-size:var(--button-font-size);--button-outline-line-height:var(--button-line-height);--button-outline-transition-duration:var(--button-transition-duration);--button-outline-transition-easing:var(--button-transition-easing);--button-outline-disabled-color:var(--color-disabled-border-on-light);--button-outline-disabled-border:var(--color-disabled-border-on-light);--button-outline-padding-inline:var(--button-padding-inline);--button-outline-focus-ring-offset:var(--button-focus-ring-offset);--button-outline-focus-ring-color:var(--color-text-on-light);--button-outline-color:var(--color-text-on-light);--button-outline-border:var(--color-text-on-light);--button-outline-hover-bg:var(--color-text-on-light);--button-outline-hover-color:var(--color-text-on-dark);--button-outline-hover-border:var(--color-text-on-light);--button-outline-active-bg:var(--color-text-on-light);--button-outline-active-color:var(--color-text-on-dark);--button-outline-active-border:var(--color-text-on-light);--button-text-font-family:var(--button-font-family);--button-text-font-size:var(--button-font-size);--button-text-line-height:var(--button-line-height);--button-text-underline-offset:var(--link-underline-offset);--button-text-transition-duration:var(--button-transition-duration);--button-text-transition-easing:var(--button-transition-easing);--button-ghost-font-family:var(--button-font-family);--button-ghost-font-size:var(--button-font-size);--button-ghost-line-height:var(--button-line-height);--button-ghost-transition-duration:var(--button-transition-duration);--button-ghost-transition-easing:var(--button-transition-easing);--button-ghost-padding-inline:var(--button-padding-inline);--button-ghost-focus-ring-offset:var(--button-focus-ring-offset);--button-ghost-focus-ring-color:var(--color-primary);--button-ghost-color:var(--color-text-on-light);--button-ghost-hover-bg:var(--color-primary);--button-ghost-hover-color:var(--color-text-on-dark);--button-ghost-active-bg:var(--color-primary);--button-ghost-active-color:var(--color-text-on-dark);--button-primary-border-radius:var(--button-border-radius);--button-primary-border-width:var(--button-border-width);--button-primary-font-weight:var(--button-font-weight);--button-primary-disabled-bg:var(--button-disabled-border);--button-primary-disabled-border:var(--button-disabled-border);--button-primary-focus-ring-width:var(--button-focus-ring-width);--button-destructive-border-radius:var(--button-border-radius);--button-destructive-border-width:var(--button-border-width);--button-destructive-font-weight:var(--button-font-weight);--button-destructive-disabled-color:var(--button-disabled-color);--button-destructive-disabled-border:var(--button-disabled-border);--button-destructive-focus-ring-width:var(--button-focus-ring-width);--button-outline-border-radius:var(--button-border-radius);--button-outline-border-width:var(--button-border-width);--button-outline-font-weight:var(--button-font-weight);--button-outline-focus-ring-width:var(--button-focus-ring-width);--button-text-border-radius:var(--button-border-radius);--button-text-font-weight:var(--button-font-weight);--button-text-underline-width:var(--link-underline-width);--button-text-ink-color:var(--link-ink-color);--button-text-ink-underline-width:var(--link-ink-underline-width);--button-text-disabled-color:var(--button-disabled-color);--button-text-focus-ring-width:var(--button-focus-ring-width);--button-text-focus-ring-offset:var(--link-focus-ring-offset);--button-text-focus-ring-color:var(--link-focus-ring-color);--button-text-color:var(--link-color);--button-text-hover-color:var(--link-hover-color);--button-text-active-color:var(--link-hover-color);--button-ghost-border-radius:var(--button-border-radius);--button-ghost-font-weight:var(--button-font-weight);--button-ghost-disabled-color:var(--button-disabled-color);--button-ghost-focus-ring-width:var(--button-focus-ring-width)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--button-outline-hover-bg:var(--color-white);--button-outline-hover-border:var(--color-white);--button-outline-active-bg:var(--color-white);--button-outline-active-border:var(--color-white);--button-outline-focus-ring-color:var(--color-white);--button-text-underline-width:var(--link-underline-width);--button-primary-focus-ring-color:var(--color-text-on-dark);--button-destructive-color:var(--color-destructive-text-on-dark);--button-destructive-border:var(--color-destructive-text-on-dark);--button-destructive-hover-bg:var(--color-destructive-fill);--button-destructive-hover-color:var(--color-destructive-fill-text);--button-destructive-hover-border:var(--color-destructive-fill);--button-destructive-active-bg:var(--color-destructive-fill);--button-destructive-active-color:var(--color-destructive-fill-text);--button-destructive-active-border:var(--color-destructive-fill);--button-destructive-focus-ring-color:var(--color-destructive-text-on-dark);--button-outline-color:var(--color-text-on-dark);--button-outline-border:var(--color-text-on-dark);--button-outline-hover-color:var(--color-text-on-light);--button-outline-active-color:var(--color-text-on-light);--button-text-disabled-color:var(--color-text-muted-on-dark);--button-ghost-color:var(--color-text-on-dark);--button-ghost-hover-color:var(--color-primary);--button-ghost-active-color:var(--color-primary);--button-ghost-focus-ring-color:var(--color-text-on-dark);--button-ghost-hover-bg:var(--color-text-on-dark);--button-ghost-active-bg:var(--color-text-on-dark);--button-ghost-disabled-color:var(--color-text-muted-on-dark);--button-text-hover-underline-width:var(--link-hover-underline-width);--button-text-color:var(--link-color);--button-text-hover-color:var(--link-hover-color);--button-text-ink-color:var(--link-ink-color);--button-text-active-color:var(--link-hover-color);--button-text-focus-ring-color:var(--link-focus-ring-color)}:root{--alert-padding-block:var(--spacing-4);--alert-padding-inline:var(--spacing-5);--alert-gap:var(--spacing-3);--alert-content-gap:var(--spacing-2);--alert-title-line-height:var(--line-height-snug);--alert-close-size:var(--size-component-sm);--alert-close-inset:var(--spacing-2);--alert-border-radius:var(--border-radius-default);--alert-border-width:var(--border-width-default);--alert-bg:var(--color-primary);--alert-border-color:var(--color-text-on-dark);--alert-title-font-size:var(--text-font-size);--alert-title-font-weight:var(--font-weight-emphasis);--alert-title-color:var(--color-text-on-dark);--alert-description-font-size:var(--text-font-size);--alert-description-line-height:var(--text-line-height);--alert-description-color:var(--color-text-on-dark);--alert-success-bg:var(--color-success-fill);--alert-success-border-color:var(--color-success-fill);--alert-success-title-color:var(--color-success-fill-text);--alert-success-description-color:var(--color-success-fill-text);--alert-error-bg:var(--color-error-fill);--alert-error-border-color:var(--color-error-fill);--alert-error-title-color:var(--color-error-fill-text);--alert-error-description-color:var(--color-error-fill-text);--alert-warning-bg:var(--color-warning-fill);--alert-warning-border-color:var(--color-warning-fill);--alert-warning-title-color:var(--color-warning-fill-text);--alert-warning-description-color:var(--color-warning-fill-text);--alert-warning-close-color:var(--color-warning-fill-text)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--alert-bg:var(--color-text-on-dark);--alert-border-color:var(--color-text-on-dark);--alert-title-color:var(--color-primary);--alert-description-color:var(--color-primary)}:root{--toast-max-width:360px;--toast-stack-scale:.05;--toast-enter-scale:.97;--toast-z-index:var(--z-index-toast);--toast-inset-block:var(--spacing-5);--toast-inset-inline:var(--spacing-5);--toast-gap:var(--spacing-2);--toast-stack-offset:var(--spacing-3);--toast-duration-in:var(--motion-duration-base);--toast-duration-out:var(--motion-duration-base);--toast-easing:var(--motion-easing-out)}.alert{background-color:var(--alert-bg);border:var(--alert-border-width) solid var(--alert-border-color);border-radius:var(--alert-border-radius);padding-block:var(--alert-padding-block);padding-inline:var(--alert-padding-inline);align-items:flex-start;gap:var(--alert-gap);box-sizing:border-box;--alert-title-ink:var(--alert-title-color);--alert-description-ink:var(--alert-description-color);display:flex;position:relative}.alert.alert--dismissible{padding-inline-end:calc(var(--alert-close-inset) * 2 + var(--alert-close-size))}.alert__content{flex:1;min-width:0}.alert__title{font-size:var(--alert-title-font-size);font-weight:var(--alert-title-font-weight);color:var(--alert-title-ink);line-height:var(--alert-title-line-height);margin:0}.alert__description{font-size:var(--alert-description-font-size);color:var(--alert-description-ink);line-height:var(--alert-description-line-height);margin:0;align-items:start;gap:var(--alert-content-gap);flex-direction:column;margin-block-start:var(--alert-content-gap);display:flex}.alert .alert__close{--close-button-size:var(--alert-close-size);position:absolute;inset-block-start:var(--alert-close-inset);inset-inline-end:var(--alert-close-inset)}.alert.alert--success{--alert-bg:var(--alert-success-bg);--alert-border-color:var(--alert-success-border-color);--alert-title-color:var(--alert-success-title-color);--alert-description-color:var(--alert-success-description-color)}.alert.alert--error{--alert-bg:var(--alert-error-bg);--alert-border-color:var(--alert-error-border-color);--alert-title-color:var(--alert-error-title-color);--alert-description-color:var(--alert-error-description-color)}.alert.alert--warning{--alert-bg:var(--alert-warning-bg);--alert-border-color:var(--alert-warning-border-color);--alert-title-color:var(--alert-warning-title-color);--alert-description-color:var(--alert-warning-description-color);--close-button-color:var(--alert-warning-close-color);--close-button-focus-ring-color:var(--alert-warning-close-color)}.toaster{--toast-stack-direction:-1;z-index:var(--toast-z-index);inline-size:min(var(--toast-max-width), calc(100vw - var(--toast-inset-inline) * 2));outline:none;position:fixed;inset-block-end:var(--toast-inset-block);inset-inline-end:var(--toast-inset-inline)}.toaster.toaster--top{--toast-stack-direction:1;inset-block-start:var(--toast-inset-block);inset-block-end:auto}.toaster.toaster--left{inset-inline-start:var(--toast-inset-inline);inset-inline-end:auto}.toaster.toaster--center{inset-inline:50% auto;translate:-50%}.toast{transform-origin:bottom;cursor:default;z-index:calc(var(--toast-z-index) - var(--toast-index));transform:translateX(var(--toast-swipe-movement-x,0px)) translateY(calc(var(--toast-swipe-movement-y,0px) + var(--toast-stack-direction) * var(--toast-index) * var(--toast-stack-offset))) scale(max(0, 1 - var(--toast-index) * var(--toast-stack-scale)));transition:transform var(--toast-duration-in) var(--toast-easing), opacity var(--toast-duration-in) var(--toast-easing);position:absolute;inset-block-end:0;inset-inline:0}.toaster.toaster--top .toast{transform-origin:top;inset-block:0 auto}.toast[data-expanded],.toaster--expanded .toast{transform:translateX(var(--toast-swipe-movement-x,0px)) translateY(calc(var(--toast-swipe-movement-y,0px) + var(--toast-stack-direction) * (var(--toast-offset-y) + var(--toast-index) * var(--toast-gap))))}.toast[data-starting-style],.toast[data-ending-style]{opacity:0;transform:translateY(calc(var(--toast-stack-direction) * -100%)) scale(var(--toast-enter-scale))}.toast[data-ending-style]{transition-duration:var(--toast-duration-out)}.toast[data-swiping]{transition:none}.toast[data-limited]{opacity:0}.toast .toast__action{margin-block-start:var(--alert-content-gap);margin-inline-start:calc(var(--button-sm-padding-inline) * -1)}
|
|
1
|
+
:root{--button-border-style:solid;--button-border-color:#0000;--button-justify-content:center;--button-cursor:pointer;--button-white-space:nowrap;--button-text-decoration:none;--button-disabled-cursor:not-allowed;--button-focus-ring-style:solid;--button-block-width:100%;--button-outline-bg:#0000;--button-text-border-width:0;--button-text-padding-inline:0;--button-text-bg:#0000;--button-text-border:#0000;--button-text-hover-bg:#0000;--button-text-hover-border:#0000;--button-text-active-bg:#0000;--button-text-active-border:#0000;--button-ghost-border-width:0;--button-ghost-bg:#0000;--button-ghost-border:#0000;--button-ghost-hover-border:#0000;--button-ghost-active-border:#0000;--button-font-family:var(--font-family-sans);--button-font-size:var(--font-size-2);--button-line-height:var(--line-height-none);--button-transition-duration:var(--motion-duration-fast);--button-transition-easing:var(--motion-easing-default);--button-height:var(--size-component-md);--button-sm-height:var(--size-component-sm);--button-lg-height:var(--size-component-lg);--button-padding-inline:var(--spacing-6);--button-focus-ring-offset:var(--spacing-1);--button-sm-padding-inline:var(--spacing-5);--button-sm-font-size:var(--font-size-1);--button-lg-padding-inline:var(--spacing-8);--button-lg-font-size:var(--font-size-3);--button-primary-border-style:var(--button-border-style);--button-primary-justify-content:var(--button-justify-content);--button-primary-cursor:var(--button-cursor);--button-primary-white-space:var(--button-white-space);--button-primary-text-decoration:var(--button-text-decoration);--button-primary-disabled-cursor:var(--button-disabled-cursor);--button-primary-disabled-color:var(--color-white);--button-primary-focus-ring-style:var(--button-focus-ring-style);--button-destructive-border-style:var(--button-border-style);--button-destructive-justify-content:var(--button-justify-content);--button-destructive-cursor:var(--button-cursor);--button-destructive-white-space:var(--button-white-space);--button-destructive-text-decoration:var(--button-text-decoration);--button-destructive-disabled-cursor:var(--button-disabled-cursor);--button-destructive-focus-ring-style:var(--button-focus-ring-style);--button-destructive-bg:var(--color-white);--button-outline-border-style:var(--button-border-style);--button-outline-justify-content:var(--button-justify-content);--button-outline-cursor:var(--button-cursor);--button-outline-white-space:var(--button-white-space);--button-outline-text-decoration:var(--button-text-decoration);--button-outline-disabled-cursor:var(--button-disabled-cursor);--button-outline-focus-ring-style:var(--button-focus-ring-style);--button-text-border-style:var(--button-border-style);--button-text-justify-content:var(--button-justify-content);--button-text-cursor:var(--link-cursor);--button-text-white-space:var(--button-white-space);--button-text-hover-underline-width:var(--link-hover-underline-width);--button-text-ink-hover-underline-width:var(--link-ink-hover-underline-width);--button-text-disabled-cursor:var(--button-disabled-cursor);--button-text-focus-ring-style:var(--button-focus-ring-style);--button-ghost-border-style:var(--button-border-style);--button-ghost-justify-content:var(--button-justify-content);--button-ghost-cursor:var(--button-cursor);--button-ghost-white-space:var(--button-white-space);--button-ghost-text-decoration:var(--button-text-decoration);--button-ghost-disabled-cursor:var(--button-disabled-cursor);--button-ghost-focus-ring-style:var(--button-focus-ring-style);--button-border-radius:var(--border-radius-default);--button-border-width:var(--border-width-default);--button-font-weight:var(--font-weight-default);--button-disabled-bg:var(--color-disabled-bg-on-light);--button-disabled-color:var(--color-disabled-text-on-light);--button-disabled-border:var(--color-disabled-text-on-light);--button-focus-ring-width:var(--border-width-focus);--button-primary-font-family:var(--button-font-family);--button-primary-font-size:var(--button-font-size);--button-primary-line-height:var(--button-line-height);--button-primary-transition-duration:var(--button-transition-duration);--button-primary-transition-easing:var(--button-transition-easing);--button-primary-padding-inline:var(--button-padding-inline);--button-primary-focus-ring-offset:var(--button-focus-ring-offset);--button-primary-focus-ring-color:var(--color-primary);--button-primary-bg:var(--color-accent-1);--button-primary-color:var(--color-primary);--button-primary-border:var(--color-accent-1);--button-primary-hover-bg:var(--color-accent-2);--button-primary-hover-color:var(--color-primary);--button-primary-hover-border:var(--color-accent-2);--button-primary-active-bg:var(--color-accent-2);--button-primary-active-color:var(--color-primary);--button-primary-active-border:var(--color-accent-2);--button-destructive-font-family:var(--button-font-family);--button-destructive-font-size:var(--button-font-size);--button-destructive-line-height:var(--button-line-height);--button-destructive-transition-duration:var(--button-transition-duration);--button-destructive-transition-easing:var(--button-transition-easing);--button-destructive-padding-inline:var(--button-padding-inline);--button-destructive-focus-ring-offset:var(--button-focus-ring-offset);--button-destructive-focus-ring-color:var(--color-destructive-text-on-light);--button-destructive-color:var(--color-destructive-text-on-light);--button-destructive-border:var(--color-destructive-text-on-light);--button-destructive-hover-bg:var(--color-destructive-fill);--button-destructive-hover-color:var(--color-destructive-fill-text);--button-destructive-hover-border:var(--color-destructive-fill);--button-destructive-active-bg:var(--color-destructive-fill);--button-destructive-active-color:var(--color-destructive-fill-text);--button-destructive-active-border:var(--color-destructive-fill);--button-outline-font-family:var(--button-font-family);--button-outline-font-size:var(--button-font-size);--button-outline-line-height:var(--button-line-height);--button-outline-transition-duration:var(--button-transition-duration);--button-outline-transition-easing:var(--button-transition-easing);--button-outline-disabled-color:var(--color-disabled-border-on-light);--button-outline-disabled-border:var(--color-disabled-border-on-light);--button-outline-padding-inline:var(--button-padding-inline);--button-outline-focus-ring-offset:var(--button-focus-ring-offset);--button-outline-focus-ring-color:var(--color-text-on-light);--button-outline-color:var(--color-text-on-light);--button-outline-border:var(--color-text-on-light);--button-outline-hover-bg:var(--color-text-on-light);--button-outline-hover-color:var(--color-text-on-dark);--button-outline-hover-border:var(--color-text-on-light);--button-outline-active-bg:var(--color-text-on-light);--button-outline-active-color:var(--color-text-on-dark);--button-outline-active-border:var(--color-text-on-light);--button-text-font-family:var(--button-font-family);--button-text-font-size:var(--button-font-size);--button-text-line-height:var(--button-line-height);--button-text-underline-offset:var(--link-underline-offset);--button-text-transition-duration:var(--button-transition-duration);--button-text-transition-easing:var(--button-transition-easing);--button-ghost-font-family:var(--button-font-family);--button-ghost-font-size:var(--button-font-size);--button-ghost-line-height:var(--button-line-height);--button-ghost-transition-duration:var(--button-transition-duration);--button-ghost-transition-easing:var(--button-transition-easing);--button-ghost-padding-inline:var(--button-padding-inline);--button-ghost-focus-ring-offset:var(--button-focus-ring-offset);--button-ghost-focus-ring-color:var(--color-primary);--button-ghost-color:var(--color-text-on-light);--button-ghost-hover-bg:var(--color-primary);--button-ghost-hover-color:var(--color-text-on-dark);--button-ghost-active-bg:var(--color-primary);--button-ghost-active-color:var(--color-text-on-dark);--button-primary-border-radius:var(--button-border-radius);--button-primary-border-width:var(--button-border-width);--button-primary-font-weight:var(--button-font-weight);--button-primary-disabled-bg:var(--button-disabled-border);--button-primary-disabled-border:var(--button-disabled-border);--button-primary-focus-ring-width:var(--button-focus-ring-width);--button-destructive-border-radius:var(--button-border-radius);--button-destructive-border-width:var(--button-border-width);--button-destructive-font-weight:var(--button-font-weight);--button-destructive-disabled-color:var(--button-disabled-color);--button-destructive-disabled-border:var(--button-disabled-border);--button-destructive-focus-ring-width:var(--button-focus-ring-width);--button-outline-border-radius:var(--button-border-radius);--button-outline-border-width:var(--button-border-width);--button-outline-font-weight:var(--button-font-weight);--button-outline-focus-ring-width:var(--button-focus-ring-width);--button-text-border-radius:var(--button-border-radius);--button-text-font-weight:var(--button-font-weight);--button-text-underline-width:var(--link-underline-width);--button-text-ink-color:var(--link-ink-color);--button-text-ink-underline-width:var(--link-ink-underline-width);--button-text-disabled-color:var(--button-disabled-color);--button-text-focus-ring-width:var(--button-focus-ring-width);--button-text-focus-ring-offset:var(--link-focus-ring-offset);--button-text-focus-ring-color:var(--link-focus-ring-color);--button-text-color:var(--link-color);--button-text-hover-color:var(--link-hover-color);--button-text-active-color:var(--link-hover-color);--button-ghost-border-radius:var(--button-border-radius);--button-ghost-font-weight:var(--button-font-weight);--button-ghost-disabled-color:var(--button-disabled-color);--button-ghost-focus-ring-width:var(--button-focus-ring-width)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--button-outline-hover-bg:var(--color-white);--button-outline-hover-border:var(--color-white);--button-outline-active-bg:var(--color-white);--button-outline-active-border:var(--color-white);--button-outline-focus-ring-color:var(--color-white);--button-text-underline-width:var(--link-underline-width);--button-primary-focus-ring-color:var(--color-text-on-dark);--button-destructive-color:var(--color-destructive-text-on-dark);--button-destructive-border:var(--color-destructive-text-on-dark);--button-destructive-hover-bg:var(--color-destructive-fill);--button-destructive-hover-color:var(--color-destructive-fill-text);--button-destructive-hover-border:var(--color-destructive-fill);--button-destructive-active-bg:var(--color-destructive-fill);--button-destructive-active-color:var(--color-destructive-fill-text);--button-destructive-active-border:var(--color-destructive-fill);--button-destructive-focus-ring-color:var(--color-destructive-text-on-dark);--button-outline-color:var(--color-text-on-dark);--button-outline-border:var(--color-text-on-dark);--button-outline-hover-color:var(--color-text-on-light);--button-outline-active-color:var(--color-text-on-light);--button-text-disabled-color:var(--color-text-muted-on-dark);--button-ghost-color:var(--color-text-on-dark);--button-ghost-hover-color:var(--color-primary);--button-ghost-active-color:var(--color-primary);--button-ghost-focus-ring-color:var(--color-text-on-dark);--button-ghost-hover-bg:var(--color-text-on-dark);--button-ghost-active-bg:var(--color-text-on-dark);--button-ghost-disabled-color:var(--color-text-muted-on-dark);--button-text-hover-underline-width:var(--link-hover-underline-width);--button-text-color:var(--link-color);--button-text-hover-color:var(--link-hover-color);--button-text-ink-color:var(--link-ink-color);--button-text-active-color:var(--link-hover-color);--button-text-focus-ring-color:var(--link-focus-ring-color)}:root{--alert-padding-block:var(--spacing-4);--alert-padding-inline:var(--spacing-5);--alert-gap:var(--spacing-3);--alert-content-gap:var(--spacing-2);--alert-actions-margin-block-start:var(--spacing-3);--alert-title-line-height:var(--line-height-snug);--alert-close-size:var(--size-component-sm);--alert-close-inset:var(--spacing-2);--alert-border-radius:var(--border-radius-default);--alert-border-width:var(--border-width-default);--alert-actions-gap:var(--form-actions-gap);--alert-bg:var(--color-primary);--alert-border-color:var(--color-text-on-dark);--alert-title-font-size:var(--text-font-size);--alert-title-font-weight:var(--font-weight-emphasis);--alert-title-color:var(--color-text-on-dark);--alert-description-font-size:var(--text-font-size);--alert-description-line-height:var(--text-line-height);--alert-description-color:var(--color-text-on-dark);--alert-success-bg:var(--color-success-fill);--alert-success-border-color:var(--color-success-fill);--alert-success-title-color:var(--color-success-fill-text);--alert-success-description-color:var(--color-success-fill-text);--alert-error-bg:var(--color-error-fill);--alert-error-border-color:var(--color-error-fill);--alert-error-title-color:var(--color-error-fill-text);--alert-error-description-color:var(--color-error-fill-text);--alert-warning-bg:var(--color-warning-fill);--alert-warning-border-color:var(--color-warning-fill);--alert-warning-title-color:var(--color-warning-fill-text);--alert-warning-description-color:var(--color-warning-fill-text);--alert-warning-close-color:var(--color-warning-fill-text)}.surface-dark,.surface-invert,[data-theme=dark],html.dark{--alert-bg:var(--color-text-on-dark);--alert-border-color:var(--color-text-on-dark);--alert-title-color:var(--color-primary);--alert-description-color:var(--color-primary)}:root{--toast-max-width:360px;--toast-stack-scale:.05;--toast-enter-scale:.97;--toast-z-index:var(--z-index-toast);--toast-inset-block:var(--spacing-5);--toast-inset-inline:var(--spacing-5);--toast-gap:var(--spacing-2);--toast-stack-offset:var(--spacing-3);--toast-duration-in:var(--motion-duration-base);--toast-duration-out:var(--motion-duration-base);--toast-easing:var(--motion-easing-out)}.alert{background-color:var(--alert-bg);border:var(--alert-border-width) solid var(--alert-border-color);border-radius:var(--alert-border-radius);padding-block:var(--alert-padding-block);padding-inline:var(--alert-padding-inline);align-items:flex-start;gap:var(--alert-gap);box-sizing:border-box;--alert-title-ink:var(--alert-title-color);--alert-description-ink:var(--alert-description-color);display:flex;position:relative}.alert.alert--dismissible{padding-inline-end:calc(var(--alert-close-inset) * 2 + var(--alert-close-size))}.alert__content{flex:1;min-width:0}.alert__title{font-size:var(--alert-title-font-size);font-weight:var(--alert-title-font-weight);color:var(--alert-title-ink);line-height:var(--alert-title-line-height);margin:0}.alert__description{font-size:var(--alert-description-font-size);color:var(--alert-description-ink);line-height:var(--alert-description-line-height);margin:0;align-items:start;gap:var(--alert-content-gap);flex-direction:column;margin-block-start:var(--alert-content-gap);display:flex}.alert__actions{align-items:stretch;gap:var(--alert-actions-gap);flex-direction:column;margin-block-start:var(--alert-actions-margin-block-start);display:flex}.alert__actions>*{inline-size:100%}@media (width>=768px){.alert__actions{flex-flow:wrap;align-items:center}.alert__actions>*{inline-size:auto}}.alert .alert__close{--close-button-size:var(--alert-close-size);position:absolute;inset-block-start:var(--alert-close-inset);inset-inline-end:var(--alert-close-inset)}.alert.alert--success{--alert-bg:var(--alert-success-bg);--alert-border-color:var(--alert-success-border-color);--alert-title-color:var(--alert-success-title-color);--alert-description-color:var(--alert-success-description-color)}.alert.alert--error{--alert-bg:var(--alert-error-bg);--alert-border-color:var(--alert-error-border-color);--alert-title-color:var(--alert-error-title-color);--alert-description-color:var(--alert-error-description-color)}.alert.alert--warning{--alert-bg:var(--alert-warning-bg);--alert-border-color:var(--alert-warning-border-color);--alert-title-color:var(--alert-warning-title-color);--alert-description-color:var(--alert-warning-description-color);--close-button-color:var(--alert-warning-close-color);--close-button-focus-ring-color:var(--alert-warning-close-color)}.toaster{--toast-stack-direction:-1;z-index:var(--toast-z-index);inline-size:min(var(--toast-max-width), calc(100vw - var(--toast-inset-inline) * 2));outline:none;position:fixed;inset-block-end:var(--toast-inset-block);inset-inline-end:var(--toast-inset-inline)}.toaster.toaster--top{--toast-stack-direction:1;inset-block-start:var(--toast-inset-block);inset-block-end:auto}.toaster.toaster--left{inset-inline-start:var(--toast-inset-inline);inset-inline-end:auto}.toaster.toaster--center{inset-inline:50% auto;translate:-50%}.toast{transform-origin:bottom;cursor:default;z-index:calc(var(--toast-z-index) - var(--toast-index));transform:translateX(var(--toast-swipe-movement-x,0px)) translateY(calc(var(--toast-swipe-movement-y,0px) + var(--toast-stack-direction) * var(--toast-index) * var(--toast-stack-offset))) scale(max(0, 1 - var(--toast-index) * var(--toast-stack-scale)));transition:transform var(--toast-duration-in) var(--toast-easing), opacity var(--toast-duration-in) var(--toast-easing);position:absolute;inset-block-end:0;inset-inline:0}.toaster.toaster--top .toast{transform-origin:top;inset-block:0 auto}.toast[data-expanded],.toaster--expanded .toast{transform:translateX(var(--toast-swipe-movement-x,0px)) translateY(calc(var(--toast-swipe-movement-y,0px) + var(--toast-stack-direction) * (var(--toast-offset-y) + var(--toast-index) * var(--toast-gap))))}.toast[data-starting-style],.toast[data-ending-style]{opacity:0;transform:translateY(calc(var(--toast-stack-direction) * -100%)) scale(var(--toast-enter-scale))}.toast[data-ending-style]{transition-duration:var(--toast-duration-out)}.toast[data-swiping]{transition:none}.toast[data-limited]{opacity:0}.toast .toast__action{margin-block-start:var(--alert-content-gap);margin-inline-start:calc(var(--button-sm-padding-inline) * -1)}
|