@medyll/idae-slotui-svelte 0.25.0 → 0.26.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.
Files changed (75) hide show
  1. package/dist/controls/autocomplete/AutoComplete.svelte.d.ts +1 -1
  2. package/dist/controls/switch/Switch.svelte.d.ts +1 -1
  3. package/dist/controls/textfield/TextField.svelte.d.ts +1 -1
  4. package/dist/index.d.ts +5 -4
  5. package/dist/index.js +5 -4
  6. package/dist/slotui-css/alert.min.css +96 -1
  7. package/dist/slotui-css/auto-complete.min.css +12 -1
  8. package/dist/slotui-css/avatar.min.css +13 -1
  9. package/dist/slotui-css/backdrop.min.css +32 -1
  10. package/dist/slotui-css/badge.min.css +16 -1
  11. package/dist/slotui-css/boot-menu.min.css +77 -1
  12. package/dist/slotui-css/box.min.css +29 -1
  13. package/dist/slotui-css/breadcrumb.min.css +3 -1
  14. package/dist/slotui-css/button-action.min.css +7 -1
  15. package/dist/slotui-css/button-menu.min.css +31 -1
  16. package/dist/slotui-css/button.min.css +1195 -1
  17. package/dist/slotui-css/cartouche.min.css +90 -1
  18. package/dist/slotui-css/checkbox.min.css +123 -1
  19. package/dist/slotui-css/chipper.min.css +56 -1
  20. package/dist/slotui-css/chrome-frame.min.css +34 -1
  21. package/dist/slotui-css/confirm.min.css +9 -1
  22. package/dist/slotui-css/containerConfig.css +7 -0
  23. package/dist/slotui-css/containerConfig.min.css +7 -0
  24. package/dist/slotui-css/content-switcher.min.css +21 -1
  25. package/dist/slotui-css/csss.min.css +10 -1
  26. package/dist/slotui-css/datalist.min.css +136 -1
  27. package/dist/slotui-css/divider.min.css +16 -1
  28. package/dist/slotui-css/drawer.min.css +84 -1
  29. package/dist/slotui-css/finder.min.css +73 -1
  30. package/dist/slotui-css/frame.min.css +49 -1
  31. package/dist/slotui-css/icon.min.css +16 -1
  32. package/dist/slotui-css/loader.min.css +46 -1
  33. package/dist/slotui-css/marquee.min.css +56 -1
  34. package/dist/slotui-css/menu-list.min.css +346 -1
  35. package/dist/slotui-css/menu.min.css +95 -1
  36. package/dist/slotui-css/panel.min.css +25 -1
  37. package/dist/slotui-css/paper.min.css +21 -1
  38. package/dist/slotui-css/popper.min.css +85 -1
  39. package/dist/slotui-css/progress.min.css +20 -1
  40. package/dist/slotui-css/rating.min.css +9 -1
  41. package/dist/slotui-css/select.min.css +11 -1
  42. package/dist/slotui-css/sheetConfig.css +7 -0
  43. package/dist/slotui-css/sheetConfig.min.css +7 -0
  44. package/dist/slotui-css/slider.min.css +72 -1
  45. package/dist/slotui-css/slotui-combined.css +5096 -0
  46. package/dist/slotui-css/slotui-sheet.min.css +295 -1
  47. package/dist/slotui-css/sorterer.min.css +11 -1
  48. package/dist/slotui-css/stepper.min.css +20 -1
  49. package/dist/slotui-css/stylesheet-container.css +1 -1
  50. package/dist/slotui-css/stylesheet-container.min.css +374 -1
  51. package/dist/slotui-css/stylesheet.css +170 -173
  52. package/dist/slotui-css/stylesheet.min.css +371 -1
  53. package/dist/slotui-css/switch.min.css +63 -1
  54. package/dist/slotui-css/tabs.min.css +85 -1
  55. package/dist/slotui-css/taskbar.min.css +25 -1
  56. package/dist/slotui-css/textfield.min.css +127 -1
  57. package/dist/slotui-css/title-bar.min.css +26 -1
  58. package/dist/slotui-css/toggle-bar.min.css +41 -1
  59. package/dist/slotui-css/toolbar.min.css +28 -1
  60. package/dist/slotui-css/tree.min.css +51 -1
  61. package/dist/slotui-css/window.min.css +60 -1
  62. package/dist/styles/slotuisheet/SlotuiSheet.svelte +207 -173
  63. package/dist/styles/slotuisheet/stylesheet.scss +51 -43
  64. package/dist/styles/slotuisheet/utils.js +1 -1
  65. package/dist/ui/menuList/MenuList.svelte.d.ts +1 -1
  66. package/dist/ui/menuList/MenuListItem.svelte +3 -3
  67. package/dist/ui/menuList/MenuListItem.svelte.d.ts +1 -1
  68. package/dist/ui/tree/Tree.svelte.d.ts +1 -1
  69. package/dist/utils/content/Content.svelte.d.ts +1 -1
  70. package/dist/utils/stylesheet/StyleSheet.svelte +38 -3
  71. package/dist/utils/stylesheet/stylesheet.scss +1 -1
  72. package/dist/utils/stylesheet/utils.js +13 -13
  73. package/package.json +3 -3
  74. /package/dist/styles/slotuisheet/{sheetConfig.css → sheetConfig.scss} +0 -0
  75. /package/dist/utils/stylesheet/{containerConfig.css → containerConfig.scss} +0 -0
package/dist/slotui-css/button.min.css CHANGED
@@ -1 +1,1195 @@
1
- :global(:root){--sld-button-font-size: inherit;--sld-button-radius: var(--sld-radius-small);--sld-button-border-color: var(--sld-color-primary);--sld-button-border-width: 1px;--sld-button-text-align: center;--sld-button-padding: 0;--sld-button-background: var(--sld-color-foreground-alpha-high);--sld-button-contained-background: var(--sld-color-primary);--sld-button-hover-border-color: var(--sld-color-primary);--sld-button-active-border-color: var(--sld-color-secondary);--sld-button-focus-border-color: var(--sld-color-primary);--sld-button-hover-shadow: var(--sld-elevation-3);--sld-button-active-shadow: var(--sld-elevation-4);--sld-button-focus-shadow: var(--sld-elevation-4)}.actionButton{height:100%;width:var(--w-tiny);cursor:pointer}.actionButton:hover{background-color:rgba(255,255,255,.5)}:global(button),:global(.button),:global(button.button),:global(input[type="button"]),:global(input[type="submit"]){--preset-width: var(--sld-width-small);width:var(--preset-width-small);border:none;margin:0;text-align:var(--sld-button-text-align);font-size:var(--sld-button-font-size);border-radius:var(--sld-button-radius);color:var(--sld-color-foreground);padding:var(--sld-button-padding);position:relative;display:inline-block;transition:all .2s ease-in-out;overflow:hidden;cursor:pointer;align-content:center;align-items:center;background:var(--sld-button-background);--preset-width: var(--sld-width-small);width:var(--preset-width-small)}:global(button),:global(.button),:global(button.button),:global(input[type="button"]),:global(input[type="submit"]){--preset-width: var(--sld-width-small);width:var(--preset-width-small);min-width:var(--preset-width-small)}:global(button)[width=tiny],:global(button).width-tiny,:global(.button)[width=tiny],:global(.button).width-tiny,:global(button.button)[width=tiny],:global(button.button).width-tiny,:global(input[type="button"])[width=tiny],:global(input[type="button"]).width-tiny,:global(input[type="submit"])[width=tiny],:global(input[type="submit"]).width-tiny{--preset-width: var(--sld-width-tiny);width:var(--sld-width-tiny) !important}:global(button)[width=mini],:global(button).width-mini,:global(.button)[width=mini],:global(.button).width-mini,:global(button.button)[width=mini],:global(button.button).width-mini,:global(input[type="button"])[width=mini],:global(input[type="button"]).width-mini,:global(input[type="submit"])[width=mini],:global(input[type="submit"]).width-mini{--preset-width: var(--sld-width-mini);width:var(--sld-width-mini) !important}:global(button)[width=small],:global(button).width-small,:global(.button)[width=small],:global(.button).width-small,:global(button.button)[width=small],:global(button.button).width-small,:global(input[type="button"])[width=small],:global(input[type="button"]).width-small,:global(input[type="submit"])[width=small],:global(input[type="submit"]).width-small{--preset-width: var(--sld-width-small);width:var(--sld-width-small) !important}:global(button)[width=med],:global(button).width-med,:global(.button)[width=med],:global(.button).width-med,:global(button.button)[width=med],:global(button.button).width-med,:global(input[type="button"])[width=med],:global(input[type="button"]).width-med,:global(input[type="submit"])[width=med],:global(input[type="submit"]).width-med{--preset-width: var(--sld-width-med);width:var(--sld-width-med) !important}:global(button)[width=kind],:global(button).width-kind,:global(.button)[width=kind],:global(.button).width-kind,:global(button.button)[width=kind],:global(button.button).width-kind,:global(input[type="button"])[width=kind],:global(input[type="button"]).width-kind,:global(input[type="submit"])[width=kind],:global(input[type="submit"]).width-kind{--preset-width: var(--sld-width-kind);width:var(--sld-width-kind) !important}:global(button)[width=full],:global(button).width-full,:global(.button)[width=full],:global(.button).width-full,:global(button.button)[width=full],:global(button.button).width-full,:global(input[type="button"])[width=full],:global(input[type="button"]).width-full,:global(input[type="submit"])[width=full],:global(input[type="submit"]).width-full{--preset-width: var(--sld-width-full);width:var(--sld-width-full) !important}:global(button)[width=auto],:global(button).width-auto,:global(.button)[width=auto],:global(.button).width-auto,:global(button.button)[width=auto],:global(button.button).width-auto,:global(input[type="button"])[width=auto],:global(input[type="button"]).width-auto,:global(input[type="submit"])[width=auto],:global(input[type="submit"]).width-auto{--preset-width: var(--sld-width-auto);width:var(--sld-width-auto) !important}:global(button)[width=default],:global(button).width-default,:global(.button)[width=default],:global(.button).width-default,:global(button.button)[width=default],:global(button.button).width-default,:global(input[type="button"])[width=default],:global(input[type="button"]).width-default,:global(input[type="submit"])[width=default],:global(input[type="submit"]).width-default{--preset-width: var(--sld-width-default);width:var(--sld-width-default) !important}:global(button),:global(.button),:global(button.button),:global(input[type="button"]),:global(input[type="submit"]){--preset-tall: var(--sld-tall-small);min-height:var(--preset-tall-small);height:var(--preset-tall-small)}:global(button)[tall=tiny],:global(button).tall-tiny,:global(.button)[tall=tiny],:global(.button).tall-tiny,:global(button.button)[tall=tiny],:global(button.button).tall-tiny,:global(input[type="button"])[tall=tiny],:global(input[type="button"]).tall-tiny,:global(input[type="submit"])[tall=tiny],:global(input[type="submit"]).tall-tiny{min-height:var(--sld-tall-tiny) !important}:global(button)[tall=mini],:global(button).tall-mini,:global(.button)[tall=mini],:global(.button).tall-mini,:global(button.button)[tall=mini],:global(button.button).tall-mini,:global(input[type="button"])[tall=mini],:global(input[type="button"]).tall-mini,:global(input[type="submit"])[tall=mini],:global(input[type="submit"]).tall-mini{min-height:var(--sld-tall-mini) !important}:global(button)[tall=small],:global(button).tall-small,:global(.button)[tall=small],:global(.button).tall-small,:global(button.button)[tall=small],:global(button.button).tall-small,:global(input[type="button"])[tall=small],:global(input[type="button"]).tall-small,:global(input[type="submit"])[tall=small],:global(input[type="submit"]).tall-small{min-height:var(--sld-tall-small) !important}:global(button)[tall=med],:global(button).tall-med,:global(.button)[tall=med],:global(.button).tall-med,:global(button.button)[tall=med],:global(button.button).tall-med,:global(input[type="button"])[tall=med],:global(input[type="button"]).tall-med,:global(input[type="submit"])[tall=med],:global(input[type="submit"]).tall-med{min-height:var(--sld-tall-med) !important}:global(button)[tall=kind],:global(button).tall-kind,:global(.button)[tall=kind],:global(.button).tall-kind,:global(button.button)[tall=kind],:global(button.button).tall-kind,:global(input[type="button"])[tall=kind],:global(input[type="button"]).tall-kind,:global(input[type="submit"])[tall=kind],:global(input[type="submit"]).tall-kind{min-height:var(--sld-tall-kind) !important}:global(button)[tall=auto],:global(button).tall-auto,:global(.button)[tall=auto],:global(.button).tall-auto,:global(button.button)[tall=auto],:global(button.button).tall-auto,:global(input[type="button"])[tall=auto],:global(input[type="button"]).tall-auto,:global(input[type="submit"])[tall=auto],:global(input[type="submit"]).tall-auto{min-height:var(--sld-tall-auto) !important}:global(button)[tall=default],:global(button).tall-default,:global(.button)[tall=default],:global(.button).tall-default,:global(button.button)[tall=default],:global(button.button).tall-default,:global(input[type="button"])[tall=default],:global(input[type="button"]).tall-default,:global(input[type="submit"])[tall=default],:global(input[type="submit"]).tall-default{min-height:var(--sld-tall-default) !important}:global(button)[variant*=square],:global(button)[square=true],:global(button).square,:global(.button)[variant*=square],:global(.button)[square=true],:global(.button).square,:global(button.button)[variant*=square],:global(button.button)[square=true],:global(button.button).square,:global(input[type="button"])[variant*=square],:global(input[type="button"])[square=true],:global(input[type="button"]).square,:global(input[type="submit"])[variant*=square],:global(input[type="submit"])[square=true],:global(input[type="submit"]).square{aspect-ratio:1/1 !important;height:auto}:global(button)[variant*=rounded],:global(button)[rounded=true],:global(button).rounded,:global(.button)[variant*=rounded],:global(.button)[rounded=true],:global(.button).rounded,:global(button.button)[variant*=rounded],:global(button.button)[rounded=true],:global(button.button).rounded,:global(input[type="button"])[variant*=rounded],:global(input[type="button"])[rounded=true],:global(input[type="button"]).rounded,:global(input[type="submit"])[variant*=rounded],:global(input[type="submit"])[rounded=true],:global(input[type="submit"]).rounded{border-radius:50%}:global(button).elevation-0,:global(button)[elevation-0],:global(.button).elevation-0,:global(.button)[elevation-0],:global(button.button).elevation-0,:global(button.button)[elevation-0],:global(input[type="button"]).elevation-0,:global(input[type="button"])[elevation-0],:global(input[type="submit"]).elevation-0,:global(input[type="submit"])[elevation-0]{box-shadow:var(--sld-elevation-0)}:global(button).elevation-through,:global(button)[elevation-through],:global(.button).elevation-through,:global(.button)[elevation-through],:global(button.button).elevation-through,:global(button.button)[elevation-through],:global(input[type="button"]).elevation-through,:global(input[type="button"])[elevation-through],:global(input[type="submit"]).elevation-through,:global(input[type="submit"])[elevation-through]{box-shadow:var(--sld-elevation-through)}:global(button).elevation-5,:global(button)[elevation-5],:global(.button).elevation-5,:global(.button)[elevation-5],:global(button.button).elevation-5,:global(button.button)[elevation-5],:global(input[type="button"]).elevation-5,:global(input[type="button"])[elevation-5],:global(input[type="submit"]).elevation-5,:global(input[type="submit"])[elevation-5]{box-shadow:var(--sld-elevation-5)}:global(button) :focus,:global(.button) :focus,:global(button.button) :focus,:global(input[type="button"]) :focus,:global(input[type="submit"]) :focus{outline:1px solid var(--sld-button-focus-border-color);outline-offset:2px;box-shadow:var(--sld-button-focus-shadow)}:global(button) :focus-visible,:global(.button) :focus-visible,:global(button.button) :focus-visible,:global(input[type="button"]) :focus-visible,:global(input[type="submit"]) :focus-visible{outline:1px solid var(--sld-button-focus-border-color);outline-offset:-2px;box-shadow:var(--sld-button-focus-shadow)}:global(button) :hover,:global(.button) :hover,:global(button.button) :hover,:global(input[type="button"]) :hover,:global(input[type="submit"]) :hover{background-color:var(--sld-button-hover-background);box-shadow:var(--sld-button-hover-shadow)}:global(button) :active,:global(.button) :active,:global(button.button) :active,:global(input[type="button"]) :active,:global(input[type="submit"]) :active{transform:translateY(1px);box-shadow:var(--sld-button-active-shadow)}:global(button) :focus:not(:focus-visible),:global(.button) :focus:not(:focus-visible),:global(button.button) :focus:not(:focus-visible),:global(input[type="button"]) :focus:not(:focus-visible),:global(input[type="submit"]) :focus:not(:focus-visible){box-shadow:var(--sld-button-focus-shadow)}:global(button) .button-start,:global(.button) .button-start,:global(button.button) .button-start,:global(input[type="button"]) .button-start,:global(input[type="submit"]) .button-start{--preset-ellipsis-line: 1;position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;justify-content:center;padding:0 .5rem}:global(button) .button-start[ellipsis],:global(button) .button-start.ellipsis,:global(.button) .button-start[ellipsis],:global(.button) .button-start.ellipsis,:global(button.button) .button-start[ellipsis],:global(button.button) .button-start.ellipsis,:global(input[type="button"]) .button-start[ellipsis],:global(input[type="button"]) .button-start.ellipsis,:global(input[type="submit"]) .button-start[ellipsis],:global(input[type="submit"]) .button-start.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:global(button) .button-start.ellipsis-line-1,:global(.button) .button-start.ellipsis-line-1,:global(button.button) .button-start.ellipsis-line-1,:global(input[type="button"]) .button-start.ellipsis-line-1,:global(input[type="submit"]) .button-start.ellipsis-line-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;--preset-ellipsis-line: 1}:global(button) .button-start.ellipsis-line-2,:global(.button) .button-start.ellipsis-line-2,:global(button.button) .button-start.ellipsis-line-2,:global(input[type="button"]) .button-start.ellipsis-line-2,:global(input[type="submit"]) .button-start.ellipsis-line-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;--preset-ellipsis-line: 2}:global(button) .button-start.ellipsis-line-3,:global(.button) .button-start.ellipsis-line-3,:global(button.button) .button-start.ellipsis-line-3,:global(input[type="button"]) .button-start.ellipsis-line-3,:global(input[type="submit"]) .button-start.ellipsis-line-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;--preset-ellipsis-line: 3}:global(button) .button-start.ellipsis-line-4,:global(.button) .button-start.ellipsis-line-4,:global(button.button) .button-start.ellipsis-line-4,:global(input[type="button"]) .button-start.ellipsis-line-4,:global(input[type="submit"]) .button-start.ellipsis-line-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;--preset-ellipsis-line: 4}:global(button) .button-start.ellipsis-line-5,:global(.button) .button-start.ellipsis-line-5,:global(button.button) .button-start.ellipsis-line-5,:global(input[type="button"]) .button-start.ellipsis-line-5,:global(input[type="submit"]) .button-start.ellipsis-line-5{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;--preset-ellipsis-line: 5}:global(button) .button-start:empty,:global(.button) .button-start:empty,:global(button.button) .button-start:empty,:global(input[type="button"]) .button-start:empty,:global(input[type="submit"]) .button-start:empty{display:none}:global(button) .button-central,:global(.button) .button-central,:global(button.button) .button-central,:global(input[type="button"]) .button-central,:global(input[type="submit"]) .button-central{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0 .5rem;text-align:var(--sld-button-text-align)}:global(button) .button-central:empty,:global(.button) .button-central:empty,:global(button.button) .button-central:empty,:global(input[type="button"]) .button-central:empty,:global(input[type="submit"]) .button-central:empty{display:none}:global(button) .button-action,:global(.button) .button-action,:global(button.button) .button-action,:global(input[type="button"]) .button-action,:global(input[type="submit"]) .button-action{position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;justify-content:center;width:var(--w-tiny);padding:0 .5rem;cursor:pointer}:global(button) .button-action:empty,:global(.button) .button-action:empty,:global(button.button) .button-action:empty,:global(input[type="button"]) .button-action:empty,:global(input[type="submit"]) .button-action:empty{display:none}:global(button) .button-action:hover,:global(.button) .button-action:hover,:global(button.button) .button-action:hover,:global(input[type="button"]) .button-action:hover,:global(input[type="submit"]) .button-action:hover{background-color:var(--sld-button-action-hover-background)}:global(button).loading,:global(button)[aria-busy=true],:global(.button).loading,:global(.button)[aria-busy=true],:global(button.button).loading,:global(button.button)[aria-busy=true],:global(input[type="button"]).loading,:global(input[type="button"])[aria-busy=true],:global(input[type="submit"]).loading,:global(input[type="submit"])[aria-busy=true]{position:relative;color:rgba(0,0,0,0);pointer-events:none}:global(button).loading::after,:global(button)[aria-busy=true]::after,:global(.button).loading::after,:global(.button)[aria-busy=true]::after,:global(button.button).loading::after,:global(button.button)[aria-busy=true]::after,:global(input[type="button"]).loading::after,:global(input[type="button"])[aria-busy=true]::after,:global(input[type="submit"]).loading::after,:global(input[type="submit"])[aria-busy=true]::after{content:" ";position:absolute;width:16px;height:16px;top:50%;left:50%;margin-top:-8px;margin-left:-8px;border:2px solid var(--sld-color-secondary);border-top-color:rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,0);border-radius:50%;animation:button-spinner .6s linear infinite}:global(button)[disabled],:global(button).disabled,:global(button)[aria-disabled=true],:global(.button)[disabled],:global(.button).disabled,:global(.button)[aria-disabled=true],:global(button.button)[disabled],:global(button.button).disabled,:global(button.button)[aria-disabled=true],:global(input[type="button"])[disabled],:global(input[type="button"]).disabled,:global(input[type="button"])[aria-disabled=true],:global(input[type="submit"])[disabled],:global(input[type="submit"]).disabled,:global(input[type="submit"])[aria-disabled=true]{color:var(--color-gray-800);border-color:var(--color-gray-400);opacity:.6;cursor:not-allowed;box-shadow:none;pointer-events:none}:global(button)[aria-pressed=true],:global(button).selected,:global(.button)[aria-pressed=true],:global(.button).selected,:global(button.button)[aria-pressed=true],:global(button.button).selected,:global(input[type="button"])[aria-pressed=true],:global(input[type="button"]).selected,:global(input[type="submit"])[aria-pressed=true],:global(input[type="submit"]).selected{box-shadow:var(--sld-elevation-3);background-color:var(--sld-color-secondary);font-weight:bold}:global(button) .chip,:global(.button) .chip,:global(button.button) .chip,:global(input[type="button"]) .chip,:global(input[type="submit"]) .chip{position:absolute;z-index:2;height:3px;left:50%;transform:translate(-50%, 0);width:50%;background-color:var(--css-button-chip-color, var(--sld-color-primary));border-radius:var(--sld-radius-large);bottom:2px}:global(button) .loadingButtonZone,:global(.button) .loadingButtonZone,:global(button.button) .loadingButtonZone,:global(input[type="button"]) .loadingButtonZone,:global(input[type="submit"]) .loadingButtonZone{z-index:10;position:absolute;top:0;bottom:0;right:0;left:0;height:100%;overflow:hidden;align-content:center;justify-content:space-around}:global(button),:global(.button),:global(button.button),:global(input[type="button"]),:global(input[type="submit"]){--preset-width: var(--sld-width-small);width:var(--preset-width-small);min-width:var(--preset-width-small)}:global(button)[width=tiny],:global(button).width-tiny,:global(.button)[width=tiny],:global(.button).width-tiny,:global(button.button)[width=tiny],:global(button.button).width-tiny,:global(input[type="button"])[width=tiny],:global(input[type="button"]).width-tiny,:global(input[type="submit"])[width=tiny],:global(input[type="submit"]).width-tiny{--preset-width: var(--sld-width-tiny);width:var(--sld-width-tiny) !important}:global(button)[width=mini],:global(button).width-mini,:global(.button)[width=mini],:global(.button).width-mini,:global(button.button)[width=mini],:global(button.button).width-mini,:global(input[type="button"])[width=mini],:global(input[type="button"]).width-mini,:global(input[type="submit"])[width=mini],:global(input[type="submit"]).width-mini{--preset-width: var(--sld-width-mini);width:var(--sld-width-mini) !important}:global(button)[width=small],:global(button).width-small,:global(.button)[width=small],:global(.button).width-small,:global(button.button)[width=small],:global(button.button).width-small,:global(input[type="button"])[width=small],:global(input[type="button"]).width-small,:global(input[type="submit"])[width=small],:global(input[type="submit"]).width-small{--preset-width: var(--sld-width-small);width:var(--sld-width-small) !important}:global(button)[width=med],:global(button).width-med,:global(.button)[width=med],:global(.button).width-med,:global(button.button)[width=med],:global(button.button).width-med,:global(input[type="button"])[width=med],:global(input[type="button"]).width-med,:global(input[type="submit"])[width=med],:global(input[type="submit"]).width-med{--preset-width: var(--sld-width-med);width:var(--sld-width-med) !important}:global(button)[width=kind],:global(button).width-kind,:global(.button)[width=kind],:global(.button).width-kind,:global(button.button)[width=kind],:global(button.button).width-kind,:global(input[type="button"])[width=kind],:global(input[type="button"]).width-kind,:global(input[type="submit"])[width=kind],:global(input[type="submit"]).width-kind{--preset-width: var(--sld-width-kind);width:var(--sld-width-kind) !important}:global(button)[width=full],:global(button).width-full,:global(.button)[width=full],:global(.button).width-full,:global(button.button)[width=full],:global(button.button).width-full,:global(input[type="button"])[width=full],:global(input[type="button"]).width-full,:global(input[type="submit"])[width=full],:global(input[type="submit"]).width-full{--preset-width: var(--sld-width-full);width:var(--sld-width-full) !important}:global(button)[width=auto],:global(button).width-auto,:global(.button)[width=auto],:global(.button).width-auto,:global(button.button)[width=auto],:global(button.button).width-auto,:global(input[type="button"])[width=auto],:global(input[type="button"]).width-auto,:global(input[type="submit"])[width=auto],:global(input[type="submit"]).width-auto{--preset-width: var(--sld-width-auto);width:var(--sld-width-auto) !important}:global(button)[width=default],:global(button).width-default,:global(.button)[width=default],:global(.button).width-default,:global(button.button)[width=default],:global(button.button).width-default,:global(input[type="button"])[width=default],:global(input[type="button"]).width-default,:global(input[type="submit"])[width=default],:global(input[type="submit"]).width-default{--preset-width: var(--sld-width-default);width:var(--sld-width-default) !important}:global(button),:global(.button),:global(button.button),:global(input[type="button"]),:global(input[type="submit"]){--preset-tall: var(--sld-tall-small);min-height:var(--preset-tall-small);height:var(--preset-tall-small)}:global(button)[tall=tiny],:global(button).tall-tiny,:global(.button)[tall=tiny],:global(.button).tall-tiny,:global(button.button)[tall=tiny],:global(button.button).tall-tiny,:global(input[type="button"])[tall=tiny],:global(input[type="button"]).tall-tiny,:global(input[type="submit"])[tall=tiny],:global(input[type="submit"]).tall-tiny{min-height:var(--sld-tall-tiny) !important}:global(button)[tall=mini],:global(button).tall-mini,:global(.button)[tall=mini],:global(.button).tall-mini,:global(button.button)[tall=mini],:global(button.button).tall-mini,:global(input[type="button"])[tall=mini],:global(input[type="button"]).tall-mini,:global(input[type="submit"])[tall=mini],:global(input[type="submit"]).tall-mini{min-height:var(--sld-tall-mini) !important}:global(button)[tall=small],:global(button).tall-small,:global(.button)[tall=small],:global(.button).tall-small,:global(button.button)[tall=small],:global(button.button).tall-small,:global(input[type="button"])[tall=small],:global(input[type="button"]).tall-small,:global(input[type="submit"])[tall=small],:global(input[type="submit"]).tall-small{min-height:var(--sld-tall-small) !important}:global(button)[tall=med],:global(button).tall-med,:global(.button)[tall=med],:global(.button).tall-med,:global(button.button)[tall=med],:global(button.button).tall-med,:global(input[type="button"])[tall=med],:global(input[type="button"]).tall-med,:global(input[type="submit"])[tall=med],:global(input[type="submit"]).tall-med{min-height:var(--sld-tall-med) !important}:global(button)[tall=kind],:global(button).tall-kind,:global(.button)[tall=kind],:global(.button).tall-kind,:global(button.button)[tall=kind],:global(button.button).tall-kind,:global(input[type="button"])[tall=kind],:global(input[type="button"]).tall-kind,:global(input[type="submit"])[tall=kind],:global(input[type="submit"]).tall-kind{min-height:var(--sld-tall-kind) !important}:global(button)[tall=auto],:global(button).tall-auto,:global(.button)[tall=auto],:global(.button).tall-auto,:global(button.button)[tall=auto],:global(button.button).tall-auto,:global(input[type="button"])[tall=auto],:global(input[type="button"]).tall-auto,:global(input[type="submit"])[tall=auto],:global(input[type="submit"]).tall-auto{min-height:var(--sld-tall-auto) !important}:global(button)[tall=default],:global(button).tall-default,:global(.button)[tall=default],:global(.button).tall-default,:global(button.button)[tall=default],:global(button.button).tall-default,:global(input[type="button"])[tall=default],:global(input[type="button"]).tall-default,:global(input[type="submit"])[tall=default],:global(input[type="submit"]).tall-default{min-height:var(--sld-tall-default) !important}:global(button)[variant*=square],:global(button)[square=true],:global(button).square,:global(.button)[variant*=square],:global(.button)[square=true],:global(.button).square,:global(button.button)[variant*=square],:global(button.button)[square=true],:global(button.button).square,:global(input[type="button"])[variant*=square],:global(input[type="button"])[square=true],:global(input[type="button"]).square,:global(input[type="submit"])[variant*=square],:global(input[type="submit"])[square=true],:global(input[type="submit"]).square{aspect-ratio:1/1 !important;height:auto}:global(button)[variant*=rounded],:global(button)[rounded=true],:global(button).rounded,:global(.button)[variant*=rounded],:global(.button)[rounded=true],:global(.button).rounded,:global(button.button)[variant*=rounded],:global(button.button)[rounded=true],:global(button.button).rounded,:global(input[type="button"])[variant*=rounded],:global(input[type="button"])[rounded=true],:global(input[type="button"]).rounded,:global(input[type="submit"])[variant*=rounded],:global(input[type="submit"])[rounded=true],:global(input[type="submit"]).rounded{border-radius:50%}:global(button)[variant*=bordered],:global(button)[bordered=true],:global(button).bordered,:global(.button)[variant*=bordered],:global(.button)[bordered=true],:global(.button).bordered,:global(button.button)[variant*=bordered],:global(button.button)[bordered=true],:global(button.button).bordered,:global(input[type="button"])[variant*=bordered],:global(input[type="button"])[bordered=true],:global(input[type="button"]).bordered,:global(input[type="submit"])[variant*=bordered],:global(input[type="submit"])[bordered=true],:global(input[type="submit"]).bordered{color:var(--sld-color-foreground);border:var(--sld-button-border-width) solid var(--sld-button-border-color);box-shadow:var(--sld-elevation-1);background-color:var(--sld-button-background)}:global(button)[variant*=bordered]:hover,:global(button)[bordered=true]:hover,:global(button).bordered:hover,:global(.button)[variant*=bordered]:hover,:global(.button)[bordered=true]:hover,:global(.button).bordered:hover,:global(button.button)[variant*=bordered]:hover,:global(button.button)[bordered=true]:hover,:global(button.button).bordered:hover,:global(input[type="button"])[variant*=bordered]:hover,:global(input[type="button"])[bordered=true]:hover,:global(input[type="button"]).bordered:hover,:global(input[type="submit"])[variant*=bordered]:hover,:global(input[type="submit"])[bordered=true]:hover,:global(input[type="submit"]).bordered:hover{border-color:var(--sld-color-primary);box-shadow:var(--sld-button-hover-shadow)}:global(button)[variant*=bordered]:focus,:global(button)[variant*=bordered]:active,:global(button)[bordered=true]:focus,:global(button)[bordered=true]:active,:global(button).bordered:focus,:global(button).bordered:active,:global(.button)[variant*=bordered]:focus,:global(.button)[variant*=bordered]:active,:global(.button)[bordered=true]:focus,:global(.button)[bordered=true]:active,:global(.button).bordered:focus,:global(.button).bordered:active,:global(button.button)[variant*=bordered]:focus,:global(button.button)[variant*=bordered]:active,:global(button.button)[bordered=true]:focus,:global(button.button)[bordered=true]:active,:global(button.button).bordered:focus,:global(button.button).bordered:active,:global(input[type="button"])[variant*=bordered]:focus,:global(input[type="button"])[variant*=bordered]:active,:global(input[type="button"])[bordered=true]:focus,:global(input[type="button"])[bordered=true]:active,:global(input[type="button"]).bordered:focus,:global(input[type="button"]).bordered:active,:global(input[type="submit"])[variant*=bordered]:focus,:global(input[type="submit"])[variant*=bordered]:active,:global(input[type="submit"])[bordered=true]:focus,:global(input[type="submit"])[bordered=true]:active,:global(input[type="submit"]).bordered:focus,:global(input[type="submit"]).bordered:active{border-color:var(--sld-button-active-border-color);box-shadow:var(--sld-button-active-shadow)}:global(button)[variant*=contained],:global(button)[contained=true],:global(button).contained,:global(.button)[variant*=contained],:global(.button)[contained=true],:global(.button).contained,:global(button.button)[variant*=contained],:global(button.button)[contained=true],:global(button.button).contained,:global(input[type="button"])[variant*=contained],:global(input[type="button"])[contained=true],:global(input[type="button"]).contained,:global(input[type="submit"])[variant*=contained],:global(input[type="submit"])[contained=true],:global(input[type="submit"]).contained{border:var(--sld-button-border-width) solid var(--sld-button-border-color);color:var(--sld-color-on-primary);background-color:var(--sld-button-contained-background);background-clip:padding-box;box-shadow:var(--sld-elevation-1)}:global(button)[variant*=contained]:hover,:global(button)[contained=true]:hover,:global(button).contained:hover,:global(.button)[variant*=contained]:hover,:global(.button)[contained=true]:hover,:global(.button).contained:hover,:global(button.button)[variant*=contained]:hover,:global(button.button)[contained=true]:hover,:global(button.button).contained:hover,:global(input[type="button"])[variant*=contained]:hover,:global(input[type="button"])[contained=true]:hover,:global(input[type="button"]).contained:hover,:global(input[type="submit"])[variant*=contained]:hover,:global(input[type="submit"])[contained=true]:hover,:global(input[type="submit"]).contained:hover{background-color:var(--sld-color-secondary);color:var(--sld-color-on-secondary)}:global(button)[variant*=contained]:focus,:global(button)[variant*=contained]:active,:global(button)[contained=true]:focus,:global(button)[contained=true]:active,:global(button).contained:focus,:global(button).contained:active,:global(.button)[variant*=contained]:focus,:global(.button)[variant*=contained]:active,:global(.button)[contained=true]:focus,:global(.button)[contained=true]:active,:global(.button).contained:focus,:global(.button).contained:active,:global(button.button)[variant*=contained]:focus,:global(button.button)[variant*=contained]:active,:global(button.button)[contained=true]:focus,:global(button.button)[contained=true]:active,:global(button.button).contained:focus,:global(button.button).contained:active,:global(input[type="button"])[variant*=contained]:focus,:global(input[type="button"])[variant*=contained]:active,:global(input[type="button"])[contained=true]:focus,:global(input[type="button"])[contained=true]:active,:global(input[type="button"]).contained:focus,:global(input[type="button"]).contained:active,:global(input[type="submit"])[variant*=contained]:focus,:global(input[type="submit"])[variant*=contained]:active,:global(input[type="submit"])[contained=true]:focus,:global(input[type="submit"])[contained=true]:active,:global(input[type="submit"]).contained:focus,:global(input[type="submit"]).contained:active{background-color:var(--sld-color-tertiary);color:var(--sld-color-on-tertiary);box-shadow:var(--sld-button-active-shadow)}:global(button)[variant*=link],:global(button)[link=true],:global(button).link,:global(button)[role=link],:global(.button)[variant*=link],:global(.button)[link=true],:global(.button).link,:global(.button)[role=link],:global(button.button)[variant*=link],:global(button.button)[link=true],:global(button.button).link,:global(button.button)[role=link],:global(input[type="button"])[variant*=link],:global(input[type="button"])[link=true],:global(input[type="button"]).link,:global(input[type="button"])[role=link],:global(input[type="submit"])[variant*=link],:global(input[type="submit"])[link=true],:global(input[type="submit"]).link,:global(input[type="submit"])[role=link]{color:var(--sld-color-primary);text-decoration:underline;text-underline-offset:.35rem;background-color:rgba(0,0,0,0);cursor:pointer;border:none}:global(button)[variant*=link]:hover,:global(button)[link=true]:hover,:global(button).link:hover,:global(button)[role=link]:hover,:global(.button)[variant*=link]:hover,:global(.button)[link=true]:hover,:global(.button).link:hover,:global(.button)[role=link]:hover,:global(button.button)[variant*=link]:hover,:global(button.button)[link=true]:hover,:global(button.button).link:hover,:global(button.button)[role=link]:hover,:global(input[type="button"])[variant*=link]:hover,:global(input[type="button"])[link=true]:hover,:global(input[type="button"]).link:hover,:global(input[type="button"])[role=link]:hover,:global(input[type="submit"])[variant*=link]:hover,:global(input[type="submit"])[link=true]:hover,:global(input[type="submit"]).link:hover,:global(input[type="submit"])[role=link]:hover{text-decoration:underline}:global(button)[variant*=link]:focus,:global(button)[variant*=link]:active,:global(button)[link=true]:focus,:global(button)[link=true]:active,:global(button).link:focus,:global(button).link:active,:global(button)[role=link]:focus,:global(button)[role=link]:active,:global(.button)[variant*=link]:focus,:global(.button)[variant*=link]:active,:global(.button)[link=true]:focus,:global(.button)[link=true]:active,:global(.button).link:focus,:global(.button).link:active,:global(.button)[role=link]:focus,:global(.button)[role=link]:active,:global(button.button)[variant*=link]:focus,:global(button.button)[variant*=link]:active,:global(button.button)[link=true]:focus,:global(button.button)[link=true]:active,:global(button.button).link:focus,:global(button.button).link:active,:global(button.button)[role=link]:focus,:global(button.button)[role=link]:active,:global(input[type="button"])[variant*=link]:focus,:global(input[type="button"])[variant*=link]:active,:global(input[type="button"])[link=true]:focus,:global(input[type="button"])[link=true]:active,:global(input[type="button"]).link:focus,:global(input[type="button"]).link:active,:global(input[type="button"])[role=link]:focus,:global(input[type="button"])[role=link]:active,:global(input[type="submit"])[variant*=link]:focus,:global(input[type="submit"])[variant*=link]:active,:global(input[type="submit"])[link=true]:focus,:global(input[type="submit"])[link=true]:active,:global(input[type="submit"]).link:focus,:global(input[type="submit"]).link:active,:global(input[type="submit"])[role=link]:focus,:global(input[type="submit"])[role=link]:active{text-decoration:underline;outline:none;box-shadow:none}:global(button)[variant*=naked],:global(button)[naked=true],:global(button).naked,:global(.button)[variant*=naked],:global(.button)[naked=true],:global(.button).naked,:global(button.button)[variant*=naked],:global(button.button)[naked=true],:global(button.button).naked,:global(input[type="button"])[variant*=naked],:global(input[type="button"])[naked=true],:global(input[type="button"]).naked,:global(input[type="submit"])[variant*=naked],:global(input[type="submit"])[naked=true],:global(input[type="submit"]).naked{color:inherit;background-color:rgba(0,0,0,0);border:0px solid rgba(0,0,0,0);cursor:pointer}:global(button)[variant*=naked]:hover,:global(button)[naked=true]:hover,:global(button).naked:hover,:global(.button)[variant*=naked]:hover,:global(.button)[naked=true]:hover,:global(.button).naked:hover,:global(button.button)[variant*=naked]:hover,:global(button.button)[naked=true]:hover,:global(button.button).naked:hover,:global(input[type="button"])[variant*=naked]:hover,:global(input[type="button"])[naked=true]:hover,:global(input[type="button"]).naked:hover,:global(input[type="submit"])[variant*=naked]:hover,:global(input[type="submit"])[naked=true]:hover,:global(input[type="submit"]).naked:hover{border-color:var(--sld-hover-border-color);background-color:var(--sld-background-disabled)}:global(button)[variant*=naked]:hover,:global(button)[naked=true]:hover,:global(button).naked:hover,:global(.button)[variant*=naked]:hover,:global(.button)[naked=true]:hover,:global(.button).naked:hover,:global(button.button)[variant*=naked]:hover,:global(button.button)[naked=true]:hover,:global(button.button).naked:hover,:global(input[type="button"])[variant*=naked]:hover,:global(input[type="button"])[naked=true]:hover,:global(input[type="button"]).naked:hover,:global(input[type="submit"])[variant*=naked]:hover,:global(input[type="submit"])[naked=true]:hover,:global(input[type="submit"]).naked:hover{background-color:var(--sld-button-hover-background)}:global(button)[variant*=naked]:active,:global(button)[variant*=naked]:focus,:global(button)[naked=true]:active,:global(button)[naked=true]:focus,:global(button).naked:active,:global(button).naked:focus,:global(.button)[variant*=naked]:active,:global(.button)[variant*=naked]:focus,:global(.button)[naked=true]:active,:global(.button)[naked=true]:focus,:global(.button).naked:active,:global(.button).naked:focus,:global(button.button)[variant*=naked]:active,:global(button.button)[variant*=naked]:focus,:global(button.button)[naked=true]:active,:global(button.button)[naked=true]:focus,:global(button.button).naked:active,:global(button.button).naked:focus,:global(input[type="button"])[variant*=naked]:active,:global(input[type="button"])[variant*=naked]:focus,:global(input[type="button"])[naked=true]:active,:global(input[type="button"])[naked=true]:focus,:global(input[type="button"]).naked:active,:global(input[type="button"]).naked:focus,:global(input[type="submit"])[variant*=naked]:active,:global(input[type="submit"])[variant*=naked]:focus,:global(input[type="submit"])[naked=true]:active,:global(input[type="submit"])[naked=true]:focus,:global(input[type="submit"]).naked:active,:global(input[type="submit"]).naked:focus{background-color:rgba(0,0,0,0);border:.5px solid rgba(0,0,0,0);color:inherit}:global(button)[variant*=flat],:global(button)[flat=true],:global(button).flat,:global(.button)[variant*=flat],:global(.button)[flat=true],:global(.button).flat,:global(button.button)[variant*=flat],:global(button.button)[flat=true],:global(button.button).flat,:global(input[type="button"])[variant*=flat],:global(input[type="button"])[flat=true],:global(input[type="button"]).flat,:global(input[type="submit"])[variant*=flat],:global(input[type="submit"])[flat=true],:global(input[type="submit"]).flat{color:inherit;background-color:rgba(0,0,0,0);border:none;border-radius:0;cursor:pointer}:global(button)[variant*=flat]:hover,:global(button)[flat=true]:hover,:global(button).flat:hover,:global(.button)[variant*=flat]:hover,:global(.button)[flat=true]:hover,:global(.button).flat:hover,:global(button.button)[variant*=flat]:hover,:global(button.button)[flat=true]:hover,:global(button.button).flat:hover,:global(input[type="button"])[variant*=flat]:hover,:global(input[type="button"])[flat=true]:hover,:global(input[type="button"]).flat:hover,:global(input[type="submit"])[variant*=flat]:hover,:global(input[type="submit"])[flat=true]:hover,:global(input[type="submit"]).flat:hover{background-color:var(--sld-button-hover-background)}:global(button)[variant*=flat]:active,:global(button)[variant*=flat]:focus,:global(button)[flat=true]:active,:global(button)[flat=true]:focus,:global(button).flat:active,:global(button).flat:focus,:global(.button)[variant*=flat]:active,:global(.button)[variant*=flat]:focus,:global(.button)[flat=true]:active,:global(.button)[flat=true]:focus,:global(.button).flat:active,:global(.button).flat:focus,:global(button.button)[variant*=flat]:active,:global(button.button)[variant*=flat]:focus,:global(button.button)[flat=true]:active,:global(button.button)[flat=true]:focus,:global(button.button).flat:active,:global(button.button).flat:focus,:global(input[type="button"])[variant*=flat]:active,:global(input[type="button"])[variant*=flat]:focus,:global(input[type="button"])[flat=true]:active,:global(input[type="button"])[flat=true]:focus,:global(input[type="button"]).flat:active,:global(input[type="button"]).flat:focus,:global(input[type="submit"])[variant*=flat]:active,:global(input[type="submit"])[variant*=flat]:focus,:global(input[type="submit"])[flat=true]:active,:global(input[type="submit"])[flat=true]:focus,:global(input[type="submit"]).flat:active,:global(input[type="submit"]).flat:focus{background-color:rgba(0,0,0,0);border:none;border-radius:0;color:inherit}@keyframes button-spinner{to{transform:rotate(360deg)}}
1
+ :global(:root) {
2
+ --sld-button-font-size: inherit;
3
+ --sld-button-radius: var(--sld-radius-small);
4
+ --sld-button-border-color: var(--sld-color-primary);
5
+ --sld-button-border-width: 1px;
6
+ --sld-button-text-align: center;
7
+ --sld-button-padding: 0;
8
+ --sld-button-background: var(--sld-color-foreground-alpha-high);
9
+ --sld-button-contained-background: var(--sld-color-primary);
10
+ --sld-button-hover-border-color: var(--sld-color-primary);
11
+ --sld-button-active-border-color: var(--sld-color-secondary);
12
+ --sld-button-focus-border-color: var(--sld-color-primary);
13
+ --sld-button-hover-shadow: var(--sld-elevation-3);
14
+ --sld-button-active-shadow: var(--sld-elevation-4);
15
+ --sld-button-focus-shadow: var(--sld-elevation-4);
16
+ }
17
+
18
+ .actionButton {
19
+ height: 100%;
20
+ width: var(--w-tiny);
21
+ cursor: pointer;
22
+ }
23
+ .actionButton:hover {
24
+ background-color: rgba(255, 255, 255, 0.5);
25
+ }
26
+
27
+ :global(button),
28
+ :global(.button),
29
+ :global(button.button),
30
+ :global(input[type="button"]),
31
+ :global(input[type="submit"]) {
32
+ --preset-width: var(--sld-width-small);
33
+ width: var(--preset-width-small);
34
+ border: none;
35
+ margin: 0;
36
+ text-align: var(--sld-button-text-align);
37
+ font-size: var(--sld-button-font-size);
38
+ border-radius: var(--sld-button-radius);
39
+ color: var(--sld-color-foreground);
40
+ padding: var(--sld-button-padding);
41
+ position: relative;
42
+ display: inline-block;
43
+ transition: all 0.2s ease-in-out;
44
+ overflow: hidden;
45
+ cursor: pointer;
46
+ align-content: center;
47
+ align-items: center;
48
+ background: var(--sld-button-background);
49
+ /* &:focus {
50
+ outline: 1px solid var(--sld-button-focus-border-color);
51
+ outline-offset: 2px;
52
+ box-shadow: var(--sld-button-focus-shadow);
53
+ }
54
+ &:focus-visible {
55
+ outline: 1px solid var(--sld-button-focus-border-color);
56
+ outline-offset: -2px;
57
+ box-shadow: var(--sld-button-focus-shadow);
58
+ }
59
+ &:focus:not(:focus-visible) {
60
+ box-shadow: var(--sld-button-focus-shadow);
61
+ }
62
+ &:hover {
63
+ background-color: var(--sld-button-hover-background);
64
+ box-shadow: var(--sld-button-hover-shadow);
65
+ }
66
+
67
+ &:active {
68
+ transform: translateY(1px);
69
+ box-shadow: var(--sld-button-active-shadow);
70
+ } */
71
+ --preset-width: var(--sld-width-small);
72
+ width: var(--preset-width-small);
73
+ }
74
+ :global(button),
75
+ :global(.button),
76
+ :global(button.button),
77
+ :global(input[type="button"]),
78
+ :global(input[type="submit"]) {
79
+ --preset-width: var(--sld-width-small);
80
+ width: var(--preset-width-small);
81
+ min-width: var(--preset-width-small);
82
+ }
83
+ :global(button)[width=tiny], :global(button).width-tiny,
84
+ :global(.button)[width=tiny],
85
+ :global(.button).width-tiny,
86
+ :global(button.button)[width=tiny],
87
+ :global(button.button).width-tiny,
88
+ :global(input[type="button"])[width=tiny],
89
+ :global(input[type="button"]).width-tiny,
90
+ :global(input[type="submit"])[width=tiny],
91
+ :global(input[type="submit"]).width-tiny {
92
+ --preset-width: var(--sld-width-tiny);
93
+ width: var(--sld-width-tiny) !important;
94
+ }
95
+ :global(button)[width=mini], :global(button).width-mini,
96
+ :global(.button)[width=mini],
97
+ :global(.button).width-mini,
98
+ :global(button.button)[width=mini],
99
+ :global(button.button).width-mini,
100
+ :global(input[type="button"])[width=mini],
101
+ :global(input[type="button"]).width-mini,
102
+ :global(input[type="submit"])[width=mini],
103
+ :global(input[type="submit"]).width-mini {
104
+ --preset-width: var(--sld-width-mini);
105
+ width: var(--sld-width-mini) !important;
106
+ }
107
+ :global(button)[width=small], :global(button).width-small,
108
+ :global(.button)[width=small],
109
+ :global(.button).width-small,
110
+ :global(button.button)[width=small],
111
+ :global(button.button).width-small,
112
+ :global(input[type="button"])[width=small],
113
+ :global(input[type="button"]).width-small,
114
+ :global(input[type="submit"])[width=small],
115
+ :global(input[type="submit"]).width-small {
116
+ --preset-width: var(--sld-width-small);
117
+ width: var(--sld-width-small) !important;
118
+ }
119
+ :global(button)[width=med], :global(button).width-med,
120
+ :global(.button)[width=med],
121
+ :global(.button).width-med,
122
+ :global(button.button)[width=med],
123
+ :global(button.button).width-med,
124
+ :global(input[type="button"])[width=med],
125
+ :global(input[type="button"]).width-med,
126
+ :global(input[type="submit"])[width=med],
127
+ :global(input[type="submit"]).width-med {
128
+ --preset-width: var(--sld-width-med);
129
+ width: var(--sld-width-med) !important;
130
+ }
131
+ :global(button)[width=kind], :global(button).width-kind,
132
+ :global(.button)[width=kind],
133
+ :global(.button).width-kind,
134
+ :global(button.button)[width=kind],
135
+ :global(button.button).width-kind,
136
+ :global(input[type="button"])[width=kind],
137
+ :global(input[type="button"]).width-kind,
138
+ :global(input[type="submit"])[width=kind],
139
+ :global(input[type="submit"]).width-kind {
140
+ --preset-width: var(--sld-width-kind);
141
+ width: var(--sld-width-kind) !important;
142
+ }
143
+ :global(button)[width=full], :global(button).width-full,
144
+ :global(.button)[width=full],
145
+ :global(.button).width-full,
146
+ :global(button.button)[width=full],
147
+ :global(button.button).width-full,
148
+ :global(input[type="button"])[width=full],
149
+ :global(input[type="button"]).width-full,
150
+ :global(input[type="submit"])[width=full],
151
+ :global(input[type="submit"]).width-full {
152
+ --preset-width: var(--sld-width-full);
153
+ width: var(--sld-width-full) !important;
154
+ }
155
+ :global(button)[width=auto], :global(button).width-auto,
156
+ :global(.button)[width=auto],
157
+ :global(.button).width-auto,
158
+ :global(button.button)[width=auto],
159
+ :global(button.button).width-auto,
160
+ :global(input[type="button"])[width=auto],
161
+ :global(input[type="button"]).width-auto,
162
+ :global(input[type="submit"])[width=auto],
163
+ :global(input[type="submit"]).width-auto {
164
+ --preset-width: var(--sld-width-auto);
165
+ width: var(--sld-width-auto) !important;
166
+ }
167
+ :global(button)[width=default], :global(button).width-default,
168
+ :global(.button)[width=default],
169
+ :global(.button).width-default,
170
+ :global(button.button)[width=default],
171
+ :global(button.button).width-default,
172
+ :global(input[type="button"])[width=default],
173
+ :global(input[type="button"]).width-default,
174
+ :global(input[type="submit"])[width=default],
175
+ :global(input[type="submit"]).width-default {
176
+ --preset-width: var(--sld-width-default);
177
+ width: var(--sld-width-default) !important;
178
+ }
179
+ :global(button),
180
+ :global(.button),
181
+ :global(button.button),
182
+ :global(input[type="button"]),
183
+ :global(input[type="submit"]) {
184
+ --preset-tall: var(--sld-tall-small);
185
+ min-height: var(--preset-tall-small);
186
+ height: var(--preset-tall-small);
187
+ }
188
+ :global(button)[tall=tiny], :global(button).tall-tiny,
189
+ :global(.button)[tall=tiny],
190
+ :global(.button).tall-tiny,
191
+ :global(button.button)[tall=tiny],
192
+ :global(button.button).tall-tiny,
193
+ :global(input[type="button"])[tall=tiny],
194
+ :global(input[type="button"]).tall-tiny,
195
+ :global(input[type="submit"])[tall=tiny],
196
+ :global(input[type="submit"]).tall-tiny {
197
+ min-height: var(--sld-tall-tiny) !important;
198
+ }
199
+ :global(button)[tall=mini], :global(button).tall-mini,
200
+ :global(.button)[tall=mini],
201
+ :global(.button).tall-mini,
202
+ :global(button.button)[tall=mini],
203
+ :global(button.button).tall-mini,
204
+ :global(input[type="button"])[tall=mini],
205
+ :global(input[type="button"]).tall-mini,
206
+ :global(input[type="submit"])[tall=mini],
207
+ :global(input[type="submit"]).tall-mini {
208
+ min-height: var(--sld-tall-mini) !important;
209
+ }
210
+ :global(button)[tall=small], :global(button).tall-small,
211
+ :global(.button)[tall=small],
212
+ :global(.button).tall-small,
213
+ :global(button.button)[tall=small],
214
+ :global(button.button).tall-small,
215
+ :global(input[type="button"])[tall=small],
216
+ :global(input[type="button"]).tall-small,
217
+ :global(input[type="submit"])[tall=small],
218
+ :global(input[type="submit"]).tall-small {
219
+ min-height: var(--sld-tall-small) !important;
220
+ }
221
+ :global(button)[tall=med], :global(button).tall-med,
222
+ :global(.button)[tall=med],
223
+ :global(.button).tall-med,
224
+ :global(button.button)[tall=med],
225
+ :global(button.button).tall-med,
226
+ :global(input[type="button"])[tall=med],
227
+ :global(input[type="button"]).tall-med,
228
+ :global(input[type="submit"])[tall=med],
229
+ :global(input[type="submit"]).tall-med {
230
+ min-height: var(--sld-tall-med) !important;
231
+ }
232
+ :global(button)[tall=kind], :global(button).tall-kind,
233
+ :global(.button)[tall=kind],
234
+ :global(.button).tall-kind,
235
+ :global(button.button)[tall=kind],
236
+ :global(button.button).tall-kind,
237
+ :global(input[type="button"])[tall=kind],
238
+ :global(input[type="button"]).tall-kind,
239
+ :global(input[type="submit"])[tall=kind],
240
+ :global(input[type="submit"]).tall-kind {
241
+ min-height: var(--sld-tall-kind) !important;
242
+ }
243
+ :global(button)[tall=auto], :global(button).tall-auto,
244
+ :global(.button)[tall=auto],
245
+ :global(.button).tall-auto,
246
+ :global(button.button)[tall=auto],
247
+ :global(button.button).tall-auto,
248
+ :global(input[type="button"])[tall=auto],
249
+ :global(input[type="button"]).tall-auto,
250
+ :global(input[type="submit"])[tall=auto],
251
+ :global(input[type="submit"]).tall-auto {
252
+ min-height: var(--sld-tall-auto) !important;
253
+ }
254
+ :global(button)[tall=default], :global(button).tall-default,
255
+ :global(.button)[tall=default],
256
+ :global(.button).tall-default,
257
+ :global(button.button)[tall=default],
258
+ :global(button.button).tall-default,
259
+ :global(input[type="button"])[tall=default],
260
+ :global(input[type="button"]).tall-default,
261
+ :global(input[type="submit"])[tall=default],
262
+ :global(input[type="submit"]).tall-default {
263
+ min-height: var(--sld-tall-default) !important;
264
+ }
265
+ :global(button)[variant*=square], :global(button)[square=true], :global(button).square,
266
+ :global(.button)[variant*=square],
267
+ :global(.button)[square=true],
268
+ :global(.button).square,
269
+ :global(button.button)[variant*=square],
270
+ :global(button.button)[square=true],
271
+ :global(button.button).square,
272
+ :global(input[type="button"])[variant*=square],
273
+ :global(input[type="button"])[square=true],
274
+ :global(input[type="button"]).square,
275
+ :global(input[type="submit"])[variant*=square],
276
+ :global(input[type="submit"])[square=true],
277
+ :global(input[type="submit"]).square {
278
+ aspect-ratio: 1/1 !important;
279
+ height: auto;
280
+ }
281
+ :global(button)[variant*=rounded], :global(button)[rounded=true], :global(button).rounded,
282
+ :global(.button)[variant*=rounded],
283
+ :global(.button)[rounded=true],
284
+ :global(.button).rounded,
285
+ :global(button.button)[variant*=rounded],
286
+ :global(button.button)[rounded=true],
287
+ :global(button.button).rounded,
288
+ :global(input[type="button"])[variant*=rounded],
289
+ :global(input[type="button"])[rounded=true],
290
+ :global(input[type="button"]).rounded,
291
+ :global(input[type="submit"])[variant*=rounded],
292
+ :global(input[type="submit"])[rounded=true],
293
+ :global(input[type="submit"]).rounded {
294
+ border-radius: 50%;
295
+ }
296
+ :global(button).elevation-0, :global(button)[elevation-0],
297
+ :global(.button).elevation-0,
298
+ :global(.button)[elevation-0],
299
+ :global(button.button).elevation-0,
300
+ :global(button.button)[elevation-0],
301
+ :global(input[type="button"]).elevation-0,
302
+ :global(input[type="button"])[elevation-0],
303
+ :global(input[type="submit"]).elevation-0,
304
+ :global(input[type="submit"])[elevation-0] {
305
+ box-shadow: var(--sld-elevation-0);
306
+ }
307
+ :global(button).elevation-through, :global(button)[elevation-through],
308
+ :global(.button).elevation-through,
309
+ :global(.button)[elevation-through],
310
+ :global(button.button).elevation-through,
311
+ :global(button.button)[elevation-through],
312
+ :global(input[type="button"]).elevation-through,
313
+ :global(input[type="button"])[elevation-through],
314
+ :global(input[type="submit"]).elevation-through,
315
+ :global(input[type="submit"])[elevation-through] {
316
+ box-shadow: var(--sld-elevation-through);
317
+ }
318
+ :global(button).elevation-5, :global(button)[elevation-5],
319
+ :global(.button).elevation-5,
320
+ :global(.button)[elevation-5],
321
+ :global(button.button).elevation-5,
322
+ :global(button.button)[elevation-5],
323
+ :global(input[type="button"]).elevation-5,
324
+ :global(input[type="button"])[elevation-5],
325
+ :global(input[type="submit"]).elevation-5,
326
+ :global(input[type="submit"])[elevation-5] {
327
+ box-shadow: var(--sld-elevation-5);
328
+ }
329
+ :global(button) :focus,
330
+ :global(.button) :focus,
331
+ :global(button.button) :focus,
332
+ :global(input[type="button"]) :focus,
333
+ :global(input[type="submit"]) :focus {
334
+ outline: 1px solid var(--sld-button-focus-border-color);
335
+ outline-offset: 2px;
336
+ box-shadow: var(--sld-button-focus-shadow);
337
+ }
338
+ :global(button) :focus-visible,
339
+ :global(.button) :focus-visible,
340
+ :global(button.button) :focus-visible,
341
+ :global(input[type="button"]) :focus-visible,
342
+ :global(input[type="submit"]) :focus-visible {
343
+ outline: 1px solid var(--sld-button-focus-border-color);
344
+ outline-offset: -2px;
345
+ box-shadow: var(--sld-button-focus-shadow);
346
+ }
347
+ :global(button) :hover,
348
+ :global(.button) :hover,
349
+ :global(button.button) :hover,
350
+ :global(input[type="button"]) :hover,
351
+ :global(input[type="submit"]) :hover {
352
+ background-color: var(--sld-button-hover-background);
353
+ box-shadow: var(--sld-button-hover-shadow);
354
+ }
355
+ :global(button) :active,
356
+ :global(.button) :active,
357
+ :global(button.button) :active,
358
+ :global(input[type="button"]) :active,
359
+ :global(input[type="submit"]) :active {
360
+ transform: translateY(1px);
361
+ box-shadow: var(--sld-button-active-shadow);
362
+ }
363
+ :global(button) :focus:not(:focus-visible),
364
+ :global(.button) :focus:not(:focus-visible),
365
+ :global(button.button) :focus:not(:focus-visible),
366
+ :global(input[type="button"]) :focus:not(:focus-visible),
367
+ :global(input[type="submit"]) :focus:not(:focus-visible) {
368
+ box-shadow: var(--sld-button-focus-shadow);
369
+ }
370
+ :global(button) .button-start,
371
+ :global(.button) .button-start,
372
+ :global(button.button) .button-start,
373
+ :global(input[type="button"]) .button-start,
374
+ :global(input[type="submit"]) .button-start {
375
+ --preset-ellipsis-line: 1;
376
+ position: absolute;
377
+ top: 0;
378
+ left: 0;
379
+ height: 100%;
380
+ display: flex;
381
+ align-items: center;
382
+ justify-content: center;
383
+ padding: 0 0.5rem;
384
+ }
385
+ :global(button) .button-start[ellipsis], :global(button) .button-start.ellipsis,
386
+ :global(.button) .button-start[ellipsis],
387
+ :global(.button) .button-start.ellipsis,
388
+ :global(button.button) .button-start[ellipsis],
389
+ :global(button.button) .button-start.ellipsis,
390
+ :global(input[type="button"]) .button-start[ellipsis],
391
+ :global(input[type="button"]) .button-start.ellipsis,
392
+ :global(input[type="submit"]) .button-start[ellipsis],
393
+ :global(input[type="submit"]) .button-start.ellipsis {
394
+ white-space: nowrap;
395
+ overflow: hidden;
396
+ text-overflow: ellipsis;
397
+ }
398
+ :global(button) .button-start.ellipsis-line-1,
399
+ :global(.button) .button-start.ellipsis-line-1,
400
+ :global(button.button) .button-start.ellipsis-line-1,
401
+ :global(input[type="button"]) .button-start.ellipsis-line-1,
402
+ :global(input[type="submit"]) .button-start.ellipsis-line-1 {
403
+ display: -webkit-box;
404
+ -webkit-line-clamp: 1;
405
+ -webkit-box-orient: vertical;
406
+ overflow: hidden;
407
+ text-overflow: ellipsis;
408
+ white-space: normal;
409
+ --preset-ellipsis-line: 1;
410
+ }
411
+ :global(button) .button-start.ellipsis-line-2,
412
+ :global(.button) .button-start.ellipsis-line-2,
413
+ :global(button.button) .button-start.ellipsis-line-2,
414
+ :global(input[type="button"]) .button-start.ellipsis-line-2,
415
+ :global(input[type="submit"]) .button-start.ellipsis-line-2 {
416
+ display: -webkit-box;
417
+ -webkit-line-clamp: 2;
418
+ -webkit-box-orient: vertical;
419
+ overflow: hidden;
420
+ text-overflow: ellipsis;
421
+ white-space: normal;
422
+ --preset-ellipsis-line: 2;
423
+ }
424
+ :global(button) .button-start.ellipsis-line-3,
425
+ :global(.button) .button-start.ellipsis-line-3,
426
+ :global(button.button) .button-start.ellipsis-line-3,
427
+ :global(input[type="button"]) .button-start.ellipsis-line-3,
428
+ :global(input[type="submit"]) .button-start.ellipsis-line-3 {
429
+ display: -webkit-box;
430
+ -webkit-line-clamp: 3;
431
+ -webkit-box-orient: vertical;
432
+ overflow: hidden;
433
+ text-overflow: ellipsis;
434
+ white-space: normal;
435
+ --preset-ellipsis-line: 3;
436
+ }
437
+ :global(button) .button-start.ellipsis-line-4,
438
+ :global(.button) .button-start.ellipsis-line-4,
439
+ :global(button.button) .button-start.ellipsis-line-4,
440
+ :global(input[type="button"]) .button-start.ellipsis-line-4,
441
+ :global(input[type="submit"]) .button-start.ellipsis-line-4 {
442
+ display: -webkit-box;
443
+ -webkit-line-clamp: 4;
444
+ -webkit-box-orient: vertical;
445
+ overflow: hidden;
446
+ text-overflow: ellipsis;
447
+ white-space: normal;
448
+ --preset-ellipsis-line: 4;
449
+ }
450
+ :global(button) .button-start.ellipsis-line-5,
451
+ :global(.button) .button-start.ellipsis-line-5,
452
+ :global(button.button) .button-start.ellipsis-line-5,
453
+ :global(input[type="button"]) .button-start.ellipsis-line-5,
454
+ :global(input[type="submit"]) .button-start.ellipsis-line-5 {
455
+ display: -webkit-box;
456
+ -webkit-line-clamp: 5;
457
+ -webkit-box-orient: vertical;
458
+ overflow: hidden;
459
+ text-overflow: ellipsis;
460
+ white-space: normal;
461
+ --preset-ellipsis-line: 5;
462
+ }
463
+ :global(button) .button-start:empty,
464
+ :global(.button) .button-start:empty,
465
+ :global(button.button) .button-start:empty,
466
+ :global(input[type="button"]) .button-start:empty,
467
+ :global(input[type="submit"]) .button-start:empty {
468
+ display: none;
469
+ }
470
+ :global(button) .button-central,
471
+ :global(.button) .button-central,
472
+ :global(button.button) .button-central,
473
+ :global(input[type="button"]) .button-central,
474
+ :global(input[type="submit"]) .button-central {
475
+ width: 100%;
476
+ height: 100%;
477
+ display: flex;
478
+ align-items: center;
479
+ justify-content: center;
480
+ padding: 0 0.5rem;
481
+ text-align: var(--sld-button-text-align);
482
+ }
483
+ :global(button) .button-central:empty,
484
+ :global(.button) .button-central:empty,
485
+ :global(button.button) .button-central:empty,
486
+ :global(input[type="button"]) .button-central:empty,
487
+ :global(input[type="submit"]) .button-central:empty {
488
+ display: none;
489
+ }
490
+ :global(button) .button-action,
491
+ :global(.button) .button-action,
492
+ :global(button.button) .button-action,
493
+ :global(input[type="button"]) .button-action,
494
+ :global(input[type="submit"]) .button-action {
495
+ position: absolute;
496
+ top: 0;
497
+ right: 0;
498
+ height: 100%;
499
+ display: flex;
500
+ align-items: center;
501
+ justify-content: center;
502
+ width: var(--w-tiny);
503
+ padding: 0 0.5rem;
504
+ cursor: pointer;
505
+ }
506
+ :global(button) .button-action:empty,
507
+ :global(.button) .button-action:empty,
508
+ :global(button.button) .button-action:empty,
509
+ :global(input[type="button"]) .button-action:empty,
510
+ :global(input[type="submit"]) .button-action:empty {
511
+ display: none;
512
+ }
513
+ :global(button) .button-action:hover,
514
+ :global(.button) .button-action:hover,
515
+ :global(button.button) .button-action:hover,
516
+ :global(input[type="button"]) .button-action:hover,
517
+ :global(input[type="submit"]) .button-action:hover {
518
+ background-color: var(--sld-button-action-hover-background);
519
+ }
520
+ :global(button).loading, :global(button)[aria-busy=true],
521
+ :global(.button).loading,
522
+ :global(.button)[aria-busy=true],
523
+ :global(button.button).loading,
524
+ :global(button.button)[aria-busy=true],
525
+ :global(input[type="button"]).loading,
526
+ :global(input[type="button"])[aria-busy=true],
527
+ :global(input[type="submit"]).loading,
528
+ :global(input[type="submit"])[aria-busy=true] {
529
+ position: relative;
530
+ color: transparent;
531
+ pointer-events: none;
532
+ }
533
+ :global(button).loading::after, :global(button)[aria-busy=true]::after,
534
+ :global(.button).loading::after,
535
+ :global(.button)[aria-busy=true]::after,
536
+ :global(button.button).loading::after,
537
+ :global(button.button)[aria-busy=true]::after,
538
+ :global(input[type="button"]).loading::after,
539
+ :global(input[type="button"])[aria-busy=true]::after,
540
+ :global(input[type="submit"]).loading::after,
541
+ :global(input[type="submit"])[aria-busy=true]::after {
542
+ content: " ";
543
+ position: absolute;
544
+ width: 16px;
545
+ height: 16px;
546
+ top: 50%;
547
+ left: 50%;
548
+ margin-top: -8px;
549
+ margin-left: -8px;
550
+ border: 2px solid var(--sld-color-secondary);
551
+ border-top-color: transparent;
552
+ border-bottom-color: transparent;
553
+ border-radius: 50%;
554
+ animation: button-spinner 0.6s linear infinite;
555
+ }
556
+ :global(button)[disabled], :global(button).disabled, :global(button)[aria-disabled=true],
557
+ :global(.button)[disabled],
558
+ :global(.button).disabled,
559
+ :global(.button)[aria-disabled=true],
560
+ :global(button.button)[disabled],
561
+ :global(button.button).disabled,
562
+ :global(button.button)[aria-disabled=true],
563
+ :global(input[type="button"])[disabled],
564
+ :global(input[type="button"]).disabled,
565
+ :global(input[type="button"])[aria-disabled=true],
566
+ :global(input[type="submit"])[disabled],
567
+ :global(input[type="submit"]).disabled,
568
+ :global(input[type="submit"])[aria-disabled=true] {
569
+ color: var(--color-gray-800);
570
+ border-color: var(--color-gray-400);
571
+ opacity: 0.6;
572
+ cursor: not-allowed;
573
+ box-shadow: none;
574
+ pointer-events: none;
575
+ }
576
+ :global(button)[aria-pressed=true], :global(button).selected,
577
+ :global(.button)[aria-pressed=true],
578
+ :global(.button).selected,
579
+ :global(button.button)[aria-pressed=true],
580
+ :global(button.button).selected,
581
+ :global(input[type="button"])[aria-pressed=true],
582
+ :global(input[type="button"]).selected,
583
+ :global(input[type="submit"])[aria-pressed=true],
584
+ :global(input[type="submit"]).selected {
585
+ box-shadow: var(--sld-elevation-3);
586
+ background-color: var(--sld-color-secondary);
587
+ font-weight: bold;
588
+ }
589
+ :global(button) .chip,
590
+ :global(.button) .chip,
591
+ :global(button.button) .chip,
592
+ :global(input[type="button"]) .chip,
593
+ :global(input[type="submit"]) .chip {
594
+ position: absolute;
595
+ z-index: 2;
596
+ height: 3px;
597
+ left: 50%;
598
+ transform: translate(-50%, 0);
599
+ width: 50%;
600
+ background-color: var(--css-button-chip-color, var(--sld-color-primary));
601
+ border-radius: var(--sld-radius-large);
602
+ bottom: 2px;
603
+ }
604
+ :global(button) .loadingButtonZone,
605
+ :global(.button) .loadingButtonZone,
606
+ :global(button.button) .loadingButtonZone,
607
+ :global(input[type="button"]) .loadingButtonZone,
608
+ :global(input[type="submit"]) .loadingButtonZone {
609
+ z-index: 10;
610
+ position: absolute;
611
+ top: 0;
612
+ bottom: 0;
613
+ right: 0;
614
+ left: 0;
615
+ height: 100%;
616
+ overflow: hidden;
617
+ align-content: center;
618
+ justify-content: space-around;
619
+ }
620
+ :global(button),
621
+ :global(.button),
622
+ :global(button.button),
623
+ :global(input[type="button"]),
624
+ :global(input[type="submit"]) {
625
+ --preset-width: var(--sld-width-small);
626
+ width: var(--preset-width-small);
627
+ min-width: var(--preset-width-small);
628
+ }
629
+ :global(button)[width=tiny], :global(button).width-tiny,
630
+ :global(.button)[width=tiny],
631
+ :global(.button).width-tiny,
632
+ :global(button.button)[width=tiny],
633
+ :global(button.button).width-tiny,
634
+ :global(input[type="button"])[width=tiny],
635
+ :global(input[type="button"]).width-tiny,
636
+ :global(input[type="submit"])[width=tiny],
637
+ :global(input[type="submit"]).width-tiny {
638
+ --preset-width: var(--sld-width-tiny);
639
+ width: var(--sld-width-tiny) !important;
640
+ }
641
+ :global(button)[width=mini], :global(button).width-mini,
642
+ :global(.button)[width=mini],
643
+ :global(.button).width-mini,
644
+ :global(button.button)[width=mini],
645
+ :global(button.button).width-mini,
646
+ :global(input[type="button"])[width=mini],
647
+ :global(input[type="button"]).width-mini,
648
+ :global(input[type="submit"])[width=mini],
649
+ :global(input[type="submit"]).width-mini {
650
+ --preset-width: var(--sld-width-mini);
651
+ width: var(--sld-width-mini) !important;
652
+ }
653
+ :global(button)[width=small], :global(button).width-small,
654
+ :global(.button)[width=small],
655
+ :global(.button).width-small,
656
+ :global(button.button)[width=small],
657
+ :global(button.button).width-small,
658
+ :global(input[type="button"])[width=small],
659
+ :global(input[type="button"]).width-small,
660
+ :global(input[type="submit"])[width=small],
661
+ :global(input[type="submit"]).width-small {
662
+ --preset-width: var(--sld-width-small);
663
+ width: var(--sld-width-small) !important;
664
+ }
665
+ :global(button)[width=med], :global(button).width-med,
666
+ :global(.button)[width=med],
667
+ :global(.button).width-med,
668
+ :global(button.button)[width=med],
669
+ :global(button.button).width-med,
670
+ :global(input[type="button"])[width=med],
671
+ :global(input[type="button"]).width-med,
672
+ :global(input[type="submit"])[width=med],
673
+ :global(input[type="submit"]).width-med {
674
+ --preset-width: var(--sld-width-med);
675
+ width: var(--sld-width-med) !important;
676
+ }
677
+ :global(button)[width=kind], :global(button).width-kind,
678
+ :global(.button)[width=kind],
679
+ :global(.button).width-kind,
680
+ :global(button.button)[width=kind],
681
+ :global(button.button).width-kind,
682
+ :global(input[type="button"])[width=kind],
683
+ :global(input[type="button"]).width-kind,
684
+ :global(input[type="submit"])[width=kind],
685
+ :global(input[type="submit"]).width-kind {
686
+ --preset-width: var(--sld-width-kind);
687
+ width: var(--sld-width-kind) !important;
688
+ }
689
+ :global(button)[width=full], :global(button).width-full,
690
+ :global(.button)[width=full],
691
+ :global(.button).width-full,
692
+ :global(button.button)[width=full],
693
+ :global(button.button).width-full,
694
+ :global(input[type="button"])[width=full],
695
+ :global(input[type="button"]).width-full,
696
+ :global(input[type="submit"])[width=full],
697
+ :global(input[type="submit"]).width-full {
698
+ --preset-width: var(--sld-width-full);
699
+ width: var(--sld-width-full) !important;
700
+ }
701
+ :global(button)[width=auto], :global(button).width-auto,
702
+ :global(.button)[width=auto],
703
+ :global(.button).width-auto,
704
+ :global(button.button)[width=auto],
705
+ :global(button.button).width-auto,
706
+ :global(input[type="button"])[width=auto],
707
+ :global(input[type="button"]).width-auto,
708
+ :global(input[type="submit"])[width=auto],
709
+ :global(input[type="submit"]).width-auto {
710
+ --preset-width: var(--sld-width-auto);
711
+ width: var(--sld-width-auto) !important;
712
+ }
713
+ :global(button)[width=default], :global(button).width-default,
714
+ :global(.button)[width=default],
715
+ :global(.button).width-default,
716
+ :global(button.button)[width=default],
717
+ :global(button.button).width-default,
718
+ :global(input[type="button"])[width=default],
719
+ :global(input[type="button"]).width-default,
720
+ :global(input[type="submit"])[width=default],
721
+ :global(input[type="submit"]).width-default {
722
+ --preset-width: var(--sld-width-default);
723
+ width: var(--sld-width-default) !important;
724
+ }
725
+ :global(button),
726
+ :global(.button),
727
+ :global(button.button),
728
+ :global(input[type="button"]),
729
+ :global(input[type="submit"]) {
730
+ --preset-tall: var(--sld-tall-small);
731
+ min-height: var(--preset-tall-small);
732
+ height: var(--preset-tall-small);
733
+ }
734
+ :global(button)[tall=tiny], :global(button).tall-tiny,
735
+ :global(.button)[tall=tiny],
736
+ :global(.button).tall-tiny,
737
+ :global(button.button)[tall=tiny],
738
+ :global(button.button).tall-tiny,
739
+ :global(input[type="button"])[tall=tiny],
740
+ :global(input[type="button"]).tall-tiny,
741
+ :global(input[type="submit"])[tall=tiny],
742
+ :global(input[type="submit"]).tall-tiny {
743
+ min-height: var(--sld-tall-tiny) !important;
744
+ }
745
+ :global(button)[tall=mini], :global(button).tall-mini,
746
+ :global(.button)[tall=mini],
747
+ :global(.button).tall-mini,
748
+ :global(button.button)[tall=mini],
749
+ :global(button.button).tall-mini,
750
+ :global(input[type="button"])[tall=mini],
751
+ :global(input[type="button"]).tall-mini,
752
+ :global(input[type="submit"])[tall=mini],
753
+ :global(input[type="submit"]).tall-mini {
754
+ min-height: var(--sld-tall-mini) !important;
755
+ }
756
+ :global(button)[tall=small], :global(button).tall-small,
757
+ :global(.button)[tall=small],
758
+ :global(.button).tall-small,
759
+ :global(button.button)[tall=small],
760
+ :global(button.button).tall-small,
761
+ :global(input[type="button"])[tall=small],
762
+ :global(input[type="button"]).tall-small,
763
+ :global(input[type="submit"])[tall=small],
764
+ :global(input[type="submit"]).tall-small {
765
+ min-height: var(--sld-tall-small) !important;
766
+ }
767
+ :global(button)[tall=med], :global(button).tall-med,
768
+ :global(.button)[tall=med],
769
+ :global(.button).tall-med,
770
+ :global(button.button)[tall=med],
771
+ :global(button.button).tall-med,
772
+ :global(input[type="button"])[tall=med],
773
+ :global(input[type="button"]).tall-med,
774
+ :global(input[type="submit"])[tall=med],
775
+ :global(input[type="submit"]).tall-med {
776
+ min-height: var(--sld-tall-med) !important;
777
+ }
778
+ :global(button)[tall=kind], :global(button).tall-kind,
779
+ :global(.button)[tall=kind],
780
+ :global(.button).tall-kind,
781
+ :global(button.button)[tall=kind],
782
+ :global(button.button).tall-kind,
783
+ :global(input[type="button"])[tall=kind],
784
+ :global(input[type="button"]).tall-kind,
785
+ :global(input[type="submit"])[tall=kind],
786
+ :global(input[type="submit"]).tall-kind {
787
+ min-height: var(--sld-tall-kind) !important;
788
+ }
789
+ :global(button)[tall=auto], :global(button).tall-auto,
790
+ :global(.button)[tall=auto],
791
+ :global(.button).tall-auto,
792
+ :global(button.button)[tall=auto],
793
+ :global(button.button).tall-auto,
794
+ :global(input[type="button"])[tall=auto],
795
+ :global(input[type="button"]).tall-auto,
796
+ :global(input[type="submit"])[tall=auto],
797
+ :global(input[type="submit"]).tall-auto {
798
+ min-height: var(--sld-tall-auto) !important;
799
+ }
800
+ :global(button)[tall=default], :global(button).tall-default,
801
+ :global(.button)[tall=default],
802
+ :global(.button).tall-default,
803
+ :global(button.button)[tall=default],
804
+ :global(button.button).tall-default,
805
+ :global(input[type="button"])[tall=default],
806
+ :global(input[type="button"]).tall-default,
807
+ :global(input[type="submit"])[tall=default],
808
+ :global(input[type="submit"]).tall-default {
809
+ min-height: var(--sld-tall-default) !important;
810
+ }
811
+ :global(button)[variant*=square], :global(button)[square=true], :global(button).square,
812
+ :global(.button)[variant*=square],
813
+ :global(.button)[square=true],
814
+ :global(.button).square,
815
+ :global(button.button)[variant*=square],
816
+ :global(button.button)[square=true],
817
+ :global(button.button).square,
818
+ :global(input[type="button"])[variant*=square],
819
+ :global(input[type="button"])[square=true],
820
+ :global(input[type="button"]).square,
821
+ :global(input[type="submit"])[variant*=square],
822
+ :global(input[type="submit"])[square=true],
823
+ :global(input[type="submit"]).square {
824
+ aspect-ratio: 1/1 !important;
825
+ height: auto;
826
+ }
827
+ :global(button)[variant*=rounded], :global(button)[rounded=true], :global(button).rounded,
828
+ :global(.button)[variant*=rounded],
829
+ :global(.button)[rounded=true],
830
+ :global(.button).rounded,
831
+ :global(button.button)[variant*=rounded],
832
+ :global(button.button)[rounded=true],
833
+ :global(button.button).rounded,
834
+ :global(input[type="button"])[variant*=rounded],
835
+ :global(input[type="button"])[rounded=true],
836
+ :global(input[type="button"]).rounded,
837
+ :global(input[type="submit"])[variant*=rounded],
838
+ :global(input[type="submit"])[rounded=true],
839
+ :global(input[type="submit"]).rounded {
840
+ border-radius: 50%;
841
+ }
842
+ :global(button)[variant*=bordered], :global(button)[bordered=true], :global(button).bordered,
843
+ :global(.button)[variant*=bordered],
844
+ :global(.button)[bordered=true],
845
+ :global(.button).bordered,
846
+ :global(button.button)[variant*=bordered],
847
+ :global(button.button)[bordered=true],
848
+ :global(button.button).bordered,
849
+ :global(input[type="button"])[variant*=bordered],
850
+ :global(input[type="button"])[bordered=true],
851
+ :global(input[type="button"]).bordered,
852
+ :global(input[type="submit"])[variant*=bordered],
853
+ :global(input[type="submit"])[bordered=true],
854
+ :global(input[type="submit"]).bordered {
855
+ color: var(--sld-color-foreground);
856
+ border: var(--sld-button-border-width) solid var(--sld-button-border-color);
857
+ box-shadow: var(--sld-elevation-1);
858
+ background-color: var(--sld-button-background);
859
+ }
860
+ :global(button)[variant*=bordered]:hover, :global(button)[bordered=true]:hover, :global(button).bordered:hover,
861
+ :global(.button)[variant*=bordered]:hover,
862
+ :global(.button)[bordered=true]:hover,
863
+ :global(.button).bordered:hover,
864
+ :global(button.button)[variant*=bordered]:hover,
865
+ :global(button.button)[bordered=true]:hover,
866
+ :global(button.button).bordered:hover,
867
+ :global(input[type="button"])[variant*=bordered]:hover,
868
+ :global(input[type="button"])[bordered=true]:hover,
869
+ :global(input[type="button"]).bordered:hover,
870
+ :global(input[type="submit"])[variant*=bordered]:hover,
871
+ :global(input[type="submit"])[bordered=true]:hover,
872
+ :global(input[type="submit"]).bordered:hover {
873
+ border-color: var(--sld-color-primary);
874
+ box-shadow: var(--sld-button-hover-shadow);
875
+ }
876
+ :global(button)[variant*=bordered]:focus, :global(button)[variant*=bordered]:active, :global(button)[bordered=true]:focus, :global(button)[bordered=true]:active, :global(button).bordered:focus, :global(button).bordered:active,
877
+ :global(.button)[variant*=bordered]:focus,
878
+ :global(.button)[variant*=bordered]:active,
879
+ :global(.button)[bordered=true]:focus,
880
+ :global(.button)[bordered=true]:active,
881
+ :global(.button).bordered:focus,
882
+ :global(.button).bordered:active,
883
+ :global(button.button)[variant*=bordered]:focus,
884
+ :global(button.button)[variant*=bordered]:active,
885
+ :global(button.button)[bordered=true]:focus,
886
+ :global(button.button)[bordered=true]:active,
887
+ :global(button.button).bordered:focus,
888
+ :global(button.button).bordered:active,
889
+ :global(input[type="button"])[variant*=bordered]:focus,
890
+ :global(input[type="button"])[variant*=bordered]:active,
891
+ :global(input[type="button"])[bordered=true]:focus,
892
+ :global(input[type="button"])[bordered=true]:active,
893
+ :global(input[type="button"]).bordered:focus,
894
+ :global(input[type="button"]).bordered:active,
895
+ :global(input[type="submit"])[variant*=bordered]:focus,
896
+ :global(input[type="submit"])[variant*=bordered]:active,
897
+ :global(input[type="submit"])[bordered=true]:focus,
898
+ :global(input[type="submit"])[bordered=true]:active,
899
+ :global(input[type="submit"]).bordered:focus,
900
+ :global(input[type="submit"]).bordered:active {
901
+ border-color: var(--sld-button-active-border-color);
902
+ box-shadow: var(--sld-button-active-shadow);
903
+ }
904
+ :global(button)[variant*=contained], :global(button)[contained=true], :global(button).contained,
905
+ :global(.button)[variant*=contained],
906
+ :global(.button)[contained=true],
907
+ :global(.button).contained,
908
+ :global(button.button)[variant*=contained],
909
+ :global(button.button)[contained=true],
910
+ :global(button.button).contained,
911
+ :global(input[type="button"])[variant*=contained],
912
+ :global(input[type="button"])[contained=true],
913
+ :global(input[type="button"]).contained,
914
+ :global(input[type="submit"])[variant*=contained],
915
+ :global(input[type="submit"])[contained=true],
916
+ :global(input[type="submit"]).contained {
917
+ border: var(--sld-button-border-width) solid var(--sld-button-border-color);
918
+ color: var(--sld-color-on-primary);
919
+ background-color: var(--sld-button-contained-background);
920
+ background-clip: padding-box;
921
+ box-shadow: var(--sld-elevation-1);
922
+ }
923
+ :global(button)[variant*=contained]:hover, :global(button)[contained=true]:hover, :global(button).contained:hover,
924
+ :global(.button)[variant*=contained]:hover,
925
+ :global(.button)[contained=true]:hover,
926
+ :global(.button).contained:hover,
927
+ :global(button.button)[variant*=contained]:hover,
928
+ :global(button.button)[contained=true]:hover,
929
+ :global(button.button).contained:hover,
930
+ :global(input[type="button"])[variant*=contained]:hover,
931
+ :global(input[type="button"])[contained=true]:hover,
932
+ :global(input[type="button"]).contained:hover,
933
+ :global(input[type="submit"])[variant*=contained]:hover,
934
+ :global(input[type="submit"])[contained=true]:hover,
935
+ :global(input[type="submit"]).contained:hover {
936
+ background-color: var(--sld-color-secondary);
937
+ color: var(--sld-color-on-secondary);
938
+ }
939
+ :global(button)[variant*=contained]:focus, :global(button)[variant*=contained]:active, :global(button)[contained=true]:focus, :global(button)[contained=true]:active, :global(button).contained:focus, :global(button).contained:active,
940
+ :global(.button)[variant*=contained]:focus,
941
+ :global(.button)[variant*=contained]:active,
942
+ :global(.button)[contained=true]:focus,
943
+ :global(.button)[contained=true]:active,
944
+ :global(.button).contained:focus,
945
+ :global(.button).contained:active,
946
+ :global(button.button)[variant*=contained]:focus,
947
+ :global(button.button)[variant*=contained]:active,
948
+ :global(button.button)[contained=true]:focus,
949
+ :global(button.button)[contained=true]:active,
950
+ :global(button.button).contained:focus,
951
+ :global(button.button).contained:active,
952
+ :global(input[type="button"])[variant*=contained]:focus,
953
+ :global(input[type="button"])[variant*=contained]:active,
954
+ :global(input[type="button"])[contained=true]:focus,
955
+ :global(input[type="button"])[contained=true]:active,
956
+ :global(input[type="button"]).contained:focus,
957
+ :global(input[type="button"]).contained:active,
958
+ :global(input[type="submit"])[variant*=contained]:focus,
959
+ :global(input[type="submit"])[variant*=contained]:active,
960
+ :global(input[type="submit"])[contained=true]:focus,
961
+ :global(input[type="submit"])[contained=true]:active,
962
+ :global(input[type="submit"]).contained:focus,
963
+ :global(input[type="submit"]).contained:active {
964
+ background-color: var(--sld-color-tertiary);
965
+ color: var(--sld-color-on-tertiary);
966
+ box-shadow: var(--sld-button-active-shadow);
967
+ }
968
+ :global(button)[variant*=link], :global(button)[link=true], :global(button).link, :global(button)[role=link],
969
+ :global(.button)[variant*=link],
970
+ :global(.button)[link=true],
971
+ :global(.button).link,
972
+ :global(.button)[role=link],
973
+ :global(button.button)[variant*=link],
974
+ :global(button.button)[link=true],
975
+ :global(button.button).link,
976
+ :global(button.button)[role=link],
977
+ :global(input[type="button"])[variant*=link],
978
+ :global(input[type="button"])[link=true],
979
+ :global(input[type="button"]).link,
980
+ :global(input[type="button"])[role=link],
981
+ :global(input[type="submit"])[variant*=link],
982
+ :global(input[type="submit"])[link=true],
983
+ :global(input[type="submit"]).link,
984
+ :global(input[type="submit"])[role=link] {
985
+ color: var(--sld-color-primary);
986
+ text-decoration: underline;
987
+ text-underline-offset: 0.35rem;
988
+ background-color: transparent;
989
+ cursor: pointer;
990
+ border: none;
991
+ }
992
+ :global(button)[variant*=link]:hover, :global(button)[link=true]:hover, :global(button).link:hover, :global(button)[role=link]:hover,
993
+ :global(.button)[variant*=link]:hover,
994
+ :global(.button)[link=true]:hover,
995
+ :global(.button).link:hover,
996
+ :global(.button)[role=link]:hover,
997
+ :global(button.button)[variant*=link]:hover,
998
+ :global(button.button)[link=true]:hover,
999
+ :global(button.button).link:hover,
1000
+ :global(button.button)[role=link]:hover,
1001
+ :global(input[type="button"])[variant*=link]:hover,
1002
+ :global(input[type="button"])[link=true]:hover,
1003
+ :global(input[type="button"]).link:hover,
1004
+ :global(input[type="button"])[role=link]:hover,
1005
+ :global(input[type="submit"])[variant*=link]:hover,
1006
+ :global(input[type="submit"])[link=true]:hover,
1007
+ :global(input[type="submit"]).link:hover,
1008
+ :global(input[type="submit"])[role=link]:hover {
1009
+ text-decoration: underline;
1010
+ }
1011
+ :global(button)[variant*=link]:focus, :global(button)[variant*=link]:active, :global(button)[link=true]:focus, :global(button)[link=true]:active, :global(button).link:focus, :global(button).link:active, :global(button)[role=link]:focus, :global(button)[role=link]:active,
1012
+ :global(.button)[variant*=link]:focus,
1013
+ :global(.button)[variant*=link]:active,
1014
+ :global(.button)[link=true]:focus,
1015
+ :global(.button)[link=true]:active,
1016
+ :global(.button).link:focus,
1017
+ :global(.button).link:active,
1018
+ :global(.button)[role=link]:focus,
1019
+ :global(.button)[role=link]:active,
1020
+ :global(button.button)[variant*=link]:focus,
1021
+ :global(button.button)[variant*=link]:active,
1022
+ :global(button.button)[link=true]:focus,
1023
+ :global(button.button)[link=true]:active,
1024
+ :global(button.button).link:focus,
1025
+ :global(button.button).link:active,
1026
+ :global(button.button)[role=link]:focus,
1027
+ :global(button.button)[role=link]:active,
1028
+ :global(input[type="button"])[variant*=link]:focus,
1029
+ :global(input[type="button"])[variant*=link]:active,
1030
+ :global(input[type="button"])[link=true]:focus,
1031
+ :global(input[type="button"])[link=true]:active,
1032
+ :global(input[type="button"]).link:focus,
1033
+ :global(input[type="button"]).link:active,
1034
+ :global(input[type="button"])[role=link]:focus,
1035
+ :global(input[type="button"])[role=link]:active,
1036
+ :global(input[type="submit"])[variant*=link]:focus,
1037
+ :global(input[type="submit"])[variant*=link]:active,
1038
+ :global(input[type="submit"])[link=true]:focus,
1039
+ :global(input[type="submit"])[link=true]:active,
1040
+ :global(input[type="submit"]).link:focus,
1041
+ :global(input[type="submit"]).link:active,
1042
+ :global(input[type="submit"])[role=link]:focus,
1043
+ :global(input[type="submit"])[role=link]:active {
1044
+ text-decoration: underline;
1045
+ outline: none;
1046
+ box-shadow: none;
1047
+ }
1048
+ :global(button)[variant*=naked], :global(button)[naked=true], :global(button).naked,
1049
+ :global(.button)[variant*=naked],
1050
+ :global(.button)[naked=true],
1051
+ :global(.button).naked,
1052
+ :global(button.button)[variant*=naked],
1053
+ :global(button.button)[naked=true],
1054
+ :global(button.button).naked,
1055
+ :global(input[type="button"])[variant*=naked],
1056
+ :global(input[type="button"])[naked=true],
1057
+ :global(input[type="button"]).naked,
1058
+ :global(input[type="submit"])[variant*=naked],
1059
+ :global(input[type="submit"])[naked=true],
1060
+ :global(input[type="submit"]).naked {
1061
+ color: inherit;
1062
+ background-color: transparent;
1063
+ border: 0px solid transparent;
1064
+ cursor: pointer;
1065
+ }
1066
+ :global(button)[variant*=naked]:hover, :global(button)[naked=true]:hover, :global(button).naked:hover,
1067
+ :global(.button)[variant*=naked]:hover,
1068
+ :global(.button)[naked=true]:hover,
1069
+ :global(.button).naked:hover,
1070
+ :global(button.button)[variant*=naked]:hover,
1071
+ :global(button.button)[naked=true]:hover,
1072
+ :global(button.button).naked:hover,
1073
+ :global(input[type="button"])[variant*=naked]:hover,
1074
+ :global(input[type="button"])[naked=true]:hover,
1075
+ :global(input[type="button"]).naked:hover,
1076
+ :global(input[type="submit"])[variant*=naked]:hover,
1077
+ :global(input[type="submit"])[naked=true]:hover,
1078
+ :global(input[type="submit"]).naked:hover {
1079
+ border-color: var(--sld-hover-border-color);
1080
+ background-color: var(--sld-background-disabled);
1081
+ }
1082
+ :global(button)[variant*=naked]:hover, :global(button)[naked=true]:hover, :global(button).naked:hover,
1083
+ :global(.button)[variant*=naked]:hover,
1084
+ :global(.button)[naked=true]:hover,
1085
+ :global(.button).naked:hover,
1086
+ :global(button.button)[variant*=naked]:hover,
1087
+ :global(button.button)[naked=true]:hover,
1088
+ :global(button.button).naked:hover,
1089
+ :global(input[type="button"])[variant*=naked]:hover,
1090
+ :global(input[type="button"])[naked=true]:hover,
1091
+ :global(input[type="button"]).naked:hover,
1092
+ :global(input[type="submit"])[variant*=naked]:hover,
1093
+ :global(input[type="submit"])[naked=true]:hover,
1094
+ :global(input[type="submit"]).naked:hover {
1095
+ background-color: var(--sld-button-hover-background);
1096
+ }
1097
+ :global(button)[variant*=naked]:active, :global(button)[variant*=naked]:focus, :global(button)[naked=true]:active, :global(button)[naked=true]:focus, :global(button).naked:active, :global(button).naked:focus,
1098
+ :global(.button)[variant*=naked]:active,
1099
+ :global(.button)[variant*=naked]:focus,
1100
+ :global(.button)[naked=true]:active,
1101
+ :global(.button)[naked=true]:focus,
1102
+ :global(.button).naked:active,
1103
+ :global(.button).naked:focus,
1104
+ :global(button.button)[variant*=naked]:active,
1105
+ :global(button.button)[variant*=naked]:focus,
1106
+ :global(button.button)[naked=true]:active,
1107
+ :global(button.button)[naked=true]:focus,
1108
+ :global(button.button).naked:active,
1109
+ :global(button.button).naked:focus,
1110
+ :global(input[type="button"])[variant*=naked]:active,
1111
+ :global(input[type="button"])[variant*=naked]:focus,
1112
+ :global(input[type="button"])[naked=true]:active,
1113
+ :global(input[type="button"])[naked=true]:focus,
1114
+ :global(input[type="button"]).naked:active,
1115
+ :global(input[type="button"]).naked:focus,
1116
+ :global(input[type="submit"])[variant*=naked]:active,
1117
+ :global(input[type="submit"])[variant*=naked]:focus,
1118
+ :global(input[type="submit"])[naked=true]:active,
1119
+ :global(input[type="submit"])[naked=true]:focus,
1120
+ :global(input[type="submit"]).naked:active,
1121
+ :global(input[type="submit"]).naked:focus {
1122
+ background-color: transparent;
1123
+ border: 0.5px solid transparent;
1124
+ color: inherit;
1125
+ }
1126
+ :global(button)[variant*=flat], :global(button)[flat=true], :global(button).flat,
1127
+ :global(.button)[variant*=flat],
1128
+ :global(.button)[flat=true],
1129
+ :global(.button).flat,
1130
+ :global(button.button)[variant*=flat],
1131
+ :global(button.button)[flat=true],
1132
+ :global(button.button).flat,
1133
+ :global(input[type="button"])[variant*=flat],
1134
+ :global(input[type="button"])[flat=true],
1135
+ :global(input[type="button"]).flat,
1136
+ :global(input[type="submit"])[variant*=flat],
1137
+ :global(input[type="submit"])[flat=true],
1138
+ :global(input[type="submit"]).flat {
1139
+ color: inherit;
1140
+ background-color: transparent;
1141
+ border: none;
1142
+ border-radius: 0;
1143
+ cursor: pointer;
1144
+ }
1145
+ :global(button)[variant*=flat]:hover, :global(button)[flat=true]:hover, :global(button).flat:hover,
1146
+ :global(.button)[variant*=flat]:hover,
1147
+ :global(.button)[flat=true]:hover,
1148
+ :global(.button).flat:hover,
1149
+ :global(button.button)[variant*=flat]:hover,
1150
+ :global(button.button)[flat=true]:hover,
1151
+ :global(button.button).flat:hover,
1152
+ :global(input[type="button"])[variant*=flat]:hover,
1153
+ :global(input[type="button"])[flat=true]:hover,
1154
+ :global(input[type="button"]).flat:hover,
1155
+ :global(input[type="submit"])[variant*=flat]:hover,
1156
+ :global(input[type="submit"])[flat=true]:hover,
1157
+ :global(input[type="submit"]).flat:hover {
1158
+ background-color: var(--sld-button-hover-background);
1159
+ }
1160
+ :global(button)[variant*=flat]:active, :global(button)[variant*=flat]:focus, :global(button)[flat=true]:active, :global(button)[flat=true]:focus, :global(button).flat:active, :global(button).flat:focus,
1161
+ :global(.button)[variant*=flat]:active,
1162
+ :global(.button)[variant*=flat]:focus,
1163
+ :global(.button)[flat=true]:active,
1164
+ :global(.button)[flat=true]:focus,
1165
+ :global(.button).flat:active,
1166
+ :global(.button).flat:focus,
1167
+ :global(button.button)[variant*=flat]:active,
1168
+ :global(button.button)[variant*=flat]:focus,
1169
+ :global(button.button)[flat=true]:active,
1170
+ :global(button.button)[flat=true]:focus,
1171
+ :global(button.button).flat:active,
1172
+ :global(button.button).flat:focus,
1173
+ :global(input[type="button"])[variant*=flat]:active,
1174
+ :global(input[type="button"])[variant*=flat]:focus,
1175
+ :global(input[type="button"])[flat=true]:active,
1176
+ :global(input[type="button"])[flat=true]:focus,
1177
+ :global(input[type="button"]).flat:active,
1178
+ :global(input[type="button"]).flat:focus,
1179
+ :global(input[type="submit"])[variant*=flat]:active,
1180
+ :global(input[type="submit"])[variant*=flat]:focus,
1181
+ :global(input[type="submit"])[flat=true]:active,
1182
+ :global(input[type="submit"])[flat=true]:focus,
1183
+ :global(input[type="submit"]).flat:active,
1184
+ :global(input[type="submit"]).flat:focus {
1185
+ background-color: transparent;
1186
+ border: none;
1187
+ border-radius: 0;
1188
+ color: inherit;
1189
+ }
1190
+
1191
+ @keyframes button-spinner {
1192
+ to {
1193
+ transform: rotate(360deg);
1194
+ }
1195
+ }