@simai-studio/ui 5.20261022.1721 → 5.20261022.1938

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 (19) hide show
  1. package/README.md +4 -4
  2. package/distr/component/accordion/css/accordion.min.css +1 -1
  3. package/distr/component/doc/css/doc.min.css +1 -1
  4. package/distr/component/highlight/css/highlight.min.css +1 -1
  5. package/distr/component/highlight/js/highlight.min.js +1 -1
  6. package/distr/component/inputs/css/inputs.min.css +1 -1
  7. package/distr/component/tabs/css/tabs.min.css +1 -1
  8. package/distr/core/contracts/packages/larena.package.json +1 -0
  9. package/distr/core/css/core.css +16 -0
  10. package/distr/core/css/core.min.css +1 -1
  11. package/distr/smart/datepicker/js/datepicker.min.js +10 -9
  12. package/distr/smart/datepicker/smart.manifest.json +13 -3
  13. package/distr/smart/datepicker/template/default.js +2 -1
  14. package/distr/smart/dropdown/smart.manifest.json +2 -2
  15. package/distr/smart/field-renderers/js/field-renderers.min.js +4 -4
  16. package/distr/smart/inputs/js/inputs.min.js +3 -3
  17. package/distr/smart/inputs/smart.manifest.json +1 -1
  18. package/package-manifest.json +19 -19
  19. package/package.json +4 -4
package/distr/component/inputs/css/inputs.min.css CHANGED
@@ -1 +1 @@
1
- @layer sf.components{.sf-input .sf-input-field input{flex:1 1 auto;min-width:0;width:auto}.sf-input .sf-input-right,.sf-input .sf-input-field>.sf-icon,.sf-input .sf-input-field>.sf-icon-hint{flex-shrink:0}}@layer sf.components{.sf-input{min-width:0;min-inline-size:0;--sf-input--radius: var(--sf-input-radius, var(--sf-radius--ui));background-color:transparent;background-color:var(--sf-input--background-color, transparent);gap:var(--sf-space-1\/4);gap:var(--sf-input--gap, var(--sf-space-1\/4))}.sf-input .sf-icon{color:var(--sf-on-surface-variant);color:var(--sf-icon--color, var(--sf-on-surface-variant));font-size:var(--sf-icon-size-3);font-size:var(--sf-icon--font-size, var(--sf-icon-size-3));height:var(--sf-icon-size-3);height:var(--sf-icon--height, var(--sf-icon-size-3));width:var(--sf-icon-size-3);width:var(--sf-icon--width, var(--sf-icon-size-3))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field{border-bottom-right-radius:var(--sf-input-field--border-end-end-radius)}@supports not (border-end-end-radius: initial){html:not([dir="rtl"]) .sf-input .sf-input-field{border-bottom-right-radius:var(--sf-input-field--border-end-end-radius)}}.sf-input .sf-input-field:where(:dir(ltr)){border-bottom-right-radius:var(--sf-input-field--border-end-end-radius)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field{border-bottom-left-radius:var(--sf-input-field--border-end-end-radius)}@supports not (border-end-end-radius: initial){[dir="rtl"] .sf-input .sf-input-field{border-bottom-left-radius:var(--sf-input-field--border-end-end-radius)}}.sf-input .sf-input-field:where(:dir(rtl)){border-bottom-left-radius:var(--sf-input-field--border-end-end-radius)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field{border-bottom-left-radius:var(--sf-input-field--border-end-start-radius)}@supports not (border-end-start-radius: initial){html:not([dir="rtl"]) .sf-input .sf-input-field{border-bottom-left-radius:var(--sf-input-field--border-end-start-radius)}}.sf-input .sf-input-field:where(:dir(ltr)){border-bottom-left-radius:var(--sf-input-field--border-end-start-radius)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field{border-bottom-right-radius:var(--sf-input-field--border-end-start-radius)}@supports not (border-end-start-radius: initial){[dir="rtl"] .sf-input .sf-input-field{border-bottom-right-radius:var(--sf-input-field--border-end-start-radius)}}.sf-input .sf-input-field:where(:dir(rtl)){border-bottom-right-radius:var(--sf-input-field--border-end-start-radius)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field{border-top-right-radius:var(--sf-input-field--border-start-end-radius)}@supports not (border-start-end-radius: initial){html:not([dir="rtl"]) .sf-input .sf-input-field{border-top-right-radius:var(--sf-input-field--border-start-end-radius)}}.sf-input .sf-input-field:where(:dir(ltr)){border-top-right-radius:var(--sf-input-field--border-start-end-radius)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field{border-top-left-radius:var(--sf-input-field--border-start-end-radius)}@supports not (border-start-end-radius: initial){[dir="rtl"] .sf-input .sf-input-field{border-top-left-radius:var(--sf-input-field--border-start-end-radius)}}.sf-input .sf-input-field:where(:dir(rtl)){border-top-left-radius:var(--sf-input-field--border-start-end-radius)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field{border-top-left-radius:var(--sf-input-field--border-start-start-radius)}@supports not (border-start-start-radius: initial){html:not([dir="rtl"]) .sf-input .sf-input-field{border-top-left-radius:var(--sf-input-field--border-start-start-radius)}}.sf-input .sf-input-field:where(:dir(ltr)){border-top-left-radius:var(--sf-input-field--border-start-start-radius)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field{border-top-right-radius:var(--sf-input-field--border-start-start-radius)}@supports not (border-start-start-radius: initial){[dir="rtl"] .sf-input .sf-input-field{border-top-right-radius:var(--sf-input-field--border-start-start-radius)}}.sf-input .sf-input-field:where(:dir(rtl)){border-top-right-radius:var(--sf-input-field--border-start-start-radius)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field{padding-right:var(--sf-input-field--padding-inline-end)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-input .sf-input-field{padding-right:var(--sf-input-field--padding-inline-end)}}.sf-input .sf-input-field:where(:dir(ltr)){padding-right:var(--sf-input-field--padding-inline-end)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field{padding-left:var(--sf-input-field--padding-inline-end)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-input .sf-input-field{padding-left:var(--sf-input-field--padding-inline-end)}}.sf-input .sf-input-field:where(:dir(rtl)){padding-left:var(--sf-input-field--padding-inline-end)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field{padding-left:var(--sf-input-field--padding-inline-start)}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-input .sf-input-field{padding-left:var(--sf-input-field--padding-inline-start)}}.sf-input .sf-input-field:where(:dir(ltr)){padding-left:var(--sf-input-field--padding-inline-start)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field{padding-right:var(--sf-input-field--padding-inline-start)}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-input .sf-input-field{padding-right:var(--sf-input-field--padding-inline-start)}}.sf-input .sf-input-field:where(:dir(rtl)){padding-right:var(--sf-input-field--padding-inline-start)}.sf-input .sf-input-field{min-width:0;min-inline-size:0;--sf-input-field--border: var(--sf-px) solid;--sf-input-field--border-end-end-radius: var(--sf-input--radius);--sf-input-field--border-end-start-radius: var(--sf-input--radius);--sf-input-field--border-start-end-radius: var(--sf-input--radius);--sf-input-field--border-start-start-radius: var(--sf-input--radius);background-color:var(--sf-input-field--background-color);border:0 solid;border:var(--sf-input-field--border, 0 solid);border-color:transparent;border-color:var(--sf-input-field--border-color, transparent);border-end-end-radius:var(--sf-input-field--border-end-end-radius);border-end-start-radius:var(--sf-input-field--border-end-start-radius);border-start-end-radius:var(--sf-input-field--border-start-end-radius);border-start-start-radius:var(--sf-input-field--border-start-start-radius);box-shadow:var(--sf-input-field--box-shadow);padding-bottom:var(--sf-input-field--padding-bottom);-webkit-padding-end:var(--sf-input-field--padding-inline-end);padding-inline-end:var(--sf-input-field--padding-inline-end);-webkit-padding-start:var(--sf-input-field--padding-inline-start);padding-inline-start:var(--sf-input-field--padding-inline-start);padding-top:var(--sf-input-field--padding-top);transition-duration:var(--sf-duration-fast);transition-property:background-color,border-color,box-shadow,color;transition-timing-function:var(--sf-animation)}.sf-input .sf-input-hint{--sf-input-hint--background-color: transparent;background-color:var(--sf-input-hint--background-color)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field input{padding-right:var(--sf-input-input--padding-inline-end)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-input .sf-input-field input{padding-right:var(--sf-input-input--padding-inline-end)}}.sf-input .sf-input-field input:where(:dir(ltr)){padding-right:var(--sf-input-input--padding-inline-end)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field input{padding-left:var(--sf-input-input--padding-inline-end)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-input .sf-input-field input{padding-left:var(--sf-input-input--padding-inline-end)}}.sf-input .sf-input-field input:where(:dir(rtl)){padding-left:var(--sf-input-input--padding-inline-end)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field input{padding-left:var(--sf-input-input--padding-inline-start)}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-input .sf-input-field input{padding-left:var(--sf-input-input--padding-inline-start)}}.sf-input .sf-input-field input:where(:dir(ltr)){padding-left:var(--sf-input-input--padding-inline-start)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field input{padding-right:var(--sf-input-input--padding-inline-start)}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-input .sf-input-field input{padding-right:var(--sf-input-input--padding-inline-start)}}.sf-input .sf-input-field input:where(:dir(rtl)){padding-right:var(--sf-input-input--padding-inline-start)}.sf-input .sf-input-field input{min-width:0;min-inline-size:0;--sf-input-input--background-color: transparent;background-color:var(--sf-input-input--background-color);color:var(--sf-input-input--color);color:var(--sf-input-color, var(--sf-input-input--color));font-family:var(--sf-input-input--font-family);font-size:var(--sf-input-input--font-size);line-height:var(--sf-input-input--line-height);-webkit-padding-end:var(--sf-input-input--padding-inline-end);padding-inline-end:var(--sf-input-input--padding-inline-end);-webkit-padding-start:var(--sf-input-input--padding-inline-start);padding-inline-start:var(--sf-input-input--padding-inline-start)}.sf-input .sf-input-field input::-webkit-input-placeholder{--sf-input-placeholder--color: var(--sf-on-surface-variant);--sf-input-placeholder--font-family: var(--sf-text--family);color:var(--sf-input-placeholder--color);font-family:var(--sf-input-placeholder--font-family);font-size:var(--sf-input-placeholder--font-size);line-height:var(--sf-input-placeholder--line-height)}.sf-input .sf-input-field input::-moz-placeholder{--sf-input-placeholder--color: var(--sf-on-surface-variant);--sf-input-placeholder--font-family: var(--sf-text--family);color:var(--sf-input-placeholder--color);font-family:var(--sf-input-placeholder--font-family);font-size:var(--sf-input-placeholder--font-size);line-height:var(--sf-input-placeholder--line-height)}.sf-input .sf-input-field input:-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-surface-variant);--sf-input-placeholder--font-family: var(--sf-text--family);color:var(--sf-input-placeholder--color);font-family:var(--sf-input-placeholder--font-family);font-size:var(--sf-input-placeholder--font-size);line-height:var(--sf-input-placeholder--line-height)}.sf-input .sf-input-field input::-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-surface-variant);--sf-input-placeholder--font-family: var(--sf-text--family);color:var(--sf-input-placeholder--color);font-family:var(--sf-input-placeholder--font-family);font-size:var(--sf-input-placeholder--font-size);line-height:var(--sf-input-placeholder--line-height)}.sf-input .sf-input-field input::placeholder{--sf-input-placeholder--color: var(--sf-on-surface-variant);--sf-input-placeholder--font-family: var(--sf-text--family);color:var(--sf-input-placeholder--color);font-family:var(--sf-input-placeholder--font-family);font-size:var(--sf-input-placeholder--font-size);line-height:var(--sf-input-placeholder--line-height)}.sf-input.sf-input--filled .sf-input-field input::-webkit-input-placeholder{--sf-input-placeholder--color: var(--sf-on-surface)}.sf-input.sf-input--filled .sf-input-field input::-moz-placeholder{--sf-input-placeholder--color: var(--sf-on-surface)}.sf-input.sf-input--filled .sf-input-field input:-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-surface)}.sf-input.sf-input--filled .sf-input-field input::-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-surface)}.sf-input.sf-input--filled .sf-input-field input::placeholder{--sf-input-placeholder--color: var(--sf-on-surface)}.sf-input .sf-input-left{--sf-input-left--background-color: transparent;background-color:var(--sf-input-left--background-color)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-right{padding-right:var(--sf-input-right--padding-inline-end)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-input .sf-input-right{padding-right:var(--sf-input-right--padding-inline-end)}}.sf-input .sf-input-right:where(:dir(ltr)){padding-right:var(--sf-input-right--padding-inline-end)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-right{padding-left:var(--sf-input-right--padding-inline-end)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-input .sf-input-right{padding-left:var(--sf-input-right--padding-inline-end)}}.sf-input .sf-input-right:where(:dir(rtl)){padding-left:var(--sf-input-right--padding-inline-end)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-right{padding-left:var(--sf-input-right--padding-inline-start)}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-input .sf-input-right{padding-left:var(--sf-input-right--padding-inline-start)}}.sf-input .sf-input-right:where(:dir(ltr)){padding-left:var(--sf-input-right--padding-inline-start)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-right{padding-right:var(--sf-input-right--padding-inline-start)}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-input .sf-input-right{padding-right:var(--sf-input-right--padding-inline-start)}}.sf-input .sf-input-right:where(:dir(rtl)){padding-right:var(--sf-input-right--padding-inline-start)}.sf-input .sf-input-right{--sf-input-right--background-color: transparent;background-color:var(--sf-input-right--background-color);-webkit-padding-end:var(--sf-input-right--padding-inline-end);padding-inline-end:var(--sf-input-right--padding-inline-end);-webkit-padding-start:var(--sf-input-right--padding-inline-start);padding-inline-start:var(--sf-input-right--padding-inline-start)}.sf-input .sf-input-text{--sf-input-text--color: var(--sf-on-surface-variant);--sf-input-text--font-family: var(--sf-text--family);--sf-input-text--font-weight: var(--sf-font-weight-regular);color:var(--sf-input-text--color);font-family:var(--sf-input-text--font-family);font-size:var(--sf-input-text--font-size);font-weight:var(--sf-input-text--font-weight);line-height:var(--sf-input-text--line-height)}.sf-input .sf-input-hint-text-wrap{--sf-input-hint-text-wrap--background-color: transparent;background-color:var(--sf-input-hint-text-wrap--background-color);color:var(--sf-input-hint-text-wrap--color);font-family:var(--sf-input-hint-text-wrap--font-family);font-size:var(--sf-input-hint-text-wrap--font-size);font-weight:var(--sf-input-hint-text-wrap--font-weight);gap:var(--sf-b0);line-height:var(--sf-input-hint-text-wrap--line-height)}.sf-input .sf-input-label{--sf-input-label--background-color: transparent;--sf-input-label--gap: var(--sf-space-1\/4);background-color:var(--sf-input-label--background-color);gap:var(--sf-input-label--gap)}.sf-input .sf-input-required{--sf-input-required--color: var(--sf-error);--sf-input-required--font-family: var(--sf-text--family);--sf-input-required--font-weight: var(--sf-font-weight-regular);color:var(--sf-input-required--color);font-family:var(--sf-input-required--font-family);font-size:var(--sf-input-required--font-size);font-weight:var(--sf-input-required--font-weight);line-height:var(--sf-input-required--line-height)}.sf-input.sf-input--size-1 .sf-input-field .sf-input-right .sf-input-text,.sf-input.sf-input--size-2 .sf-input-label .sf-input-text{--sf-input-text--font-size: var(--sf-text-size-1);--sf-input-text--line-height: var(--sf-text-height-1)}.sf-input.sf-input--bordered>.sf-input-field>.sf-input-hint>.sf-icon,.sf-input.sf-input--filled>.sf-input-field>.sf-input-hint>.sf-icon{--sf-icon--color: var(--sf-on-surface-variant)}.sf-input.sf-input--size-1>.sf-input-field>.sf-input-hint>.sf-icon,.sf-input.sf-input--size-1>.sf-input-field>.sf-input-left .sf-icon,.sf-input.sf-input--size-1>.sf-input-field>.sf-icon{--sf-icon--font-size: var(--sf-text-height-1);--sf-icon--height: var(--sf-text-height-1);--sf-icon--width: var(--sf-text-height-1)}.sf-input.sf-input--size-1 .sf-input-field input{--sf-input-input--padding-inline-end: var(--sf-ui-1--text-space-x);--sf-input-input--padding-inline-start: var(--sf-ui-1--text-space-x)}.sf-input.sf-input--size-1 .sf-input-hint-text-wrap{--sf-input-hint-text-wrap--font-size: var(--sf-text-size-1\/2);--sf-input-hint-text-wrap--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1 .sf-input-hint-text-wrap,.sf-input.sf-input--size-2 .sf-input-hint-text-wrap,.sf-input.sf-input--size-1\/2 .sf-input-hint-text-wrap{--sf-input-hint-text-wrap--font-family: var(--sf-text--family);--sf-input-hint-text-wrap--font-weight: var(--sf-font-weight-regular)}.sf-input.sf-input--bordered .sf-input-hint-text-wrap,.sf-input.sf-input--filled .sf-input-hint-text-wrap{--sf-input-hint-text-wrap--color: var(--sf-on-surface-variant)}.sf-input.sf-input--size-1 input{--sf-input-input--font-size: var(--sf-text-size-1);--sf-input-input--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-1 input,.sf-input.sf-input--size-2 input,.sf-input.sf-input--size-1\/2 input{--sf-input-input--font-family: var(--sf-text--family)}.sf-input.sf-input--bordered input,.sf-input.sf-input--filled input{--sf-input-input--color: var(--sf-on-surface)}.sf-input.sf-input--size-1 .sf-input-label .sf-input-text,.sf-input.sf-input--size-1\/2 .sf-input-field .sf-input-right .sf-input-text{--sf-input-text--font-size: var(--sf-text-size-1\/2);--sf-input-text--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1 .sf-input-required{--sf-input-required--font-size: var(--sf-text-size-1\/2);--sf-input-required--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1 .sf-input-right{--sf-input-right--padding-inline-end: var(--sf-ui-1--text-space-x);--sf-input-right--padding-inline-start: var(--sf-ui-1--text-space-x)}.sf-input.error.sf-input--bordered .sf-input-field{--sf-input-field--background-color: var(--sf-transparent-for-focus);--sf-input-field--border-color: var(--sf-error)}.sf-input.error.sf-input--bordered .sf-input-hint-text-wrap,.sf-input.error.sf-input--filled .sf-input-hint-text-wrap{--sf-input-hint-text-wrap--color: var(--sf-error)}.sf-input.error.sf-input--filled .sf-input-field{--sf-input-field--background-color: var(--sf-error-container)}.sf-input.sf-input--size-2 .sf-input-field input{--sf-input-input--padding-inline-end: var(--sf-ui-2--text-space-x);--sf-input-input--padding-inline-start: var(--sf-ui-2--text-space-x)}.sf-input.sf-input--size-2 .sf-input-hint-text-wrap{--sf-input-hint-text-wrap--font-size: var(--sf-text-size-1);--sf-input-hint-text-wrap--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-2 .sf-input-required{--sf-input-required--font-size: var(--sf-text-size-1);--sf-input-required--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-2 .sf-input-right{--sf-input-right--padding-inline-end: var(--sf-ui-2--text-space-x);--sf-input-right--padding-inline-start: var(--sf-ui-2--text-space-x)}.sf-input.sf-input--size-2 .sf-input-field .sf-input-right .sf-input-text{--sf-input-text--font-size: var(--sf-text-size-2);--sf-input-text--line-height: var(--sf-text-height-2)}.sf-input.sf-input--size-2>.sf-input-field>.sf-input-hint>.sf-icon,.sf-input.sf-input--size-2>.sf-input-field>.sf-input-left .sf-icon,.sf-input.sf-input--size-2>.sf-input-field>.sf-icon{--sf-icon--font-size: var(--sf-text-height-2);--sf-icon--height: var(--sf-text-height-2);--sf-icon--width: var(--sf-text-height-2)}.sf-input.sf-input--size-2 input{--sf-input-input--font-size: var(--sf-text-size-2);--sf-input-input--line-height: var(--sf-text-height-2)}.sf-input.sf-input--size-1\/2 .sf-input-label .sf-input-text{--sf-input-text--font-size: var(--sf-text-size-1\/3);--sf-input-text--line-height: var(--sf-text-height-1\/3)}.sf-input.sf-input--size-1\/2>.sf-input-field>.sf-input-hint>.sf-icon,.sf-input.sf-input--size-1\/2>.sf-input-field>.sf-input-left .sf-icon,.sf-input.sf-input--size-1\/2>.sf-input-field>.sf-icon{--sf-icon--font-size: var(--sf-text-height-1\/2);--sf-icon--height: var(--sf-text-height-1\/2);--sf-icon--width: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1\/2 .sf-input-field input{--sf-input-input--padding-inline-end: var(--sf-ui-1\/2--text-space-x);--sf-input-input--padding-inline-start: var(--sf-ui-1\/2--text-space-x)}.sf-input.sf-input--size-1\/2 .sf-input-hint-text-wrap{--sf-input-hint-text-wrap--font-size: var(--sf-text-size-1\/3);--sf-input-hint-text-wrap--line-height: var(--sf-text-height-1\/3)}.sf-input.sf-input--size-1\/2 input{--sf-input-input--font-size: var(--sf-text-size-1\/2);--sf-input-input--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1\/2 .sf-input-required{--sf-input-required--font-size: var(--sf-text-size-1\/3);--sf-input-required--line-height: var(--sf-text-height-1\/3)}.sf-input.sf-input--size-1\/2 .sf-input-right{--sf-input-right--padding-inline-end: var(--sf-ui-1\/2--text-space-x);--sf-input-right--padding-inline-start: var(--sf-ui-1\/2--text-space-x)}.sf-input.sf-input--size-1 .sf-input-field{height:var(--sf-ui-1--control-height);block-size:var(--sf-ui-1--control-height);--sf-input-field--padding-bottom: var(--sf-input-padding-block, calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px)));--sf-input-field--padding-inline-end: var(--sf-input-padding-inline, var(--sf-ui-1--space-x));--sf-input-field--padding-inline-start: var(--sf-input-padding-inline, var(--sf-ui-1--space-x));--sf-input-field--padding-top: var(--sf-input-padding-block, calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px)))}.sf-input.sf-input--size-1 .sf-input-field input::-webkit-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1);--sf-input-placeholder--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-1 .sf-input-field input::-moz-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1);--sf-input-placeholder--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-1 .sf-input-field input:-ms-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1);--sf-input-placeholder--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-1 .sf-input-field input::-ms-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1);--sf-input-placeholder--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-1 .sf-input-field input::placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1);--sf-input-placeholder--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-2 .sf-input-field{height:var(--sf-ui-2--control-height);block-size:var(--sf-ui-2--control-height);--sf-input-field--padding-bottom: var(--sf-input-padding-block, calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-px)));--sf-input-field--padding-inline-end: var(--sf-input-padding-inline, var(--sf-ui-2--space-x));--sf-input-field--padding-inline-start: var(--sf-input-padding-inline, var(--sf-ui-2--space-x));--sf-input-field--padding-top: var(--sf-input-padding-block, calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-px)))}.sf-input.sf-input--size-2 .sf-input-field input::-webkit-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-2);--sf-input-placeholder--line-height: var(--sf-text-height-2)}.sf-input.sf-input--size-2 .sf-input-field input::-moz-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-2);--sf-input-placeholder--line-height: var(--sf-text-height-2)}.sf-input.sf-input--size-2 .sf-input-field input:-ms-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-2);--sf-input-placeholder--line-height: var(--sf-text-height-2)}.sf-input.sf-input--size-2 .sf-input-field input::-ms-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-2);--sf-input-placeholder--line-height: var(--sf-text-height-2)}.sf-input.sf-input--size-2 .sf-input-field input::placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-2);--sf-input-placeholder--line-height: var(--sf-text-height-2)}.sf-input.sf-input--size-1\/2 .sf-input-field{height:var(--sf-ui-1\/2--control-height);block-size:var(--sf-ui-1\/2--control-height);--sf-input-field--padding-bottom: var(--sf-input-padding-block, calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-px)));--sf-input-field--padding-inline-end: var(--sf-input-padding-inline, var(--sf-ui-1\/2--space-x));--sf-input-field--padding-inline-start: var(--sf-input-padding-inline, var(--sf-ui-1\/2--space-x));--sf-input-field--padding-top: var(--sf-input-padding-block, calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-px)))}.sf-input.sf-input--size-1\/2 .sf-input-field input::-webkit-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1\/2);--sf-input-placeholder--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1\/2 .sf-input-field input::-moz-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1\/2);--sf-input-placeholder--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1\/2 .sf-input-field input:-ms-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1\/2);--sf-input-placeholder--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1\/2 .sf-input-field input::-ms-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1\/2);--sf-input-placeholder--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1\/2 .sf-input-field input::placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1\/2);--sf-input-placeholder--line-height: var(--sf-text-height-1\/2)}.sf-input.error>.sf-input-field>.sf-input-hint>.sf-icon{--sf-icon--color: var(--sf-error)}}@layer sf.states{.sf-input:not(.error).sf-input--bordered[\:not-has\(input\:disabled\)] .sf-input-field{--sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-0));--sf-input-field--border-color: var(--sf-input-border-color, var(--sf-outline))}.sf-input:not(.error).sf-input--bordered:not(:has(input:disabled)) .sf-input-field{--sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-0));--sf-input-field--border-color: var(--sf-input-border-color, var(--sf-outline))}.sf-input:not(.error).sf-input--bordered[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] .sf-input-field{--sf-input-field--border-color: var(--sf-primary)}.sf-input:not(.error).sf-input--bordered[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] .sf-input-field{--sf-input-field--border-color: var(--sf-primary)}.sf-input:not(.error).sf-input--bordered:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) .sf-input-field{--sf-input-field--border-color: var(--sf-primary)}.sf-input:not(.error).sf-input--bordered:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):active) .sf-input-field{--sf-input-field--border-color: var(--sf-primary)}.sf-input.sf-input--bordered[\:has\(input\:disabled\)] .sf-input-field{--sf-input-field--border-color: var(--sf-outline-disable)}.sf-input.sf-input--bordered:has(input:disabled) .sf-input-field{--sf-input-field--border-color: var(--sf-outline-disable)}.sf-input.sf-input--bordered[\:has\(input\:disabled\)] input,.sf-input.sf-input--filled[\:has\(input\:disabled\)] input{--sf-input-input--color: var(--sf-on-disable)}.sf-input.sf-input--bordered:has(input:disabled) input,.sf-input.sf-input--filled:has(input:disabled) input{--sf-input-input--color: var(--sf-on-disable)}.sf-input.sf-input--filled[\:has\(input\:disabled\)] .sf-input-field{--sf-input-field--background-color: var(--sf-disable)}.sf-input.sf-input--filled:has(input:disabled) .sf-input-field{--sf-input-field--background-color: var(--sf-disable)}.sf-input:not(.error).sf-input--filled[\:not-has\(input\:disabled\)] .sf-input-field{--sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-container));--sf-on-surface-variant: var(--sf-on-surface-container--variant);--sf-input-field--border-color: var(--sf-input-border-color, var(--sf-transparent-for-focus))}.sf-input:not(.error).sf-input--filled:not(:has(input:disabled)) .sf-input-field{--sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-container));--sf-on-surface-variant: var(--sf-on-surface-container--variant);--sf-input-field--border-color: var(--sf-input-border-color, var(--sf-transparent-for-focus))}.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:hover\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container-hover)}.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:hover\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container-hover)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):hover) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container-hover)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):hover) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container-hover)}.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] .sf-input-field{--sf-input-field--border-color: var(--sf-primary-active)}.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] .sf-input-field{--sf-input-field--border-color: var(--sf-primary-active)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) .sf-input-field{--sf-input-field--border-color: var(--sf-primary-active)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):active) .sf-input-field{--sf-input-field--border-color: var(--sf-primary-active)}.sf-input[\:has\(input\:disabled\)]>.sf-input-field>.sf-input-hint>.sf-icon,.sf-input[\:has\(input\:disabled\)]>.sf-input-field>.sf-input-left .sf-icon{--sf-icon--color: var(--sf-on-disable)}.sf-input:has(input:disabled)>.sf-input-field>.sf-input-hint>.sf-icon,.sf-input:has(input:disabled)>.sf-input-field>.sf-input-left .sf-icon{--sf-icon--color: var(--sf-on-disable)}.sf-input[\:has\(input\:disabled\)] .sf-input-field input::-webkit-input-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input[\:has\(input\:disabled\)] .sf-input-field input::-moz-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input[\:has\(input\:disabled\)] .sf-input-field input:-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input[\:has\(input\:disabled\)] .sf-input-field input::-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input[\:has\(input\:disabled\)] .sf-input-field input::placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input:has(input:disabled) .sf-input-field input::-webkit-input-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input:has(input:disabled) .sf-input-field input::-moz-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input:has(input:disabled) .sf-input-field input:-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input:has(input:disabled) .sf-input-field input::-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input:has(input:disabled) .sf-input-field input::placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input[\:has\(input\:disabled\)] .sf-input-text{--sf-input-text--color: var(--sf-on-disable)}.sf-input:has(input:disabled) .sf-input-text{--sf-input-text--color: var(--sf-on-disable)}.sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:hover\)] .sf-input-field{--sf-input-field--border-color: var(--sf-primary-hover)}.sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:hover\)] .sf-input-field{--sf-input-field--border-color: var(--sf-primary-hover)}.sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):hover) .sf-input-field{--sf-input-field--border-color: var(--sf-primary-hover)}.sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:read-only):hover) .sf-input-field{--sf-input-field--border-color: var(--sf-primary-hover)}.sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:read-only):active) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.sf-input--pointer-focus)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-input-field{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-focus--offset)}.sf-input:not(.sf-input--pointer-focus):has(input:enabled:not(:disabled):not(.disabled).focus-visible) .sf-input-field{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-focus--offset)}.sf-input:not(.sf-input--pointer-focus)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-input-field{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-focus--offset)}.sf-input:not(.sf-input--pointer-focus):has(input:enabled:not(:disabled):not(.disabled):focus-visible) .sf-input-field{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-focus--offset)}.sf-input input.focus-visible{outline:none}.sf-input input:focus-visible{outline:none}.sf-input:not(.error).sf-input--bordered[\:has\(input\:-moz-read-only\:not\(\:disabled\)\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container);--sf-on-surface-variant: var(--sf-on-surface-container--variant)}.sf-input:not(.error).sf-input--bordered[\:has\(input\:read-only\:not\(\:disabled\)\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container);--sf-on-surface-variant: var(--sf-on-surface-container--variant)}.sf-input:not(.error).sf-input--bordered:has(input:-moz-read-only:not(:disabled)) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container);--sf-on-surface-variant: var(--sf-on-surface-container--variant)}.sf-input:not(.error).sf-input--bordered:has(input:read-only:not(:disabled)) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container);--sf-on-surface-variant: var(--sf-on-surface-container--variant)}}@layer sf.states{@media(prefers-reduced-motion: reduce){.sf-input .sf-input-field{transition-duration:0s}}}@layer sf.states{@media(forced-colors: active){.sf-input:not(.sf-input--pointer-focus)[\:has\(input\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-input-field{outline:var(--sf-focus-outline-width) solid currentColor;outline-offset:var(--sf-focus-outline-width);--sf-input-field--box-shadow: none}.sf-input:not(.sf-input--pointer-focus):has(input:not(:disabled):not(.disabled).focus-visible) .sf-input-field{outline:var(--sf-focus-outline-width) solid currentColor;outline-offset:var(--sf-focus-outline-width);--sf-input-field--box-shadow: none}.sf-input:not(.sf-input--pointer-focus)[\:has\(input\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-input-field{outline:var(--sf-focus-outline-width) solid currentColor;outline-offset:var(--sf-focus-outline-width);--sf-input-field--box-shadow: none}.sf-input:not(.sf-input--pointer-focus):has(input:not(:disabled):not(.disabled):focus-visible) .sf-input-field{outline:var(--sf-focus-outline-width) solid currentColor;outline-offset:var(--sf-focus-outline-width);--sf-input-field--box-shadow: none}}}@layer sf.states{.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\[focus-within\]\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\[focus-within\]\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only)[focus-within]) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only)[focus-within]) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:focus-within\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:focus-within\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):focus-within) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):focus-within) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled[\:has\(input\[focus-within\]\)] .sf-input-field{--sf-input-field--border-color: var(--sf-outline)}.sf-input:not(.error).sf-input--filled:has(input[focus-within]) .sf-input-field{--sf-input-field--border-color: var(--sf-outline)}.sf-input:not(.error).sf-input--filled[\:has\(input\:focus-within\)] .sf-input-field{--sf-input-field--border-color: var(--sf-outline)}.sf-input:not(.error).sf-input--filled:has(input:focus-within) .sf-input-field{--sf-input-field--border-color: var(--sf-outline)}}
1
+ @layer sf.components{.sf-input .sf-input-field input{flex:1 1 auto;min-width:0;width:auto}.sf-input .sf-input-right,.sf-input .sf-input-field>.sf-icon,.sf-input .sf-input-field>.sf-icon-hint{flex-shrink:0}}@layer sf.components{.sf-input{min-width:0;min-inline-size:0;--sf-input--radius: var(--sf-input-radius, var(--sf-radius--ui));background-color:transparent;background-color:var(--sf-input--background-color, transparent);gap:var(--sf-space-1\/4);gap:var(--sf-input--gap, var(--sf-space-1\/4))}.sf-input .sf-icon{color:var(--sf-on-surface-variant);color:var(--sf-icon--color, var(--sf-on-surface-variant));font-size:var(--sf-icon-size-3);font-size:var(--sf-icon--font-size, var(--sf-icon-size-3));height:var(--sf-icon-size-3);height:var(--sf-icon--height, var(--sf-icon-size-3));width:var(--sf-icon-size-3);width:var(--sf-icon--width, var(--sf-icon-size-3))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field{border-bottom-right-radius:var(--sf-input-field--border-end-end-radius)}@supports not (border-end-end-radius: initial){html:not([dir="rtl"]) .sf-input .sf-input-field{border-bottom-right-radius:var(--sf-input-field--border-end-end-radius)}}.sf-input .sf-input-field:where(:dir(ltr)){border-bottom-right-radius:var(--sf-input-field--border-end-end-radius)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field{border-bottom-left-radius:var(--sf-input-field--border-end-end-radius)}@supports not (border-end-end-radius: initial){[dir="rtl"] .sf-input .sf-input-field{border-bottom-left-radius:var(--sf-input-field--border-end-end-radius)}}.sf-input .sf-input-field:where(:dir(rtl)){border-bottom-left-radius:var(--sf-input-field--border-end-end-radius)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field{border-bottom-left-radius:var(--sf-input-field--border-end-start-radius)}@supports not (border-end-start-radius: initial){html:not([dir="rtl"]) .sf-input .sf-input-field{border-bottom-left-radius:var(--sf-input-field--border-end-start-radius)}}.sf-input .sf-input-field:where(:dir(ltr)){border-bottom-left-radius:var(--sf-input-field--border-end-start-radius)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field{border-bottom-right-radius:var(--sf-input-field--border-end-start-radius)}@supports not (border-end-start-radius: initial){[dir="rtl"] .sf-input .sf-input-field{border-bottom-right-radius:var(--sf-input-field--border-end-start-radius)}}.sf-input .sf-input-field:where(:dir(rtl)){border-bottom-right-radius:var(--sf-input-field--border-end-start-radius)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field{border-top-right-radius:var(--sf-input-field--border-start-end-radius)}@supports not (border-start-end-radius: initial){html:not([dir="rtl"]) .sf-input .sf-input-field{border-top-right-radius:var(--sf-input-field--border-start-end-radius)}}.sf-input .sf-input-field:where(:dir(ltr)){border-top-right-radius:var(--sf-input-field--border-start-end-radius)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field{border-top-left-radius:var(--sf-input-field--border-start-end-radius)}@supports not (border-start-end-radius: initial){[dir="rtl"] .sf-input .sf-input-field{border-top-left-radius:var(--sf-input-field--border-start-end-radius)}}.sf-input .sf-input-field:where(:dir(rtl)){border-top-left-radius:var(--sf-input-field--border-start-end-radius)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field{border-top-left-radius:var(--sf-input-field--border-start-start-radius)}@supports not (border-start-start-radius: initial){html:not([dir="rtl"]) .sf-input .sf-input-field{border-top-left-radius:var(--sf-input-field--border-start-start-radius)}}.sf-input .sf-input-field:where(:dir(ltr)){border-top-left-radius:var(--sf-input-field--border-start-start-radius)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field{border-top-right-radius:var(--sf-input-field--border-start-start-radius)}@supports not (border-start-start-radius: initial){[dir="rtl"] .sf-input .sf-input-field{border-top-right-radius:var(--sf-input-field--border-start-start-radius)}}.sf-input .sf-input-field:where(:dir(rtl)){border-top-right-radius:var(--sf-input-field--border-start-start-radius)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field{padding-right:var(--sf-input-field--padding-inline-end)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-input .sf-input-field{padding-right:var(--sf-input-field--padding-inline-end)}}.sf-input .sf-input-field:where(:dir(ltr)){padding-right:var(--sf-input-field--padding-inline-end)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field{padding-left:var(--sf-input-field--padding-inline-end)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-input .sf-input-field{padding-left:var(--sf-input-field--padding-inline-end)}}.sf-input .sf-input-field:where(:dir(rtl)){padding-left:var(--sf-input-field--padding-inline-end)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field{padding-left:var(--sf-input-field--padding-inline-start)}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-input .sf-input-field{padding-left:var(--sf-input-field--padding-inline-start)}}.sf-input .sf-input-field:where(:dir(ltr)){padding-left:var(--sf-input-field--padding-inline-start)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field{padding-right:var(--sf-input-field--padding-inline-start)}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-input .sf-input-field{padding-right:var(--sf-input-field--padding-inline-start)}}.sf-input .sf-input-field:where(:dir(rtl)){padding-right:var(--sf-input-field--padding-inline-start)}.sf-input .sf-input-field{min-width:0;min-inline-size:0;--sf-input-field--border: var(--sf-px) solid;--sf-input-field--border-end-end-radius: var(--sf-input--radius);--sf-input-field--border-end-start-radius: var(--sf-input--radius);--sf-input-field--border-start-end-radius: var(--sf-input--radius);--sf-input-field--border-start-start-radius: var(--sf-input--radius);background-color:var(--sf-input-field--background-color);border:0 solid;border:var(--sf-input-field--border, 0 solid);border-color:transparent;border-color:var(--sf-input-field--border-color, transparent);border-end-end-radius:var(--sf-input-field--border-end-end-radius);border-end-start-radius:var(--sf-input-field--border-end-start-radius);border-start-end-radius:var(--sf-input-field--border-start-end-radius);border-start-start-radius:var(--sf-input-field--border-start-start-radius);box-shadow:var(--sf-input-field--box-shadow);padding-bottom:var(--sf-input-field--padding-bottom);-webkit-padding-end:var(--sf-input-field--padding-inline-end);padding-inline-end:var(--sf-input-field--padding-inline-end);-webkit-padding-start:var(--sf-input-field--padding-inline-start);padding-inline-start:var(--sf-input-field--padding-inline-start);padding-top:var(--sf-input-field--padding-top);transition-duration:var(--sf-duration-fast);transition-property:background-color,border-color,box-shadow,color;transition-timing-function:var(--sf-animation)}.sf-input .sf-input-hint{--sf-input-hint--background-color: transparent;background-color:var(--sf-input-hint--background-color)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field input{padding-right:var(--sf-input-input--padding-inline-end)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-input .sf-input-field input{padding-right:var(--sf-input-input--padding-inline-end)}}.sf-input .sf-input-field input:where(:dir(ltr)){padding-right:var(--sf-input-input--padding-inline-end)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field input{padding-left:var(--sf-input-input--padding-inline-end)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-input .sf-input-field input{padding-left:var(--sf-input-input--padding-inline-end)}}.sf-input .sf-input-field input:where(:dir(rtl)){padding-left:var(--sf-input-input--padding-inline-end)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-field input{padding-left:var(--sf-input-input--padding-inline-start)}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-input .sf-input-field input{padding-left:var(--sf-input-input--padding-inline-start)}}.sf-input .sf-input-field input:where(:dir(ltr)){padding-left:var(--sf-input-input--padding-inline-start)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-field input{padding-right:var(--sf-input-input--padding-inline-start)}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-input .sf-input-field input{padding-right:var(--sf-input-input--padding-inline-start)}}.sf-input .sf-input-field input:where(:dir(rtl)){padding-right:var(--sf-input-input--padding-inline-start)}.sf-input .sf-input-field input{min-width:0;min-inline-size:0;--sf-input-input--background-color: transparent;background-color:var(--sf-input-input--background-color);color:var(--sf-input-input--color);color:var(--sf-input-color, var(--sf-input-input--color));font-family:var(--sf-input-input--font-family);font-size:var(--sf-input-input--font-size);line-height:var(--sf-input-input--line-height);-webkit-padding-end:var(--sf-input-input--padding-inline-end);padding-inline-end:var(--sf-input-input--padding-inline-end);-webkit-padding-start:var(--sf-input-input--padding-inline-start);padding-inline-start:var(--sf-input-input--padding-inline-start);height:auto;block-size:auto}.sf-input .sf-input-field input::-webkit-input-placeholder{--sf-input-placeholder--color: var(--sf-on-surface-variant);--sf-input-placeholder--font-family: var(--sf-text--family);color:var(--sf-input-placeholder--color);font-family:var(--sf-input-placeholder--font-family);font-size:var(--sf-input-placeholder--font-size);line-height:var(--sf-input-placeholder--line-height)}.sf-input .sf-input-field input::-moz-placeholder{--sf-input-placeholder--color: var(--sf-on-surface-variant);--sf-input-placeholder--font-family: var(--sf-text--family);color:var(--sf-input-placeholder--color);font-family:var(--sf-input-placeholder--font-family);font-size:var(--sf-input-placeholder--font-size);line-height:var(--sf-input-placeholder--line-height)}.sf-input .sf-input-field input:-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-surface-variant);--sf-input-placeholder--font-family: var(--sf-text--family);color:var(--sf-input-placeholder--color);font-family:var(--sf-input-placeholder--font-family);font-size:var(--sf-input-placeholder--font-size);line-height:var(--sf-input-placeholder--line-height)}.sf-input .sf-input-field input::-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-surface-variant);--sf-input-placeholder--font-family: var(--sf-text--family);color:var(--sf-input-placeholder--color);font-family:var(--sf-input-placeholder--font-family);font-size:var(--sf-input-placeholder--font-size);line-height:var(--sf-input-placeholder--line-height)}.sf-input .sf-input-field input::placeholder{--sf-input-placeholder--color: var(--sf-on-surface-variant);--sf-input-placeholder--font-family: var(--sf-text--family);color:var(--sf-input-placeholder--color);font-family:var(--sf-input-placeholder--font-family);font-size:var(--sf-input-placeholder--font-size);line-height:var(--sf-input-placeholder--line-height)}.sf-input.sf-input--filled .sf-input-field input::-webkit-input-placeholder{--sf-input-placeholder--color: var(--sf-on-surface)}.sf-input.sf-input--filled .sf-input-field input::-moz-placeholder{--sf-input-placeholder--color: var(--sf-on-surface)}.sf-input.sf-input--filled .sf-input-field input:-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-surface)}.sf-input.sf-input--filled .sf-input-field input::-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-surface)}.sf-input.sf-input--filled .sf-input-field input::placeholder{--sf-input-placeholder--color: var(--sf-on-surface)}.sf-input .sf-input-left{--sf-input-left--background-color: transparent;background-color:var(--sf-input-left--background-color)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-right{padding-right:var(--sf-input-right--padding-inline-end)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-input .sf-input-right{padding-right:var(--sf-input-right--padding-inline-end)}}.sf-input .sf-input-right:where(:dir(ltr)){padding-right:var(--sf-input-right--padding-inline-end)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-right{padding-left:var(--sf-input-right--padding-inline-end)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-input .sf-input-right{padding-left:var(--sf-input-right--padding-inline-end)}}.sf-input .sf-input-right:where(:dir(rtl)){padding-left:var(--sf-input-right--padding-inline-end)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-input .sf-input-right{padding-left:var(--sf-input-right--padding-inline-start)}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-input .sf-input-right{padding-left:var(--sf-input-right--padding-inline-start)}}.sf-input .sf-input-right:where(:dir(ltr)){padding-left:var(--sf-input-right--padding-inline-start)}_:-ms-input-placeholder, [dir="rtl"] .sf-input .sf-input-right{padding-right:var(--sf-input-right--padding-inline-start)}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-input .sf-input-right{padding-right:var(--sf-input-right--padding-inline-start)}}.sf-input .sf-input-right:where(:dir(rtl)){padding-right:var(--sf-input-right--padding-inline-start)}.sf-input .sf-input-right{--sf-input-right--background-color: transparent;background-color:var(--sf-input-right--background-color);-webkit-padding-end:var(--sf-input-right--padding-inline-end);padding-inline-end:var(--sf-input-right--padding-inline-end);-webkit-padding-start:var(--sf-input-right--padding-inline-start);padding-inline-start:var(--sf-input-right--padding-inline-start)}.sf-input .sf-input-text{--sf-input-text--color: var(--sf-on-surface-variant);--sf-input-text--font-family: var(--sf-text--family);--sf-input-text--font-weight: var(--sf-font-weight-regular);color:var(--sf-input-text--color);font-family:var(--sf-input-text--font-family);font-size:var(--sf-input-text--font-size);font-weight:var(--sf-input-text--font-weight);line-height:var(--sf-input-text--line-height)}.sf-input .sf-input-hint-text-wrap{--sf-input-hint-text-wrap--background-color: transparent;background-color:var(--sf-input-hint-text-wrap--background-color);color:var(--sf-input-hint-text-wrap--color);font-family:var(--sf-input-hint-text-wrap--font-family);font-size:var(--sf-input-hint-text-wrap--font-size);font-weight:var(--sf-input-hint-text-wrap--font-weight);gap:var(--sf-b0);line-height:var(--sf-input-hint-text-wrap--line-height)}.sf-input .sf-input-label{--sf-input-label--background-color: transparent;--sf-input-label--gap: var(--sf-space-1\/4);background-color:var(--sf-input-label--background-color);gap:var(--sf-input-label--gap)}.sf-input .sf-input-required{--sf-input-required--color: var(--sf-error);--sf-input-required--font-family: var(--sf-text--family);--sf-input-required--font-weight: var(--sf-font-weight-regular);color:var(--sf-input-required--color);font-family:var(--sf-input-required--font-family);font-size:var(--sf-input-required--font-size);font-weight:var(--sf-input-required--font-weight);line-height:var(--sf-input-required--line-height)}.sf-input.sf-input--size-1 .sf-input-field .sf-input-right .sf-input-text,.sf-input.sf-input--size-2 .sf-input-label .sf-input-text{--sf-input-text--font-size: var(--sf-text-size-1);--sf-input-text--line-height: var(--sf-text-height-1)}.sf-input.sf-input--bordered>.sf-input-field>.sf-input-hint>.sf-icon,.sf-input.sf-input--filled>.sf-input-field>.sf-input-hint>.sf-icon{--sf-icon--color: var(--sf-on-surface-variant)}.sf-input.sf-input--size-1>.sf-input-field>.sf-input-hint>.sf-icon,.sf-input.sf-input--size-1>.sf-input-field>.sf-input-left .sf-icon,.sf-input.sf-input--size-1>.sf-input-field>.sf-icon{--sf-icon--font-size: var(--sf-text-height-1);--sf-icon--height: var(--sf-text-height-1);--sf-icon--width: var(--sf-text-height-1)}.sf-input.sf-input--size-1 .sf-input-field input{--sf-input-input--padding-inline-end: var(--sf-ui-1--text-space-x);--sf-input-input--padding-inline-start: var(--sf-ui-1--text-space-x)}.sf-input.sf-input--size-1 .sf-input-hint-text-wrap{--sf-input-hint-text-wrap--font-size: var(--sf-text-size-1\/2);--sf-input-hint-text-wrap--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1 .sf-input-hint-text-wrap,.sf-input.sf-input--size-2 .sf-input-hint-text-wrap,.sf-input.sf-input--size-1\/2 .sf-input-hint-text-wrap{--sf-input-hint-text-wrap--font-family: var(--sf-text--family);--sf-input-hint-text-wrap--font-weight: var(--sf-font-weight-regular)}.sf-input.sf-input--bordered .sf-input-hint-text-wrap,.sf-input.sf-input--filled .sf-input-hint-text-wrap{--sf-input-hint-text-wrap--color: var(--sf-on-surface-variant)}.sf-input.sf-input--size-1 input{--sf-input-input--font-size: var(--sf-text-size-1);--sf-input-input--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-1 input,.sf-input.sf-input--size-2 input,.sf-input.sf-input--size-1\/2 input{--sf-input-input--font-family: var(--sf-text--family)}.sf-input.sf-input--bordered input,.sf-input.sf-input--filled input{--sf-input-input--color: var(--sf-on-surface)}.sf-input.sf-input--size-1 .sf-input-label .sf-input-text,.sf-input.sf-input--size-1\/2 .sf-input-field .sf-input-right .sf-input-text{--sf-input-text--font-size: var(--sf-text-size-1\/2);--sf-input-text--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1 .sf-input-required{--sf-input-required--font-size: var(--sf-text-size-1\/2);--sf-input-required--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1 .sf-input-right{--sf-input-right--padding-inline-end: var(--sf-ui-1--text-space-x);--sf-input-right--padding-inline-start: var(--sf-ui-1--text-space-x)}.sf-input.error.sf-input--bordered .sf-input-field{--sf-input-field--background-color: var(--sf-transparent-for-focus);--sf-input-field--border-color: var(--sf-error)}.sf-input.error.sf-input--bordered .sf-input-hint-text-wrap,.sf-input.error.sf-input--filled .sf-input-hint-text-wrap{--sf-input-hint-text-wrap--color: var(--sf-error)}.sf-input.error.sf-input--filled .sf-input-field{--sf-input-field--background-color: var(--sf-error-container)}.sf-input.sf-input--size-2 .sf-input-field input{--sf-input-input--padding-inline-end: var(--sf-ui-2--text-space-x);--sf-input-input--padding-inline-start: var(--sf-ui-2--text-space-x)}.sf-input.sf-input--size-2 .sf-input-hint-text-wrap{--sf-input-hint-text-wrap--font-size: var(--sf-text-size-1);--sf-input-hint-text-wrap--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-2 .sf-input-required{--sf-input-required--font-size: var(--sf-text-size-1);--sf-input-required--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-2 .sf-input-right{--sf-input-right--padding-inline-end: var(--sf-ui-2--text-space-x);--sf-input-right--padding-inline-start: var(--sf-ui-2--text-space-x)}.sf-input.sf-input--size-2 .sf-input-field .sf-input-right .sf-input-text{--sf-input-text--font-size: var(--sf-text-size-2);--sf-input-text--line-height: var(--sf-text-height-2)}.sf-input.sf-input--size-2>.sf-input-field>.sf-input-hint>.sf-icon,.sf-input.sf-input--size-2>.sf-input-field>.sf-input-left .sf-icon,.sf-input.sf-input--size-2>.sf-input-field>.sf-icon{--sf-icon--font-size: var(--sf-text-height-2);--sf-icon--height: var(--sf-text-height-2);--sf-icon--width: var(--sf-text-height-2)}.sf-input.sf-input--size-2 input{--sf-input-input--font-size: var(--sf-text-size-2);--sf-input-input--line-height: var(--sf-text-height-2)}.sf-input.sf-input--size-1\/2 .sf-input-label .sf-input-text{--sf-input-text--font-size: var(--sf-text-size-1\/3);--sf-input-text--line-height: var(--sf-text-height-1\/3)}.sf-input.sf-input--size-1\/2>.sf-input-field>.sf-input-hint>.sf-icon,.sf-input.sf-input--size-1\/2>.sf-input-field>.sf-input-left .sf-icon,.sf-input.sf-input--size-1\/2>.sf-input-field>.sf-icon{--sf-icon--font-size: var(--sf-text-height-1\/2);--sf-icon--height: var(--sf-text-height-1\/2);--sf-icon--width: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1\/2 .sf-input-field input{--sf-input-input--padding-inline-end: var(--sf-ui-1\/2--text-space-x);--sf-input-input--padding-inline-start: var(--sf-ui-1\/2--text-space-x)}.sf-input.sf-input--size-1\/2 .sf-input-hint-text-wrap{--sf-input-hint-text-wrap--font-size: var(--sf-text-size-1\/3);--sf-input-hint-text-wrap--line-height: var(--sf-text-height-1\/3)}.sf-input.sf-input--size-1\/2 input{--sf-input-input--font-size: var(--sf-text-size-1\/2);--sf-input-input--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1\/2 .sf-input-required{--sf-input-required--font-size: var(--sf-text-size-1\/3);--sf-input-required--line-height: var(--sf-text-height-1\/3)}.sf-input.sf-input--size-1\/2 .sf-input-right{--sf-input-right--padding-inline-end: var(--sf-ui-1\/2--text-space-x);--sf-input-right--padding-inline-start: var(--sf-ui-1\/2--text-space-x)}.sf-input.sf-input--size-1 .sf-input-field{height:var(--sf-ui-1--control-height);block-size:var(--sf-ui-1--control-height);--sf-input-field--padding-bottom: var(--sf-input-padding-block, calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px)));--sf-input-field--padding-inline-end: var(--sf-input-padding-inline, var(--sf-ui-1--space-x));--sf-input-field--padding-inline-start: var(--sf-input-padding-inline, var(--sf-ui-1--space-x));--sf-input-field--padding-top: var(--sf-input-padding-block, calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px)))}.sf-input.sf-input--size-1 .sf-input-field input::-webkit-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1);--sf-input-placeholder--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-1 .sf-input-field input::-moz-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1);--sf-input-placeholder--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-1 .sf-input-field input:-ms-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1);--sf-input-placeholder--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-1 .sf-input-field input::-ms-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1);--sf-input-placeholder--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-1 .sf-input-field input::placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1);--sf-input-placeholder--line-height: var(--sf-text-height-1)}.sf-input.sf-input--size-2 .sf-input-field{height:var(--sf-ui-2--control-height);block-size:var(--sf-ui-2--control-height);--sf-input-field--padding-bottom: var(--sf-input-padding-block, calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-px)));--sf-input-field--padding-inline-end: var(--sf-input-padding-inline, var(--sf-ui-2--space-x));--sf-input-field--padding-inline-start: var(--sf-input-padding-inline, var(--sf-ui-2--space-x));--sf-input-field--padding-top: var(--sf-input-padding-block, calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-px)))}.sf-input.sf-input--size-2 .sf-input-field input::-webkit-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-2);--sf-input-placeholder--line-height: var(--sf-text-height-2)}.sf-input.sf-input--size-2 .sf-input-field input::-moz-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-2);--sf-input-placeholder--line-height: var(--sf-text-height-2)}.sf-input.sf-input--size-2 .sf-input-field input:-ms-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-2);--sf-input-placeholder--line-height: var(--sf-text-height-2)}.sf-input.sf-input--size-2 .sf-input-field input::-ms-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-2);--sf-input-placeholder--line-height: var(--sf-text-height-2)}.sf-input.sf-input--size-2 .sf-input-field input::placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-2);--sf-input-placeholder--line-height: var(--sf-text-height-2)}.sf-input.sf-input--size-1\/2 .sf-input-field{height:var(--sf-ui-1\/2--control-height);block-size:var(--sf-ui-1\/2--control-height);--sf-input-field--padding-bottom: var(--sf-input-padding-block, calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-px)));--sf-input-field--padding-inline-end: var(--sf-input-padding-inline, var(--sf-ui-1\/2--space-x));--sf-input-field--padding-inline-start: var(--sf-input-padding-inline, var(--sf-ui-1\/2--space-x));--sf-input-field--padding-top: var(--sf-input-padding-block, calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-px)))}.sf-input.sf-input--size-1\/2 .sf-input-field input::-webkit-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1\/2);--sf-input-placeholder--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1\/2 .sf-input-field input::-moz-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1\/2);--sf-input-placeholder--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1\/2 .sf-input-field input:-ms-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1\/2);--sf-input-placeholder--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1\/2 .sf-input-field input::-ms-input-placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1\/2);--sf-input-placeholder--line-height: var(--sf-text-height-1\/2)}.sf-input.sf-input--size-1\/2 .sf-input-field input::placeholder{--sf-input-placeholder--font-size: var(--sf-text-size-1\/2);--sf-input-placeholder--line-height: var(--sf-text-height-1\/2)}.sf-input.error>.sf-input-field>.sf-input-hint>.sf-icon{--sf-icon--color: var(--sf-error)}}@layer sf.states{.sf-input:not(.error).sf-input--bordered[\:not-has\(input\:disabled\)] .sf-input-field{--sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-0));--sf-input-field--border-color: var(--sf-input-border-color, var(--sf-outline))}.sf-input:not(.error).sf-input--bordered:not(:has(input:disabled)) .sf-input-field{--sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-0));--sf-input-field--border-color: var(--sf-input-border-color, var(--sf-outline))}.sf-input:not(.error).sf-input--bordered[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] .sf-input-field{--sf-input-field--border-color: var(--sf-primary)}.sf-input:not(.error).sf-input--bordered[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] .sf-input-field{--sf-input-field--border-color: var(--sf-primary)}.sf-input:not(.error).sf-input--bordered:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) .sf-input-field{--sf-input-field--border-color: var(--sf-primary)}.sf-input:not(.error).sf-input--bordered:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):active) .sf-input-field{--sf-input-field--border-color: var(--sf-primary)}.sf-input.sf-input--bordered[\:has\(input\:disabled\)] .sf-input-field{--sf-input-field--border-color: var(--sf-outline-disable)}.sf-input.sf-input--bordered:has(input:disabled) .sf-input-field{--sf-input-field--border-color: var(--sf-outline-disable)}.sf-input.sf-input--bordered[\:has\(input\:disabled\)] input,.sf-input.sf-input--filled[\:has\(input\:disabled\)] input{--sf-input-input--color: var(--sf-on-disable)}.sf-input.sf-input--bordered:has(input:disabled) input,.sf-input.sf-input--filled:has(input:disabled) input{--sf-input-input--color: var(--sf-on-disable)}.sf-input.sf-input--filled[\:has\(input\:disabled\)] .sf-input-field{--sf-input-field--background-color: var(--sf-disable)}.sf-input.sf-input--filled:has(input:disabled) .sf-input-field{--sf-input-field--background-color: var(--sf-disable)}.sf-input:not(.error).sf-input--filled[\:not-has\(input\:disabled\)] .sf-input-field{--sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-container));--sf-on-surface-variant: var(--sf-on-surface-container--variant);--sf-input-field--border-color: var(--sf-input-border-color, var(--sf-transparent-for-focus))}.sf-input:not(.error).sf-input--filled:not(:has(input:disabled)) .sf-input-field{--sf-input-field--background-color: var(--sf-input-background-color, var(--sf-surface-container));--sf-on-surface-variant: var(--sf-on-surface-container--variant);--sf-input-field--border-color: var(--sf-input-border-color, var(--sf-transparent-for-focus))}.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:hover\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container-hover)}.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:hover\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container-hover)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):hover) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container-hover)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):hover) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container-hover)}.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] .sf-input-field{--sf-input-field--border-color: var(--sf-primary-active)}.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] .sf-input-field{--sf-input-field--border-color: var(--sf-primary-active)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) .sf-input-field{--sf-input-field--border-color: var(--sf-primary-active)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):active) .sf-input-field{--sf-input-field--border-color: var(--sf-primary-active)}.sf-input[\:has\(input\:disabled\)]>.sf-input-field>.sf-input-hint>.sf-icon,.sf-input[\:has\(input\:disabled\)]>.sf-input-field>.sf-input-left .sf-icon{--sf-icon--color: var(--sf-on-disable)}.sf-input:has(input:disabled)>.sf-input-field>.sf-input-hint>.sf-icon,.sf-input:has(input:disabled)>.sf-input-field>.sf-input-left .sf-icon{--sf-icon--color: var(--sf-on-disable)}.sf-input[\:has\(input\:disabled\)] .sf-input-field input::-webkit-input-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input[\:has\(input\:disabled\)] .sf-input-field input::-moz-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input[\:has\(input\:disabled\)] .sf-input-field input:-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input[\:has\(input\:disabled\)] .sf-input-field input::-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input[\:has\(input\:disabled\)] .sf-input-field input::placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input:has(input:disabled) .sf-input-field input::-webkit-input-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input:has(input:disabled) .sf-input-field input::-moz-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input:has(input:disabled) .sf-input-field input:-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input:has(input:disabled) .sf-input-field input::-ms-input-placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input:has(input:disabled) .sf-input-field input::placeholder{--sf-input-placeholder--color: var(--sf-on-disable)}.sf-input[\:has\(input\:disabled\)] .sf-input-text{--sf-input-text--color: var(--sf-on-disable)}.sf-input:has(input:disabled) .sf-input-text{--sf-input-text--color: var(--sf-on-disable)}.sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:hover\)] .sf-input-field{--sf-input-field--border-color: var(--sf-primary-hover)}.sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:hover\)] .sf-input-field{--sf-input-field--border-color: var(--sf-primary-hover)}.sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):hover) .sf-input-field{--sf-input-field--border-color: var(--sf-primary-hover)}.sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:read-only):hover) .sf-input-field{--sf-input-field--border-color: var(--sf-primary-hover)}.sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:active\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:active\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):active) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error):has(input:enabled:not(:disabled):not(.disabled):not(:read-only):active) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.sf-input--pointer-focus)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-input-field{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-focus--offset)}.sf-input:not(.sf-input--pointer-focus):has(input:enabled:not(:disabled):not(.disabled).focus-visible) .sf-input-field{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-focus--offset)}.sf-input:not(.sf-input--pointer-focus)[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-input-field{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-focus--offset)}.sf-input:not(.sf-input--pointer-focus):has(input:enabled:not(:disabled):not(.disabled):focus-visible) .sf-input-field{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:var(--sf-focus--offset)}.sf-input input.focus-visible{outline:none}.sf-input input:focus-visible{outline:none}.sf-input:not(.error).sf-input--bordered[\:has\(input\:-moz-read-only\:not\(\:disabled\)\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container);--sf-on-surface-variant: var(--sf-on-surface-container--variant)}.sf-input:not(.error).sf-input--bordered[\:has\(input\:read-only\:not\(\:disabled\)\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container);--sf-on-surface-variant: var(--sf-on-surface-container--variant)}.sf-input:not(.error).sf-input--bordered:has(input:-moz-read-only:not(:disabled)) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container);--sf-on-surface-variant: var(--sf-on-surface-container--variant)}.sf-input:not(.error).sf-input--bordered:has(input:read-only:not(:disabled)) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-container);--sf-on-surface-variant: var(--sf-on-surface-container--variant)}}@layer sf.states{@media(prefers-reduced-motion: reduce){.sf-input .sf-input-field{transition-duration:0s}}}@layer sf.states{@media(forced-colors: active){.sf-input:not(.sf-input--pointer-focus)[\:has\(input\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-input-field{outline:var(--sf-focus-outline-width) solid currentColor;outline-offset:var(--sf-focus-outline-width);--sf-input-field--box-shadow: none}.sf-input:not(.sf-input--pointer-focus):has(input:not(:disabled):not(.disabled).focus-visible) .sf-input-field{outline:var(--sf-focus-outline-width) solid currentColor;outline-offset:var(--sf-focus-outline-width);--sf-input-field--box-shadow: none}.sf-input:not(.sf-input--pointer-focus)[\:has\(input\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-input-field{outline:var(--sf-focus-outline-width) solid currentColor;outline-offset:var(--sf-focus-outline-width);--sf-input-field--box-shadow: none}.sf-input:not(.sf-input--pointer-focus):has(input:not(:disabled):not(.disabled):focus-visible) .sf-input-field{outline:var(--sf-focus-outline-width) solid currentColor;outline-offset:var(--sf-focus-outline-width);--sf-input-field--box-shadow: none}}}@layer sf.states{.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\[focus-within\]\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\[focus-within\]\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only)[focus-within]) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only)[focus-within]) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:-moz-read-only\)\:focus-within\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:not\(\:read-only\)\:focus-within\)] .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:-moz-read-only):focus-within) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled:has(input:enabled:not(:disabled):not(.disabled):not(:read-only):focus-within) .sf-input-field{--sf-input-field--background-color: var(--sf-surface-0)}.sf-input:not(.error).sf-input--filled[\:has\(input\[focus-within\]\)] .sf-input-field{--sf-input-field--border-color: var(--sf-outline)}.sf-input:not(.error).sf-input--filled:has(input[focus-within]) .sf-input-field{--sf-input-field--border-color: var(--sf-outline)}.sf-input:not(.error).sf-input--filled[\:has\(input\:focus-within\)] .sf-input-field{--sf-input-field--border-color: var(--sf-outline)}.sf-input:not(.error).sf-input--filled:has(input:focus-within) .sf-input-field{--sf-input-field--border-color: var(--sf-outline)}}
package/distr/component/tabs/css/tabs.min.css CHANGED
@@ -1 +1 @@
1
- @layer sf.components{.sf-tabs{background-color:transparent;background-color:var(--sf-tabs--background-color, transparent);min-width:0;min-inline-size:0;max-width:100%;max-inline-size:100%}.sf-tabs>.sf-tabs-top-container,.sf-tabs>.sf-tabs-main-container,.sf-tabs>.sf-tabs-top-container>.sf-tabs-top{min-width:0;min-inline-size:0;max-width:100%;max-inline-size:100%}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button{min-width:0;min-inline-size:0;max-width:100%;max-inline-size:100%;flex-shrink:0}.sf-tabs:not(.sf-tabs--vertical)>.sf-tabs-top-container>.sf-tabs-top{overflow-x:auto}@media(prefers-reduced-motion: reduce){.sf-tabs>.sf-tabs-top-container>.sf-tabs-top{scroll-behavior:auto}}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button-text-container{min-width:0;min-inline-size:0;white-space:normal;word-wrap:anywhere}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon{flex-shrink:0}.sf-tabs.sf-tabs--vertical{-webkit-column-gap:var(--sf-space-2);-moz-column-gap:var(--sf-space-2);column-gap:var(--sf-space-2);-webkit-column-gap:var(--sf-tabs--gap, var(--sf-space-2));-moz-column-gap:var(--sf-tabs--gap, var(--sf-space-2));column-gap:var(--sf-tabs--gap, var(--sf-space-2))}.sf-tabs-top{margin:0;margin:var(--sf-tabs-top--margin, 0);border-width:0;border-width:var(--sf-tabs-top--border-width, 0);border-style:solid;border-style:var(--sf-tabs-top--border-style, solid);border-color:transparent;border-color:var(--sf-tabs-top--border-color, transparent);gap:var(--sf-space-1);gap:var(--sf-tabs-top--gap, var(--sf-tabs-gap, var(--sf-space-1)))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tabs-main-container{padding-right:0;padding-right:var(--sf-tabs-main-container--padding-inline-end, 0)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-tabs-main-container{padding-right:0;padding-right:var(--sf-tabs-main-container--padding-inline-end, 0)}}.sf-tabs-main-container:where(:dir(ltr)){padding-right:0;padding-right:var(--sf-tabs-main-container--padding-inline-end, 0)}_:-ms-input-placeholder, [dir="rtl"] .sf-tabs-main-container{padding-left:0;padding-left:var(--sf-tabs-main-container--padding-inline-end, 0)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-tabs-main-container{padding-left:0;padding-left:var(--sf-tabs-main-container--padding-inline-end, 0)}}.sf-tabs-main-container:where(:dir(rtl)){padding-left:0;padding-left:var(--sf-tabs-main-container--padding-inline-end, 0)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tabs-main-container{padding-left:0;padding-left:var(--sf-tabs-main-container--padding-inline-start, 0)}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-tabs-main-container{padding-left:0;padding-left:var(--sf-tabs-main-container--padding-inline-start, 0)}}.sf-tabs-main-container:where(:dir(ltr)){padding-left:0;padding-left:var(--sf-tabs-main-container--padding-inline-start, 0)}_:-ms-input-placeholder, [dir="rtl"] .sf-tabs-main-container{padding-right:0;padding-right:var(--sf-tabs-main-container--padding-inline-start, 0)}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-tabs-main-container{padding-right:0;padding-right:var(--sf-tabs-main-container--padding-inline-start, 0)}}.sf-tabs-main-container:where(:dir(rtl)){padding-right:0;padding-right:var(--sf-tabs-main-container--padding-inline-start, 0)}.sf-tabs-main-container{-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-end:var(--sf-tabs-main-container--padding-inline-end, 0);padding-inline-end:var(--sf-tabs-main-container--padding-inline-end, 0);-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-start:var(--sf-tabs-main-container--padding-inline-start, 0);padding-inline-start:var(--sf-tabs-main-container--padding-inline-start, 0);padding-top:var(--sf-space-1);padding-top:var(--sf-tabs-main-container--padding-top, var(--sf-space-1));padding-bottom:var(--sf-space-1);padding-bottom:var(--sf-tabs-main-container--padding-bottom, var(--sf-space-1))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tabs-top-container{padding-right:0;padding-right:var(--sf-tabs-top-container--padding-inline-end, 0)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-tabs-top-container{padding-right:0;padding-right:var(--sf-tabs-top-container--padding-inline-end, 0)}}.sf-tabs-top-container:where(:dir(ltr)){padding-right:0;padding-right:var(--sf-tabs-top-container--padding-inline-end, 0)}_:-ms-input-placeholder, [dir="rtl"] .sf-tabs-top-container{padding-left:0;padding-left:var(--sf-tabs-top-container--padding-inline-end, 0)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-tabs-top-container{padding-left:0;padding-left:var(--sf-tabs-top-container--padding-inline-end, 0)}}.sf-tabs-top-container:where(:dir(rtl)){padding-left:0;padding-left:var(--sf-tabs-top-container--padding-inline-end, 0)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tabs-top-container{padding-left:0;padding-left:var(--sf-tabs-top-container--padding-inline-start, 0)}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-tabs-top-container{padding-left:0;padding-left:var(--sf-tabs-top-container--padding-inline-start, 0)}}.sf-tabs-top-container:where(:dir(ltr)){padding-left:0;padding-left:var(--sf-tabs-top-container--padding-inline-start, 0)}_:-ms-input-placeholder, [dir="rtl"] .sf-tabs-top-container{padding-right:0;padding-right:var(--sf-tabs-top-container--padding-inline-start, 0)}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-tabs-top-container{padding-right:0;padding-right:var(--sf-tabs-top-container--padding-inline-start, 0)}}.sf-tabs-top-container:where(:dir(rtl)){padding-right:0;padding-right:var(--sf-tabs-top-container--padding-inline-start, 0)}.sf-tabs-top-container{border-width:0 0 var(--sf-px) 0;border-width:var(--sf-tabs-top-container--border-width, 0 0 var(--sf-tabs-border-width, var(--sf-tabs--border-width, var(--sf-px))) 0);border-style:solid;border-style:var(--sf-tabs-top-container--border-style, solid);border-color:var(--sf-outline-variant);border-color:var(--sf-tabs-top-container--border-color, var(--sf-tabs-border-color, var(--sf-outline-variant)));-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-end:var(--sf-tabs-top-container--padding-inline-end, 0);padding-inline-end:var(--sf-tabs-top-container--padding-inline-end, 0);-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-start:var(--sf-tabs-top-container--padding-inline-start, 0);padding-inline-start:var(--sf-tabs-top-container--padding-inline-start, 0);padding-top:0;padding-top:var(--sf-tabs-top-container--padding-top, 0);padding-bottom:0;padding-bottom:var(--sf-tabs-top-container--padding-bottom, 0)}.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top{--sf-tabs-top--margin: 0 0 calc(var(--sf-tabs-border-width, var(--sf-tabs--border-width, var(--sf-px))) * -1) 0}.sf-tabs--pills>.sf-tabs-top-container,.sf-tabs--full>.sf-tabs-top-container,.sf-tabs.sf-tabs--vertical>.sf-tabs-top-container{--sf-tabs-top-container--border-color: transparent;--sf-tabs-top-container--border-width: 0}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top{--sf-tabs-top--gap: 0;flex:1}}@layer sf.overrides{.sf-tabs-top .sf-button,.sf-tabs-top .sf-icon-button{--sf-tabs--focus-ink: var(--sf-on-surface);--sf-button--border-bottom-right-radius: var(--sf-radius-square);--sf-button--border-bottom-left-radius: var(--sf-radius-square);--sf-button--border-top-right-radius: var(--sf-radius--ui);--sf-button--border-top-left-radius: var(--sf-radius--ui);--sf-icon-button--border-bottom-right-radius: var(--sf-radius-square);--sf-icon-button--border-bottom-left-radius: var(--sf-radius-square);--sf-icon-button--border-top-right-radius: var(--sf-radius--ui);--sf-icon-button--border-top-left-radius: var(--sf-radius--ui)}.sf-tabs--pills>.sf-tabs-top-container>.sf-tabs-top .sf-button,.sf-tabs--pills>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{--sf-button--border-bottom-right-radius: var(--sf-radius-rounded);--sf-button--border-bottom-left-radius: var(--sf-radius-rounded);--sf-button--border-top-right-radius: var(--sf-radius-rounded);--sf-button--border-top-left-radius: var(--sf-radius-rounded);--sf-icon-button--border-bottom-right-radius: var(--sf-radius-rounded);--sf-icon-button--border-bottom-left-radius: var(--sf-radius-rounded);--sf-icon-button--border-top-right-radius: var(--sf-radius-rounded);--sf-icon-button--border-top-left-radius: var(--sf-radius-rounded)}.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button,.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{--sf-button--border-top-width: 0;--sf-button--border-inline-start-width: 0;--sf-button--border-bottom-width: var(--sf-tabs-indicator-width, calc(var(--sf-tabs--border-width, var(--sf-px)) * 2));--sf-button--border-inline-end-width: 0;--sf-icon-button--border-top-width: 0;--sf-icon-button--border-inline-start-width: 0;--sf-icon-button--border-bottom-width: var(--sf-tabs-indicator-width, calc(var(--sf-tabs--border-width, var(--sf-px)) * 2));--sf-icon-button--border-inline-end-width: 0}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{flex:1 0 0;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;min-inline-size:-webkit-max-content;min-inline-size:-moz-max-content;min-inline-size:max-content;--sf-button--border-top-width: var(--sf-tabs--border-width, var(--sf-px));--sf-button--border-inline-start-width: var(--sf-tabs--border-width, var(--sf-px));--sf-button--border-bottom-width: var(--sf-tabs--border-width, var(--sf-px));--sf-button--border-inline-end-width: var(--sf-tabs--border-width, var(--sf-px));--sf-button--border-bottom-right-radius: var(--sf-radius-square);--sf-button--border-bottom-left-radius: var(--sf-radius-square);--sf-button--border-top-right-radius: var(--sf-radius-square);--sf-button--border-top-left-radius: var(--sf-radius-square);--sf-icon-button--border-top-width: var(--sf-tabs--border-width, var(--sf-px));--sf-icon-button--border-inline-start-width: var(--sf-tabs--border-width, var(--sf-px));--sf-icon-button--border-bottom-width: var(--sf-tabs--border-width, var(--sf-px));--sf-icon-button--border-inline-end-width: var(--sf-tabs--border-width, var(--sf-px));--sf-icon-button--border-color: var(--sf-primary-active);--sf-button--border-color: var(--sf-primary-active);--sf-icon-button--border-bottom-right-radius: var(--sf-radius-square);--sf-icon-button--border-bottom-left-radius: var(--sf-radius-square);--sf-icon-button--border-top-right-radius: var(--sf-radius-square);--sf-icon-button--border-top-left-radius: var(--sf-radius-square)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-button+.sf-button{--sf-button--border-inline-start-width: 0;--sf-icon-button--border-inline-start-width: 0}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-button+.sf-icon-button{--sf-button--border-inline-start-width: 0;--sf-icon-button--border-inline-start-width: 0}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-icon-button+.sf-button{--sf-button--border-inline-start-width: 0;--sf-icon-button--border-inline-start-width: 0}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-icon-button+.sf-icon-button{--sf-button--border-inline-start-width: 0;--sf-icon-button--border-inline-start-width: 0}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-button:first-child,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>:first-child .sf-button:first-child,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-icon-button:first-child,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>:first-child .sf-icon-button:first-child{--sf-button--border-top-left-radius: var(--sf-radius--ui);--sf-button--border-bottom-left-radius: var(--sf-radius--ui);--sf-icon-button--border-top-left-radius: var(--sf-radius--ui);--sf-icon-button--border-bottom-left-radius: var(--sf-radius--ui)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-button:last-child,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>:last-child .sf-button:last-child,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-icon-button:last-child,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>:last-child .sf-icon-button:last-child{--sf-button--border-top-right-radius: var(--sf-radius--ui);--sf-button--border-bottom-right-radius: var(--sf-radius--ui);--sf-icon-button--border-top-right-radius: var(--sf-radius--ui);--sf-icon-button--border-bottom-right-radius: var(--sf-radius--ui)}.sf-tabs--vertical>.sf-tabs-top-container>.sf-tabs-top .sf-button,.sf-tabs--vertical>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{--sf-button--border-bottom-right-radius: var(--sf-radius--ui);--sf-button--border-bottom-left-radius: var(--sf-radius--ui);--sf-button--border-top-right-radius: var(--sf-radius--ui);--sf-button--border-top-left-radius: var(--sf-radius--ui);--sf-icon-button--border-bottom-right-radius: var(--sf-radius--ui);--sf-icon-button--border-bottom-left-radius: var(--sf-radius--ui);--sf-icon-button--border-top-right-radius: var(--sf-radius--ui);--sf-icon-button--border-top-left-radius: var(--sf-radius--ui)}}@layer sf.states{.sf-tabs-top .sf-button--default.sf-button--primary{--sf-tabs--focus-ink: var(--sf-on-primary)}.sf-tabs-top .sf-icon-button--default.sf-icon-button--primary{--sf-tabs--focus-ink: var(--sf-on-primary)}.sf-tabs-top .sf-button--default.sf-button--on-surface{--sf-tabs--focus-ink: var(--sf-on-surface-inverse)}.sf-tabs-top .sf-icon-button--default.sf-icon-button--on-surface{--sf-tabs--focus-ink: var(--sf-on-surface-inverse)}.sf-tabs-top .sf-button--tonal.sf-button--secondary{--sf-tabs--focus-ink: var(--sf-on-secondary-container)}.sf-tabs-top .sf-icon-button--tonal.sf-icon-button--secondary{--sf-tabs--focus-ink: var(--sf-on-secondary-container)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):hover{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):active{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected.focus-visible:not(:disabled):not(.disabled){--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):hover{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):active{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected.focus-visible:not(:disabled):not(.disabled){--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled),.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled){--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):hover{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):active{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled).focus-visible{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):focus-visible{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):hover{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):active{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled).focus-visible{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):focus-visible{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled),.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled){--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled) .sf-button-text-container{--sf-button-text-container--color: var(--sf-on-primary)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled) .sf-icon,.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled) .sf-icon{--sf-icon--color: var(--sf-on-primary)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):hover{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):active{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected.focus-visible:not(:disabled):not(.disabled){--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):hover{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):active{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected.focus-visible:not(:disabled):not(.disabled){--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled),.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled){--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):hover{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):active{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled).focus-visible{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):focus-visible{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):hover{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):active{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled).focus-visible{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):focus-visible{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled),.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled){--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled) .sf-button-text-container,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled) .sf-button-text-container{--sf-button-text-container--color: var(--sf-tabs-color, var(--sf-on-surface))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled) .sf-icon,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled) .sf-icon{--sf-icon--color: var(--sf-tabs-color, var(--sf-on-surface))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled),.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled),.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled),.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled){--sf-button--background-color: var(--sf-transparent);--sf-icon-button--background-color: var(--sf-transparent)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled) .sf-icon,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled) .sf-icon{--sf-icon--color: var(--sf-tabs-color, var(--sf-on-surface))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled) .sf-icon,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled) .sf-icon{--sf-icon--color: var(--sf-on-surface-active)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled) .sf-button-text-container{--sf-button-text-container--color: var(--sf-on-surface-active)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled),.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled){--sf-icon-button--border-color: var(--sf-primary-active);--sf-button--border-color: var(--sf-primary-active)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled).focus-visible,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled).focus-visible,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):hover{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-icon-button--border-color: var(--sf-primary-hover);--sf-button--border-color: var(--sf-primary-hover);--sf-icon-button--background-color: var(--sf-primary-hover);--sf-button--background-color: var(--sf-primary-hover)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):focus-visible,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):focus-visible,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):hover{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-icon-button--border-color: var(--sf-primary-hover);--sf-button--border-color: var(--sf-primary-hover);--sf-icon-button--background-color: var(--sf-primary-hover);--sf-button--background-color: var(--sf-primary-hover)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled).focus-visible .sf-button-text-container,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover .sf-button-text-container{--sf-button-text-container--color: var(--sf-on-primary)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):focus-visible .sf-button-text-container,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover .sf-button-text-container{--sf-button-text-container--color: var(--sf-on-primary)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled).focus-visible .sf-icon,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover .sf-icon,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled).focus-visible .sf-icon,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):hover .sf-icon{--sf-icon--color: var(--sf-on-primary)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):focus-visible .sf-icon,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover .sf-icon,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):focus-visible .sf-icon,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):hover .sf-icon{--sf-icon--color: var(--sf-on-primary)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled).focus-visible,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled).focus-visible,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):hover{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-outline-variant);--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-outline-variant)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):focus-visible,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):focus-visible,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):hover{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-outline-variant);--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-outline-variant)}.sf-tabs-top .sf-button.focus-visible:not(:disabled):not(.disabled){--sf-focus--color: var(--sf-tabs--focus-color, var(--sf-tabs--focus-ink));outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-icon-button.focus-visible:not(:disabled):not(.disabled){--sf-focus--color: var(--sf-tabs--focus-color, var(--sf-tabs--focus-ink));outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-button:not(:disabled):not(.disabled).focus-visible{--sf-focus--color: var(--sf-tabs--focus-color, var(--sf-tabs--focus-ink));outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-button:not(:disabled):not(.disabled):focus-visible{--sf-focus--color: var(--sf-tabs--focus-color, var(--sf-tabs--focus-ink));outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-icon-button:not(:disabled):not(.disabled).focus-visible{--sf-focus--color: var(--sf-tabs--focus-color, var(--sf-tabs--focus-ink));outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-icon-button:not(:disabled):not(.disabled):focus-visible{--sf-focus--color: var(--sf-tabs--focus-color, var(--sf-tabs--focus-ink));outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.focus-visible:not(:disabled):not(.disabled){--sf-tabs--focus-ink: var(--sf-on-surface)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.focus-visible:not(:disabled):not(.disabled){--sf-tabs--focus-ink: var(--sf-on-surface)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(:disabled):not(.disabled).focus-visible{--sf-tabs--focus-ink: var(--sf-on-surface)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(:disabled):not(.disabled):focus-visible{--sf-tabs--focus-ink: var(--sf-on-surface)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(:disabled):not(.disabled).focus-visible{--sf-tabs--focus-ink: var(--sf-on-surface)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(:disabled):not(.disabled):focus-visible{--sf-tabs--focus-ink: var(--sf-on-surface)}@media(forced-colors: active){.sf-tabs-top .sf-button.focus-visible:not(:disabled):not(.disabled){outline:var(--sf-focus--width) solid currentColor;outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-icon-button.focus-visible:not(:disabled):not(.disabled){outline:var(--sf-focus--width) solid currentColor;outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-button:not(:disabled):not(.disabled).focus-visible{outline:var(--sf-focus--width) solid currentColor;outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-button:not(:disabled):not(.disabled):focus-visible{outline:var(--sf-focus--width) solid currentColor;outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-icon-button:not(:disabled):not(.disabled).focus-visible{outline:var(--sf-focus--width) solid currentColor;outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-icon-button:not(:disabled):not(.disabled):focus-visible{outline:var(--sf-focus--width) solid currentColor;outline-offset:calc(var(--sf-focus--width)*-1)}}}@layer sf.components{.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button{padding-bottom:calc(var(--sf-button--padding-bottom) - var(--sf-button--border-bottom-width));-webkit-padding-after:calc(var(--sf-button--padding-bottom) - var(--sf-button--border-bottom-width));padding-block-end:calc(var(--sf-button--padding-bottom) - var(--sf-button--border-bottom-width))}.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{padding-bottom:calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width));-webkit-padding-after:calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width));padding-block-end:calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width))}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button{padding-top:calc(var(--sf-button--padding-top) - var(--sf-button--border-top-width));-webkit-padding-before:calc(var(--sf-button--padding-top) - var(--sf-button--border-top-width));padding-block-start:calc(var(--sf-button--padding-top) - var(--sf-button--border-top-width));padding-bottom:calc(var(--sf-button--padding-bottom) - var(--sf-button--border-bottom-width));-webkit-padding-after:calc(var(--sf-button--padding-bottom) - var(--sf-button--border-bottom-width));padding-block-end:calc(var(--sf-button--padding-bottom) - var(--sf-button--border-bottom-width))}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{padding-top:calc(var(--sf-icon-button--padding-top) - var(--sf-icon-button--border-top-width));-webkit-padding-before:calc(var(--sf-icon-button--padding-top) - var(--sf-icon-button--border-top-width));padding-block-start:calc(var(--sf-icon-button--padding-top) - var(--sf-icon-button--border-top-width));padding-bottom:calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width));-webkit-padding-after:calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width));padding-block-end:calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width))}}@layer sf.overrides{.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button,.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{--sf-button--padding-inline-start: calc(var(--sf-px) * 0);--sf-button--padding-inline-end: calc(var(--sf-px) * 0)}.sf-tabs--underline.sf-tabs--size-1-2>.sf-tabs-top-container>.sf-tabs-top{--sf-tabs-top--gap: var(--sf-tabs-gap, var(--sf-c0))}.sf-tabs--underline.sf-tabs--size-1>.sf-tabs-top-container>.sf-tabs-top{--sf-tabs-top--gap: var(--sf-tabs-gap, var(--sf-c2))}.sf-tabs--underline.sf-tabs--size-2>.sf-tabs-top-container>.sf-tabs-top{--sf-tabs-top--gap: var(--sf-tabs-gap, var(--sf-c6))}.sf-tabs--underline.sf-tabs--size-2>.sf-tabs-top-container>.sf-tabs-top .sf-button,.sf-tabs--underline.sf-tabs--size-2>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{--sf-button--border-bottom-width: var(--sf-tabs-indicator-width, calc(var(--sf-px) * 3));--sf-icon-button--border-bottom-width: var(--sf-tabs-indicator-width, calc(var(--sf-px) * 3))}.sf-tabs.sf-tabs--size-1-2>.sf-tabs-top-container>.sf-tabs-top .sf-button{font-size:var(--sf-text-size-1\/2)}.sf-tabs.sf-tabs--size-1>.sf-tabs-top-container>.sf-tabs-top .sf-button{font-size:var(--sf-text-size-1)}.sf-tabs.sf-tabs--size-2>.sf-tabs-top-container>.sf-tabs-top .sf-button{font-size:var(--sf-text-size-2)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tabs-count{margin-left:var(--sf-a6)}@supports not (margin-inline-start: initial){html:not([dir="rtl"]) .sf-tabs-count{margin-left:var(--sf-a6)}}.sf-tabs-count:where(:dir(ltr)){margin-left:var(--sf-a6)}_:-ms-input-placeholder, [dir="rtl"] .sf-tabs-count{margin-right:var(--sf-a6)}@supports not (margin-inline-start: initial){[dir="rtl"] .sf-tabs-count{margin-right:var(--sf-a6)}}.sf-tabs-count:where(:dir(rtl)){margin-right:var(--sf-a6)}.sf-tabs-count{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sf-text-height-1\/3);min-inline-size:var(--sf-text-height-1\/3);-webkit-margin-start:var(--sf-a6);margin-inline-start:var(--sf-a6);padding-left:var(--sf-a4);padding-right:var(--sf-a4);padding-inline:var(--sf-a4);border-radius:var(--sf-radius-circle);background-color:var(--sf-secondary-container);color:var(--sf-on-secondary-container);font-size:var(--sf-text-size-1\/3);line-height:var(--sf-text-height-1\/3);font-weight:var(--sf-font-weight-medium);vertical-align:middle}.sf-tabs--overflow-wrap:not(.sf-tabs--vertical)>.sf-tabs-top-container>.sf-tabs-top{flex-wrap:wrap;overflow-x:visible}.sf-tabs--overflow-more:not(.sf-tabs--vertical)>.sf-tabs-top-container>.sf-tabs-top{flex-wrap:nowrap;overflow-x:clip}.sf-tabs-top>.sf-tabs-overflowed,.sf-tabs-top>.sf-tabs-overflowed>*{display:none !important}.sf-tabs-more,.sf-tabs-settings{flex:none}.sf-tabs-more>button{white-space:nowrap}.sf-tabs--underline>.sf-tabs-top-container--tools>.sf-tabs-more>button{margin-bottom:calc(var(--sf-px)*-1);-webkit-margin-after:calc(var(--sf-px)*-1);margin-block-end:calc(var(--sf-px)*-1);margin-bottom:calc(var(--sf-px)*-1);margin-bottom:calc(var(--sf-tabs-border-width, var(--sf-tabs--border-width, var(--sf-px)))*-1);-webkit-margin-after:calc(var(--sf-tabs-border-width, var(--sf-tabs--border-width, var(--sf-px)))*-1);margin-block-end:calc(var(--sf-tabs-border-width, var(--sf-tabs--border-width, var(--sf-px)))*-1)}.sf-tabs-top-container.sf-tabs-top-container--tools{display:flex;align-items:flex-end;gap:var(--sf-space-1\/2)}.sf-tabs-top-container--tools>.sf-tabs-top{flex:1 1 auto;min-width:0;min-inline-size:0}.sf-tabs-top-container--tools:not([data-sf-tabs-more])>.sf-tabs-more,.sf-tabs-top-container--tools:not([data-sf-tabs-more])>.sf-tabs-more>button{display:none}.sf-tabs-settings-list{display:flex;flex-direction:column;gap:var(--sf-px)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tabs-settings-row{padding-left:var(--sf-a8);padding-left:var(--sf-context-menu--inset-start, var(--sf-a8))}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-tabs-settings-row{padding-left:var(--sf-a8);padding-left:var(--sf-context-menu--inset-start, var(--sf-a8))}}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tabs-settings-row{padding-right:var(--sf-a8);padding-right:var(--sf-context-menu--inset-end, var(--sf-a8))}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-tabs-settings-row{padding-right:var(--sf-a8);padding-right:var(--sf-context-menu--inset-end, var(--sf-a8))}}.sf-tabs-settings-row:where(:dir(ltr)){padding-left:var(--sf-a8);padding-left:var(--sf-context-menu--inset-start, var(--sf-a8));padding-right:var(--sf-a8);padding-right:var(--sf-context-menu--inset-end, var(--sf-a8))}_:-ms-input-placeholder, [dir="rtl"] .sf-tabs-settings-row{padding-right:var(--sf-a8);padding-right:var(--sf-context-menu--inset-start, var(--sf-a8))}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-tabs-settings-row{padding-right:var(--sf-a8);padding-right:var(--sf-context-menu--inset-start, var(--sf-a8))}}_:-ms-input-placeholder, [dir="rtl"] .sf-tabs-settings-row{padding-left:var(--sf-a8);padding-left:var(--sf-context-menu--inset-end, var(--sf-a8))}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-tabs-settings-row{padding-left:var(--sf-a8);padding-left:var(--sf-context-menu--inset-end, var(--sf-a8))}}.sf-tabs-settings-row:where(:dir(rtl)){padding-right:var(--sf-a8);padding-right:var(--sf-context-menu--inset-start, var(--sf-a8));padding-left:var(--sf-a8);padding-left:var(--sf-context-menu--inset-end, var(--sf-a8))}.sf-tabs-settings-row{display:flex;align-items:center;gap:var(--sf-space-1\/2);min-height:calc(var(--sf-text-height-1\/2) + 2*var(--sf-a6));min-block-size:calc(var(--sf-text-height-1\/2) + 2*var(--sf-a6));min-height:calc(var(--sf-text-height-1\/2) + 2*var(--sf-a6));min-height:calc(var(--sf-context-menu--line, var(--sf-text-height-1\/2)) + 2*var(--sf-context-menu--space-y, var(--sf-a6)));min-block-size:calc(var(--sf-context-menu--line, var(--sf-text-height-1\/2)) + 2*var(--sf-context-menu--space-y, var(--sf-a6)));padding-left:var(--sf-a8);padding-right:var(--sf-a8);padding-inline:var(--sf-a8) var(--sf-a8);padding-inline:var(--sf-context-menu--inset-start, var(--sf-a8)) var(--sf-context-menu--inset-end, var(--sf-a8));border-radius:var(--sf-radius--ui)}.sf-tabs-settings-handle{display:inline-flex;cursor:-webkit-grab;cursor:grab;--sf-icon--color: var(--sf-on-surface-variant)}.sf-tabs-settings-label{flex:1 1 auto;min-width:0;min-inline-size:0;white-space:nowrap}.sf-tabs-settings-pin{--sf-icon--color: var(--sf-on-surface-variant)}}
1
+ @layer sf.components{.sf-tabs{background-color:transparent;background-color:var(--sf-tabs--background-color, transparent);min-width:0;min-inline-size:0;max-width:100%;max-inline-size:100%}.sf-tabs>.sf-tabs-top-container,.sf-tabs>.sf-tabs-main-container,.sf-tabs>.sf-tabs-top-container>.sf-tabs-top{min-width:0;min-inline-size:0;max-width:100%;max-inline-size:100%}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button{min-width:0;min-inline-size:0;max-width:100%;max-inline-size:100%;flex-shrink:0}.sf-tabs:not(.sf-tabs--vertical)>.sf-tabs-top-container>.sf-tabs-top{overflow-x:auto}@media(prefers-reduced-motion: reduce){.sf-tabs>.sf-tabs-top-container>.sf-tabs-top{scroll-behavior:auto}}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button-text-container{min-width:0;min-inline-size:0;white-space:normal;word-wrap:anywhere}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon{flex-shrink:0}.sf-tabs.sf-tabs--vertical{-webkit-column-gap:var(--sf-space-2);-moz-column-gap:var(--sf-space-2);column-gap:var(--sf-space-2);-webkit-column-gap:var(--sf-tabs--gap, var(--sf-space-2));-moz-column-gap:var(--sf-tabs--gap, var(--sf-space-2));column-gap:var(--sf-tabs--gap, var(--sf-space-2))}.sf-tabs-top{margin:0;margin:var(--sf-tabs-top--margin, 0);border-width:0;border-width:var(--sf-tabs-top--border-width, 0);border-style:solid;border-style:var(--sf-tabs-top--border-style, solid);border-color:transparent;border-color:var(--sf-tabs-top--border-color, transparent);gap:var(--sf-space-1);gap:var(--sf-tabs-top--gap, var(--sf-tabs-gap, var(--sf-space-1)))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tabs-main-container{padding-right:0;padding-right:var(--sf-tabs-main-container--padding-inline-end, 0)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-tabs-main-container{padding-right:0;padding-right:var(--sf-tabs-main-container--padding-inline-end, 0)}}.sf-tabs-main-container:where(:dir(ltr)){padding-right:0;padding-right:var(--sf-tabs-main-container--padding-inline-end, 0)}_:-ms-input-placeholder, [dir="rtl"] .sf-tabs-main-container{padding-left:0;padding-left:var(--sf-tabs-main-container--padding-inline-end, 0)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-tabs-main-container{padding-left:0;padding-left:var(--sf-tabs-main-container--padding-inline-end, 0)}}.sf-tabs-main-container:where(:dir(rtl)){padding-left:0;padding-left:var(--sf-tabs-main-container--padding-inline-end, 0)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tabs-main-container{padding-left:0;padding-left:var(--sf-tabs-main-container--padding-inline-start, 0)}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-tabs-main-container{padding-left:0;padding-left:var(--sf-tabs-main-container--padding-inline-start, 0)}}.sf-tabs-main-container:where(:dir(ltr)){padding-left:0;padding-left:var(--sf-tabs-main-container--padding-inline-start, 0)}_:-ms-input-placeholder, [dir="rtl"] .sf-tabs-main-container{padding-right:0;padding-right:var(--sf-tabs-main-container--padding-inline-start, 0)}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-tabs-main-container{padding-right:0;padding-right:var(--sf-tabs-main-container--padding-inline-start, 0)}}.sf-tabs-main-container:where(:dir(rtl)){padding-right:0;padding-right:var(--sf-tabs-main-container--padding-inline-start, 0)}.sf-tabs-main-container{-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-end:var(--sf-tabs-main-container--padding-inline-end, 0);padding-inline-end:var(--sf-tabs-main-container--padding-inline-end, 0);-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-start:var(--sf-tabs-main-container--padding-inline-start, 0);padding-inline-start:var(--sf-tabs-main-container--padding-inline-start, 0);padding-top:var(--sf-space-1);padding-top:var(--sf-tabs-main-container--padding-top, var(--sf-space-1));padding-bottom:var(--sf-space-1);padding-bottom:var(--sf-tabs-main-container--padding-bottom, var(--sf-space-1))}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tabs-top-container{padding-right:0;padding-right:var(--sf-tabs-top-container--padding-inline-end, 0)}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-tabs-top-container{padding-right:0;padding-right:var(--sf-tabs-top-container--padding-inline-end, 0)}}.sf-tabs-top-container:where(:dir(ltr)){padding-right:0;padding-right:var(--sf-tabs-top-container--padding-inline-end, 0)}_:-ms-input-placeholder, [dir="rtl"] .sf-tabs-top-container{padding-left:0;padding-left:var(--sf-tabs-top-container--padding-inline-end, 0)}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-tabs-top-container{padding-left:0;padding-left:var(--sf-tabs-top-container--padding-inline-end, 0)}}.sf-tabs-top-container:where(:dir(rtl)){padding-left:0;padding-left:var(--sf-tabs-top-container--padding-inline-end, 0)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tabs-top-container{padding-left:0;padding-left:var(--sf-tabs-top-container--padding-inline-start, 0)}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-tabs-top-container{padding-left:0;padding-left:var(--sf-tabs-top-container--padding-inline-start, 0)}}.sf-tabs-top-container:where(:dir(ltr)){padding-left:0;padding-left:var(--sf-tabs-top-container--padding-inline-start, 0)}_:-ms-input-placeholder, [dir="rtl"] .sf-tabs-top-container{padding-right:0;padding-right:var(--sf-tabs-top-container--padding-inline-start, 0)}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-tabs-top-container{padding-right:0;padding-right:var(--sf-tabs-top-container--padding-inline-start, 0)}}.sf-tabs-top-container:where(:dir(rtl)){padding-right:0;padding-right:var(--sf-tabs-top-container--padding-inline-start, 0)}.sf-tabs-top-container{border-width:0 0 var(--sf-px) 0;border-width:var(--sf-tabs-top-container--border-width, 0 0 var(--sf-tabs-border-width, var(--sf-tabs--border-width, var(--sf-px))) 0);border-style:solid;border-style:var(--sf-tabs-top-container--border-style, solid);border-color:var(--sf-outline-variant);border-color:var(--sf-tabs-top-container--border-color, var(--sf-tabs-border-color, var(--sf-outline-variant)));-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-end:var(--sf-tabs-top-container--padding-inline-end, 0);padding-inline-end:var(--sf-tabs-top-container--padding-inline-end, 0);-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-start:var(--sf-tabs-top-container--padding-inline-start, 0);padding-inline-start:var(--sf-tabs-top-container--padding-inline-start, 0);padding-top:0;padding-top:var(--sf-tabs-top-container--padding-top, 0);padding-bottom:0;padding-bottom:var(--sf-tabs-top-container--padding-bottom, 0)}.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top{--sf-tabs-top--margin: 0 0 calc(var(--sf-tabs-border-width, var(--sf-tabs--border-width, var(--sf-px))) * -1) 0}.sf-tabs--pills>.sf-tabs-top-container,.sf-tabs--full>.sf-tabs-top-container,.sf-tabs.sf-tabs--vertical>.sf-tabs-top-container{--sf-tabs-top-container--border-color: transparent;--sf-tabs-top-container--border-width: 0}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top{--sf-tabs-top--gap: 0;flex:1}}@layer sf.overrides{.sf-tabs-top .sf-button,.sf-tabs-top .sf-icon-button{--sf-tabs--focus-ink: var(--sf-on-surface);--sf-button--border-bottom-right-radius: var(--sf-radius-square);--sf-button--border-bottom-left-radius: var(--sf-radius-square);--sf-button--border-top-right-radius: var(--sf-radius--ui);--sf-button--border-top-left-radius: var(--sf-radius--ui);--sf-icon-button--border-bottom-right-radius: var(--sf-radius-square);--sf-icon-button--border-bottom-left-radius: var(--sf-radius-square);--sf-icon-button--border-top-right-radius: var(--sf-radius--ui);--sf-icon-button--border-top-left-radius: var(--sf-radius--ui)}.sf-tabs--pills>.sf-tabs-top-container>.sf-tabs-top .sf-button,.sf-tabs--pills>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{--sf-button--border-bottom-right-radius: var(--sf-radius-rounded);--sf-button--border-bottom-left-radius: var(--sf-radius-rounded);--sf-button--border-top-right-radius: var(--sf-radius-rounded);--sf-button--border-top-left-radius: var(--sf-radius-rounded);--sf-icon-button--border-bottom-right-radius: var(--sf-radius-rounded);--sf-icon-button--border-bottom-left-radius: var(--sf-radius-rounded);--sf-icon-button--border-top-right-radius: var(--sf-radius-rounded);--sf-icon-button--border-top-left-radius: var(--sf-radius-rounded)}.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button,.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{--sf-button--border-top-width: 0;--sf-button--border-inline-start-width: 0;--sf-button--border-bottom-width: var(--sf-tabs-indicator-width, calc(var(--sf-tabs--border-width, var(--sf-px)) * 2));--sf-button--border-inline-end-width: 0;--sf-icon-button--border-top-width: 0;--sf-icon-button--border-inline-start-width: 0;--sf-icon-button--border-bottom-width: var(--sf-tabs-indicator-width, calc(var(--sf-tabs--border-width, var(--sf-px)) * 2));--sf-icon-button--border-inline-end-width: 0}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{flex:1 0 0;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;min-inline-size:-webkit-max-content;min-inline-size:-moz-max-content;min-inline-size:max-content;--sf-button--border-top-width: var(--sf-tabs--border-width, var(--sf-px));--sf-button--border-inline-start-width: var(--sf-tabs--border-width, var(--sf-px));--sf-button--border-bottom-width: var(--sf-tabs--border-width, var(--sf-px));--sf-button--border-inline-end-width: var(--sf-tabs--border-width, var(--sf-px));--sf-button--border-bottom-right-radius: var(--sf-radius-square);--sf-button--border-bottom-left-radius: var(--sf-radius-square);--sf-button--border-top-right-radius: var(--sf-radius-square);--sf-button--border-top-left-radius: var(--sf-radius-square);--sf-icon-button--border-top-width: var(--sf-tabs--border-width, var(--sf-px));--sf-icon-button--border-inline-start-width: var(--sf-tabs--border-width, var(--sf-px));--sf-icon-button--border-bottom-width: var(--sf-tabs--border-width, var(--sf-px));--sf-icon-button--border-inline-end-width: var(--sf-tabs--border-width, var(--sf-px));--sf-icon-button--border-color: var(--sf-primary-active);--sf-button--border-color: var(--sf-primary-active);--sf-icon-button--border-bottom-right-radius: var(--sf-radius-square);--sf-icon-button--border-bottom-left-radius: var(--sf-radius-square);--sf-icon-button--border-top-right-radius: var(--sf-radius-square);--sf-icon-button--border-top-left-radius: var(--sf-radius-square)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-button+.sf-button{--sf-button--border-inline-start-width: 0;--sf-icon-button--border-inline-start-width: 0}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-button+.sf-icon-button{--sf-button--border-inline-start-width: 0;--sf-icon-button--border-inline-start-width: 0}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-icon-button+.sf-button{--sf-button--border-inline-start-width: 0;--sf-icon-button--border-inline-start-width: 0}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-icon-button+.sf-icon-button{--sf-button--border-inline-start-width: 0;--sf-icon-button--border-inline-start-width: 0}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-button:first-child,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>:first-child .sf-button:first-child,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-icon-button:first-child,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>:first-child .sf-icon-button:first-child{--sf-button--border-top-left-radius: var(--sf-radius--ui);--sf-button--border-bottom-left-radius: var(--sf-radius--ui);--sf-icon-button--border-top-left-radius: var(--sf-radius--ui);--sf-icon-button--border-bottom-left-radius: var(--sf-radius--ui)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-button:last-child,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>:last-child .sf-button:last-child,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>.sf-icon-button:last-child,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top>:last-child .sf-icon-button:last-child{--sf-button--border-top-right-radius: var(--sf-radius--ui);--sf-button--border-bottom-right-radius: var(--sf-radius--ui);--sf-icon-button--border-top-right-radius: var(--sf-radius--ui);--sf-icon-button--border-bottom-right-radius: var(--sf-radius--ui)}.sf-tabs--vertical>.sf-tabs-top-container>.sf-tabs-top .sf-button,.sf-tabs--vertical>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{--sf-button--border-bottom-right-radius: var(--sf-radius--ui);--sf-button--border-bottom-left-radius: var(--sf-radius--ui);--sf-button--border-top-right-radius: var(--sf-radius--ui);--sf-button--border-top-left-radius: var(--sf-radius--ui);--sf-icon-button--border-bottom-right-radius: var(--sf-radius--ui);--sf-icon-button--border-bottom-left-radius: var(--sf-radius--ui);--sf-icon-button--border-top-right-radius: var(--sf-radius--ui);--sf-icon-button--border-top-left-radius: var(--sf-radius--ui)}}@layer sf.states{.sf-tabs-top .sf-button--default.sf-button--primary{--sf-tabs--focus-ink: var(--sf-on-primary)}.sf-tabs-top .sf-icon-button--default.sf-icon-button--primary{--sf-tabs--focus-ink: var(--sf-on-primary)}.sf-tabs-top .sf-button--default.sf-button--on-surface{--sf-tabs--focus-ink: var(--sf-on-surface-inverse)}.sf-tabs-top .sf-icon-button--default.sf-icon-button--on-surface{--sf-tabs--focus-ink: var(--sf-on-surface-inverse)}.sf-tabs-top .sf-button--tonal.sf-button--secondary{--sf-tabs--focus-ink: var(--sf-on-secondary-container)}.sf-tabs-top .sf-icon-button--tonal.sf-icon-button--secondary{--sf-tabs--focus-ink: var(--sf-on-secondary-container)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):hover{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):active{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected.focus-visible:not(:disabled):not(.disabled){--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):hover{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):active{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected.focus-visible:not(:disabled):not(.disabled){--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled),.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled){--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):hover{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):active{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled).focus-visible{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):focus-visible{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):hover{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):active{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled).focus-visible{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):focus-visible{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled),.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled){--sf-tabs--focus-ink: var(--sf-on-primary);--sf-button--background-color: var(--sf-primary-active);--sf-icon-button--background-color: var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled) .sf-button-text-container{--sf-button-text-container--color: var(--sf-on-primary)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled) .sf-icon,.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled) .sf-icon{--sf-icon--color: var(--sf-on-primary)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):hover{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):active{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected.focus-visible:not(:disabled):not(.disabled){--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):hover{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):active{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected.focus-visible:not(:disabled):not(.disabled){--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled),.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled){--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):hover{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):active{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled).focus-visible{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled):focus-visible{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):hover{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):active{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled).focus-visible{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled):focus-visible{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled),.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled){--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline));--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-tabs-indicator-color, var(--sf-outline))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled) .sf-button-text-container,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled) .sf-button-text-container{--sf-button-text-container--color: var(--sf-tabs-color, var(--sf-on-surface))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled) .sf-icon,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled) .sf-icon{--sf-icon--color: var(--sf-tabs-color, var(--sf-on-surface))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled),.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled),.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled),.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled){--sf-button--background-color: var(--sf-transparent);--sf-icon-button--background-color: var(--sf-transparent)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled) .sf-icon,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled) .sf-icon{--sf-icon--color: var(--sf-tabs-color, var(--sf-on-surface))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled) .sf-icon,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled) .sf-icon{--sf-icon--color: var(--sf-on-surface-active)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled) .sf-button-text-container{--sf-button-text-container--color: var(--sf-on-surface-active)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled),.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled){--sf-icon-button--border-color: var(--sf-primary-active);--sf-button--border-color: var(--sf-primary-active)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled).focus-visible,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled).focus-visible,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):hover{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-icon-button--border-color: var(--sf-primary-hover);--sf-button--border-color: var(--sf-primary-hover);--sf-icon-button--background-color: var(--sf-primary-hover);--sf-button--background-color: var(--sf-primary-hover)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):focus-visible,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):focus-visible,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):hover{--sf-tabs--focus-ink: var(--sf-on-primary);--sf-icon-button--border-color: var(--sf-primary-hover);--sf-button--border-color: var(--sf-primary-hover);--sf-icon-button--background-color: var(--sf-primary-hover);--sf-button--background-color: var(--sf-primary-hover)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled).focus-visible .sf-button-text-container,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover .sf-button-text-container{--sf-button-text-container--color: var(--sf-on-primary)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):focus-visible .sf-button-text-container,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover .sf-button-text-container{--sf-button-text-container--color: var(--sf-on-primary)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled).focus-visible .sf-icon,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover .sf-icon,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled).focus-visible .sf-icon,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):hover .sf-icon{--sf-icon--color: var(--sf-on-primary)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):focus-visible .sf-icon,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover .sf-icon,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):focus-visible .sf-icon,.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):hover .sf-icon{--sf-icon--color: var(--sf-on-primary)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled).focus-visible,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled).focus-visible,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):hover{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-outline-variant);--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-outline-variant)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):focus-visible,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):focus-visible,.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):hover{--sf-button--background-color: transparent;--sf-button--border-color: var(--sf-outline-variant);--sf-icon-button--background-color: transparent;--sf-icon-button--border-color: var(--sf-outline-variant)}.sf-tabs-top .sf-button.focus-visible:not(:disabled):not(.disabled){--sf-focus--color: var(--sf-tabs--focus-color, var(--sf-tabs--focus-ink));outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-icon-button.focus-visible:not(:disabled):not(.disabled){--sf-focus--color: var(--sf-tabs--focus-color, var(--sf-tabs--focus-ink));outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-button:not(:disabled):not(.disabled).focus-visible{--sf-focus--color: var(--sf-tabs--focus-color, var(--sf-tabs--focus-ink));outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-button:not(:disabled):not(.disabled):focus-visible{--sf-focus--color: var(--sf-tabs--focus-color, var(--sf-tabs--focus-ink));outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-icon-button:not(:disabled):not(.disabled).focus-visible{--sf-focus--color: var(--sf-tabs--focus-color, var(--sf-tabs--focus-ink));outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-icon-button:not(:disabled):not(.disabled):focus-visible{--sf-focus--color: var(--sf-tabs--focus-color, var(--sf-tabs--focus-ink));outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.focus-visible:not(:disabled):not(.disabled){--sf-tabs--focus-ink: var(--sf-on-surface)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.focus-visible:not(:disabled):not(.disabled){--sf-tabs--focus-ink: var(--sf-on-surface)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(:disabled):not(.disabled).focus-visible{--sf-tabs--focus-ink: var(--sf-on-surface)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(:disabled):not(.disabled):focus-visible{--sf-tabs--focus-ink: var(--sf-on-surface)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(:disabled):not(.disabled).focus-visible{--sf-tabs--focus-ink: var(--sf-on-surface)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(:disabled):not(.disabled):focus-visible{--sf-tabs--focus-ink: var(--sf-on-surface)}@media(forced-colors: active){.sf-tabs-top .sf-button.focus-visible:not(:disabled):not(.disabled){outline:var(--sf-focus--width) solid currentColor;outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-icon-button.focus-visible:not(:disabled):not(.disabled){outline:var(--sf-focus--width) solid currentColor;outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-button:not(:disabled):not(.disabled).focus-visible{outline:var(--sf-focus--width) solid currentColor;outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-button:not(:disabled):not(.disabled):focus-visible{outline:var(--sf-focus--width) solid currentColor;outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-icon-button:not(:disabled):not(.disabled).focus-visible{outline:var(--sf-focus--width) solid currentColor;outline-offset:calc(var(--sf-focus--width)*-1)}.sf-tabs-top .sf-icon-button:not(:disabled):not(.disabled):focus-visible{outline:var(--sf-focus--width) solid currentColor;outline-offset:calc(var(--sf-focus--width)*-1)}}}@layer sf.components{.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button{padding-bottom:calc(var(--sf-button--padding-bottom) - var(--sf-button--border-bottom-width));-webkit-padding-after:calc(var(--sf-button--padding-bottom) - var(--sf-button--border-bottom-width));padding-block-end:calc(var(--sf-button--padding-bottom) - var(--sf-button--border-bottom-width))}.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{padding-bottom:calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width));-webkit-padding-after:calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width));padding-block-end:calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width))}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button{padding-top:calc(var(--sf-button--padding-top) - var(--sf-button--border-top-width));-webkit-padding-before:calc(var(--sf-button--padding-top) - var(--sf-button--border-top-width));padding-block-start:calc(var(--sf-button--padding-top) - var(--sf-button--border-top-width));padding-bottom:calc(var(--sf-button--padding-bottom) - var(--sf-button--border-bottom-width));-webkit-padding-after:calc(var(--sf-button--padding-bottom) - var(--sf-button--border-bottom-width));padding-block-end:calc(var(--sf-button--padding-bottom) - var(--sf-button--border-bottom-width))}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{padding-top:calc(var(--sf-icon-button--padding-top) - var(--sf-icon-button--border-top-width));-webkit-padding-before:calc(var(--sf-icon-button--padding-top) - var(--sf-icon-button--border-top-width));padding-block-start:calc(var(--sf-icon-button--padding-top) - var(--sf-icon-button--border-top-width));padding-bottom:calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width));-webkit-padding-after:calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width));padding-block-end:calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width))}}@layer sf.overrides{.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button,.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{--sf-button--padding-inline-start: calc(var(--sf-px) * 0);--sf-button--padding-inline-end: calc(var(--sf-px) * 0)}.sf-tabs--underline.sf-tabs--size-1-2>.sf-tabs-top-container>.sf-tabs-top{--sf-tabs-top--gap: var(--sf-tabs-gap, var(--sf-c0))}.sf-tabs--underline.sf-tabs--size-1>.sf-tabs-top-container>.sf-tabs-top{--sf-tabs-top--gap: var(--sf-tabs-gap, var(--sf-c2))}.sf-tabs--underline.sf-tabs--size-2>.sf-tabs-top-container>.sf-tabs-top{--sf-tabs-top--gap: var(--sf-tabs-gap, var(--sf-c6))}.sf-tabs--underline.sf-tabs--size-2>.sf-tabs-top-container>.sf-tabs-top .sf-button,.sf-tabs--underline.sf-tabs--size-2>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button{--sf-button--border-bottom-width: var(--sf-tabs-indicator-width, calc(var(--sf-px) * 3));--sf-icon-button--border-bottom-width: var(--sf-tabs-indicator-width, calc(var(--sf-px) * 3))}.sf-tabs.sf-tabs--size-1-2>.sf-tabs-top-container>.sf-tabs-top .sf-button{font-size:var(--sf-text-size-1\/2)}.sf-tabs.sf-tabs--size-1>.sf-tabs-top-container>.sf-tabs-top .sf-button{font-size:var(--sf-text-size-1)}.sf-tabs.sf-tabs--size-2>.sf-tabs-top-container>.sf-tabs-top .sf-button{font-size:var(--sf-text-size-2)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tabs-count{margin-left:var(--sf-a6)}@supports not (margin-inline-start: initial){html:not([dir="rtl"]) .sf-tabs-count{margin-left:var(--sf-a6)}}.sf-tabs-count:where(:dir(ltr)){margin-left:var(--sf-a6)}_:-ms-input-placeholder, [dir="rtl"] .sf-tabs-count{margin-right:var(--sf-a6)}@supports not (margin-inline-start: initial){[dir="rtl"] .sf-tabs-count{margin-right:var(--sf-a6)}}.sf-tabs-count:where(:dir(rtl)){margin-right:var(--sf-a6)}.sf-tabs-count{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sf-text-height-1\/3);min-inline-size:var(--sf-text-height-1\/3);-webkit-margin-start:var(--sf-a6);margin-inline-start:var(--sf-a6);padding-left:var(--sf-a4);padding-right:var(--sf-a4);padding-inline:var(--sf-a4);border-radius:var(--sf-radius-circle);background-color:var(--sf-secondary-container);color:var(--sf-on-secondary-container);font-size:var(--sf-text-size-1\/3);line-height:var(--sf-text-height-1\/3);font-weight:var(--sf-font-weight-medium);vertical-align:middle}.sf-tabs--overflow-wrap:not(.sf-tabs--vertical)>.sf-tabs-top-container>.sf-tabs-top{flex-wrap:wrap;overflow-x:visible}.sf-tabs--overflow-more:not(.sf-tabs--vertical)>.sf-tabs-top-container>.sf-tabs-top{flex-wrap:nowrap;overflow-x:clip}.sf-tabs-top>.sf-tabs-overflowed,.sf-tabs-top>.sf-tabs-overflowed>*{display:none !important}.sf-tabs-more,.sf-tabs-settings{flex:none}.sf-tabs-more>button{white-space:nowrap}.sf-tabs--underline>.sf-tabs-top-container--tools>.sf-tabs-more>button{margin-bottom:calc(var(--sf-px)*-1);-webkit-margin-after:calc(var(--sf-px)*-1);margin-block-end:calc(var(--sf-px)*-1);margin-bottom:calc(var(--sf-px)*-1);margin-bottom:calc(var(--sf-tabs-border-width, var(--sf-tabs--border-width, var(--sf-px)))*-1);-webkit-margin-after:calc(var(--sf-tabs-border-width, var(--sf-tabs--border-width, var(--sf-px)))*-1);margin-block-end:calc(var(--sf-tabs-border-width, var(--sf-tabs--border-width, var(--sf-px)))*-1)}.sf-tabs-top-container.sf-tabs-top-container--tools{display:flex;align-items:flex-end;gap:var(--sf-space-1\/2)}.sf-tabs-top-container--tools>.sf-tabs-top{flex:1 1 auto;min-width:0;min-inline-size:0}.sf-tabs-top-container--tools:not([data-sf-tabs-more])>.sf-tabs-more,.sf-tabs-top-container--tools:not([data-sf-tabs-more])>.sf-tabs-more>button{display:none}.sf-tabs-settings-list{display:flex;flex-direction:column;gap:var(--sf-px)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tabs-settings-row{padding-left:var(--sf-a8);padding-left:var(--sf-context-menu--inset-start, var(--sf-a8))}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) .sf-tabs-settings-row{padding-left:var(--sf-a8);padding-left:var(--sf-context-menu--inset-start, var(--sf-a8))}}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-tabs-settings-row{padding-right:var(--sf-a8);padding-right:var(--sf-context-menu--inset-end, var(--sf-a8))}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) .sf-tabs-settings-row{padding-right:var(--sf-a8);padding-right:var(--sf-context-menu--inset-end, var(--sf-a8))}}.sf-tabs-settings-row:where(:dir(ltr)){padding-left:var(--sf-a8);padding-left:var(--sf-context-menu--inset-start, var(--sf-a8));padding-right:var(--sf-a8);padding-right:var(--sf-context-menu--inset-end, var(--sf-a8))}_:-ms-input-placeholder, [dir="rtl"] .sf-tabs-settings-row{padding-right:var(--sf-a8);padding-right:var(--sf-context-menu--inset-start, var(--sf-a8))}@supports not (padding-inline-start: initial){[dir="rtl"] .sf-tabs-settings-row{padding-right:var(--sf-a8);padding-right:var(--sf-context-menu--inset-start, var(--sf-a8))}}_:-ms-input-placeholder, [dir="rtl"] .sf-tabs-settings-row{padding-left:var(--sf-a8);padding-left:var(--sf-context-menu--inset-end, var(--sf-a8))}@supports not (padding-inline-end: initial){[dir="rtl"] .sf-tabs-settings-row{padding-left:var(--sf-a8);padding-left:var(--sf-context-menu--inset-end, var(--sf-a8))}}.sf-tabs-settings-row:where(:dir(rtl)){padding-right:var(--sf-a8);padding-right:var(--sf-context-menu--inset-start, var(--sf-a8));padding-left:var(--sf-a8);padding-left:var(--sf-context-menu--inset-end, var(--sf-a8))}.sf-tabs-settings-row{display:flex;align-items:center;gap:var(--sf-space-1\/2);min-height:calc(var(--sf-text-height-1\/2) + 2*var(--sf-a6));min-block-size:calc(var(--sf-text-height-1\/2) + 2*var(--sf-a6));min-height:calc(var(--sf-text-height-1\/2) + 2*var(--sf-a6));min-height:calc(var(--sf-context-menu--line, var(--sf-text-height-1\/2)) + 2*var(--sf-context-menu--space-y, var(--sf-a6)));min-block-size:calc(var(--sf-context-menu--line, var(--sf-text-height-1\/2)) + 2*var(--sf-context-menu--space-y, var(--sf-a6)));padding-left:var(--sf-a8);padding-right:var(--sf-a8);padding-inline:var(--sf-a8) var(--sf-a8);padding-inline:var(--sf-context-menu--inset-start, var(--sf-a8)) var(--sf-context-menu--inset-end, var(--sf-a8));border-radius:var(--sf-radius--ui)}.sf-tabs-settings-handle{display:inline-flex;cursor:-webkit-grab;cursor:grab;--sf-icon--color: var(--sf-on-surface-variant)}.sf-tabs-settings-label{flex:1 1 auto;min-width:0;min-inline-size:0;white-space:nowrap}.sf-tabs-settings-pin{--sf-icon--color: var(--sf-on-surface-variant)}}@layer sf.states{.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.sf-button--primary{color:var(--sf-primary)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled){color:var(--sf-on-primary)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled){color:var(--sf-on-primary)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.sf-button--default.sf-button--primary:not(:disabled):not(.disabled){color:var(--sf-on-primary)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.sf-button--outline:not(.selected):not(:disabled):not(.disabled):hover{color:var(--sf-primary-hover)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.sf-button--link:not(.selected):not(:disabled):not(.disabled):hover{color:var(--sf-primary-hover)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.sf-button--outline:not(.selected):not(:disabled):not(.disabled):active{color:var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.sf-button--outline.active:not(.selected):not(:disabled):not(.disabled){color:var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.sf-button--link:not(.selected):not(:disabled):not(.disabled):active{color:var(--sf-primary-active)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.sf-button--link.active:not(.selected):not(:disabled):not(.disabled){color:var(--sf-primary-active)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled){color:var(--sf-on-surface);color:var(--sf-tabs-color, var(--sf-on-surface))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled){color:var(--sf-on-surface);color:var(--sf-tabs-color, var(--sf-on-surface))}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled){color:var(--sf-on-surface);color:var(--sf-tabs-color, var(--sf-on-surface))}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled){color:var(--sf-on-surface);color:var(--sf-tabs-color, var(--sf-on-surface))}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-button.selected:not(:disabled):not(.disabled){color:var(--sf-on-surface-active)}.sf-tabs.sf-tabs--underline>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.selected:not(:disabled):not(.disabled){color:var(--sf-on-surface-active)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover{color:var(--sf-on-primary)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button.focus-visible:not(.selected):not(:disabled):not(.disabled){color:var(--sf-on-primary)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):hover{color:var(--sf-on-primary)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.focus-visible:not(.selected):not(:disabled):not(.disabled){color:var(--sf-on-primary)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):hover{color:var(--sf-on-primary)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled).focus-visible{color:var(--sf-on-primary)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-button:not(.selected):not(:disabled):not(.disabled):focus-visible{color:var(--sf-on-primary)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):hover{color:var(--sf-on-primary)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled).focus-visible{color:var(--sf-on-primary)}.sf-tabs.sf-tabs--full>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:not(.selected):not(:disabled):not(.disabled):focus-visible{color:var(--sf-on-primary)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button:disabled{color:var(--sf-on-disable)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-button.disabled{color:var(--sf-on-disable)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button:disabled{color:var(--sf-on-disable)}.sf-tabs>.sf-tabs-top-container>.sf-tabs-top .sf-icon-button.disabled{color:var(--sf-on-disable)}}
package/distr/core/contracts/packages/larena.package.json CHANGED
@@ -26,6 +26,7 @@
26
26
  "smart.buttons",
27
27
  "smart.context-menu",
28
28
  "smart.dropdown",
29
+ "smart.empty-state",
29
30
  "smart.icon-buttons",
30
31
  "smart.icons",
31
32
  "smart.inputs",
package/distr/core/css/core.css CHANGED
@@ -324,6 +324,22 @@
324
324
  being no role (documentation trial 6, 2026-10-18). */
325
325
  --sf-surface-inverse-hover: light-dark(var(--sf-neutral-25), var(--sf-neutral-85));
326
326
  --sf-surface-inverse-fixed: var(--sf-neutral-20);
327
+ /* Paper: the sheet a document is previewed on -- an email, a page, a print
328
+ layout. Its own colours are the document's, written for white, so the
329
+ paper stays white and its ink stays dark in both themes; it never flips
330
+ (simai/ui-source#24, the ui-mail preview). 17.2:1. Not a surface of the
331
+ interface: controls do not sit on it, and the interface's own text does
332
+ not take --sf-on-paper. */
333
+ --sf-paper: var(--sf-white);
334
+ --sf-on-paper: var(--sf-neutral-10);
335
+ /* The well: the recessed area a canvas or a paper sits in, below the
336
+ panels around it. In the light theme a step under surface-1 (the
337
+ paper's white stands on it by its shadow, 1.13:1, as the elevation guide
338
+ has it); in the dark theme, where height lightens a surface, it is the
339
+ darkest step, and the white paper stands off it by itself (18.9:1). Its
340
+ text takes the ordinary roles: --sf-on-surface 15.2:1 and 14.7:1,
341
+ --sf-on-surface-variant 5.71:1 and 5.95:1. */
342
+ --sf-surface-well: light-dark(var(--sf-neutral-95), var(--sf-neutral-5));
327
343
  /* A tinted plate on the surface, on the same neutral tone as the state
328
344
  layer above: neutral-50 in the light theme, neutral-90 in the dark. It
329
345
  used to be neutral-50 in both, which meant the dark theme lightened its