/* docara-shell-source: runtime/component/tabs/css/tabs.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
@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 {
  /* A tab is a control of its size: its indicator is a border inside that
     height, and the padding gives the border back, so an underlined or full
     tab row is as tall as a plain one (it was taller by its indicator). */
  .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);
  }
}