/* docara-shell-source: runtime/component/icons/css/icons.css */
/*

*/
.sf-icon--rotate-45 {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-90 {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-135 {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-180 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-225 {
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-270 {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.sf-icon--rotate-315 {
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}

/* fallback */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("/_docara/vendor/simai-framework/runtime/106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4/distr/component/icons/a5f1f832a64baed42867.woff2") format("woff2");
}
.sf-icon {
  --sf-icon--fill: 0;
  --sf-icon--weight: var(--sf-weight--regular);
  --sf-icon--grade: 0;
  --sf-icon--optical-size: 24;
  --sf-icon--line-height: 1;
  font-variation-settings: "FILL" var(--sf-icon--fill), "wght" var(--sf-icon--weight), "GRAD" var(--sf-icon--grade), "opsz" var(--sf-icon--optical-size);
  font-family: "Material Symbols Outlined";
  font-family: var(--sf-icon--font-family, "Material Symbols Outlined");
  font-weight: var(--sf-icon--weight);
  font-style: normal;
  font-size: var(--sf-icon-size-3);
  font-size: var(--sf-icon--font-size, var(--sf-icon-size-3));
  line-height: 1;
  line-height: var(--sf-icon--line-height, 1);
  letter-spacing: normal;
  text-transform: none;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  flex: none;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  vertical-align: bottom;
  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));
}
.sf-icon:not(.hidden) {
  display: inline-flex;
}
:root[data-sf-icons=subset-pending] .sf-icon {
  --sf-icon--font-family: "Material Symbols Outlined Subset";
  -webkit-text-fill-color: transparent;
  overflow: hidden;
}
.sf-icon--size-1\/4 {
  --sf-icon--font-size: var(--sf-icon-size-1\/4);
  --sf-icon--width: var(--sf-icon-size-1\/4);
  --sf-icon--height: var(--sf-icon-size-1\/4);
}
.sf-icon--size-1\/3 {
  --sf-icon--font-size: var(--sf-icon-size-1\/3);
  --sf-icon--width: var(--sf-icon-size-1\/3);
  --sf-icon--height: var(--sf-icon-size-1\/3);
}
.sf-icon--size-1\/2 {
  --sf-icon--font-size: var(--sf-icon-size-1\/2);
  --sf-icon--width: var(--sf-icon-size-1\/2);
  --sf-icon--height: var(--sf-icon-size-1\/2);
}
.sf-icon--size-1 {
  --sf-icon--font-size: var(--sf-icon-size-1);
  --sf-icon--width: var(--sf-icon-size-1);
  --sf-icon--height: var(--sf-icon-size-1);
}
.sf-icon--size-2 {
  --sf-icon--font-size: var(--sf-icon-size-2);
  --sf-icon--width: var(--sf-icon-size-2);
  --sf-icon--height: var(--sf-icon-size-2);
}
.sf-icon--size-3 {
  --sf-icon--font-size: var(--sf-icon-size-3);
  --sf-icon--width: var(--sf-icon-size-3);
  --sf-icon--height: var(--sf-icon-size-3);
}
.sf-icon--size-4 {
  --sf-icon--font-size: var(--sf-icon-size-4);
  --sf-icon--width: var(--sf-icon-size-4);
  --sf-icon--height: var(--sf-icon-size-4);
}
.sf-icon--size-5 {
  --sf-icon--font-size: var(--sf-icon-size-5);
  --sf-icon--width: var(--sf-icon-size-5);
  --sf-icon--height: var(--sf-icon-size-5);
}
.sf-icon--size-6 {
  --sf-icon--font-size: var(--sf-icon-size-6);
  --sf-icon--width: var(--sf-icon-size-6);
  --sf-icon--height: var(--sf-icon-size-6);
}
.sf-icon--size-7 {
  --sf-icon--font-size: var(--sf-icon-size-7);
  --sf-icon--width: var(--sf-icon-size-7);
  --sf-icon--height: var(--sf-icon-size-7);
}

.sf-icon--weight-thin,
.sf-icon-thin {
  --sf-icon--weight: var(--sf-weight--thin);
}

.sf-icon--weight-extra-light,
.sf-icon-extra-light {
  --sf-icon--weight: var(--sf-weight--extra-light);
}

.sf-icon--weight-light,
.sf-icon-light {
  --sf-icon--weight: var(--sf-weight--light);
}

.sf-icon--weight-regular,
.sf-icon-regular {
  --sf-icon--weight: var(--sf-weight--regular);
}

.sf-icon--weight-medium,
.sf-icon-medium {
  --sf-icon--weight: var(--sf-weight--medium);
}

.sf-icon--weight-semi-bold,
.sf-icon-semi-bold {
  --sf-icon--weight: var(--sf-weight--semi-bold);
}

.sf-icon--weight-bold,
.sf-icon-bold {
  --sf-icon--weight: var(--sf-weight--bold);
}

/* The colour of a glyph, and the only part of this file that is layered. The
   rest of `.sf-icon` is unlayered, which puts it above every layer -- so the
   colour was above them too, and a colour utility on a glyph did nothing at
   all: `color-on-surface-variant` read as applied and the glyph drew in
   currentColor regardless. In the base layer the token still answers wherever
   nothing else speaks, and a utility or a component's own rule now wins over
   it, which is the order the rest of the Framework is written in. */
@layer sf.base {
  .sf-icon {
    color: currentColor;
    color: var(--sf-icon--color, currentColor);
  }
}
.sf-icon--filled,
.sf-icon-filled,
.sf-icon-solid {
  --sf-icon--fill: 1;
}

.sf-icon--rounded,
.sf-icon-rounded {
  --sf-icon--font-family: "Material Symbols Rounded";
}

.sf-icon--sharp,
.sf-icon-shape {
  --sf-icon--font-family: "Material Symbols Sharp";
}

/*
 * Reserve the final icon geometry before the Smart Component is registered.
 * The light-DOM host is intentionally empty until JavaScript renders the
 * internal `.sf-icon`, so without this contract controls grow after first
 * paint. The same variables are used by the rendered icon above.
 */
sf-icon:not(:defined) {
  display: inline-flex;
  flex: none;
  width: var(--sf-icon-size-3);
  width: var(--sf-icon--width, var(--sf-icon-size-3));
  height: var(--sf-icon-size-3);
  height: var(--sf-icon--height, var(--sf-icon-size-3));
  vertical-align: bottom;
}

sf-icon[size="1/4"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-1\/4);
  --sf-icon--height: var(--sf-icon-size-1\/4);
}

sf-icon[size="1/3"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-1\/3);
  --sf-icon--height: var(--sf-icon-size-1\/3);
}

sf-icon[size="1/2"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-1\/2);
  --sf-icon--height: var(--sf-icon-size-1\/2);
}

sf-icon[size="1"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-1);
  --sf-icon--height: var(--sf-icon-size-1);
}

sf-icon[size="2"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-2);
  --sf-icon--height: var(--sf-icon-size-2);
}

sf-icon[size="3"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-3);
  --sf-icon--height: var(--sf-icon-size-3);
}

sf-icon[size="4"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-4);
  --sf-icon--height: var(--sf-icon-size-4);
}

sf-icon[size="5"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-5);
  --sf-icon--height: var(--sf-icon-size-5);
}

sf-icon[size="6"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-6);
  --sf-icon--height: var(--sf-icon-size-6);
}

sf-icon[size="7"]:not(:defined) {
  --sf-icon--width: var(--sf-icon-size-7);
  --sf-icon--height: var(--sf-icon-size-7);
}

/* docara-shell-source: runtime/component/icon-buttons/css/icon-buttons.css */
/* A button's border is inside its control height: the padding gives each side's
   border back. The side widths are registered as lengths, so a unitless 0
   written by a group, a tab row or a host still subtracts; unregistered, it
   would invalidate the padding. Measured before: outline, surface and every
   segmented button stood 2px taller than its size. */
@property --sf-icon-button--border-top-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --sf-icon-button--border-bottom-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --sf-icon-button--border-inline-start-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@property --sf-icon-button--border-inline-end-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-icon-button--radius);
    border-bottom-left-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-icon-button--radius);
    border-bottom-right-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-icon-button--radius);
    border-top-left-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-icon-button {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-icon-button--radius);
    border-top-right-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    padding-left: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    padding-left: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    padding-left: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    padding-right: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-icon-button {
    padding-right: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    padding-right: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    padding-right: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    padding-right: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    padding-right: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    padding-left: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-icon-button {
    padding-left: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    padding-left: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-end-width, 0);
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-end-width, 0);
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-end-width, 0);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .sf-icon-button {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-start-width, 0);
    }
  }
  .sf-icon-button:where(:dir(ltr)) {
    border-left-width: 0;
    border-left-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .sf-icon-button {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-start-width, 0);
    }
  }
  .sf-icon-button:where(:dir(rtl)) {
    border-right-width: 0;
    border-right-width: var(--sf-icon-button--border-inline-start-width, 0);
  }
  .sf-icon-button {
    /* Public variables (core/contracts/public-variables.v1.json): names with a
       single dash after the block, never set by the Framework, read where a
       resting look is defined -- base, size, spacing, appearance, scheme -- and
       not by hover, focus, pressed, disabled, loading or a group's segments, so
       states and joined groups still show. */
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-icon-button-color, var(--sf-on-surface-variant)));
    --sf-icon-button--radius: var(--sf-icon-button-radius, var(--sf-radius--ui));
    border-end-end-radius: var(--sf-icon-button--radius);
    border-end-end-radius: var(--sf-icon-button--border-bottom-right-radius, var(--sf-icon-button--radius));
    border-end-start-radius: var(--sf-icon-button--radius);
    border-end-start-radius: var(--sf-icon-button--border-bottom-left-radius, var(--sf-icon-button--radius));
    border-start-end-radius: var(--sf-icon-button--radius);
    border-start-end-radius: var(--sf-icon-button--border-top-right-radius, var(--sf-icon-button--radius));
    border-start-start-radius: var(--sf-icon-button--radius);
    border-start-start-radius: var(--sf-icon-button--border-top-left-radius, var(--sf-icon-button--radius));
    -webkit-padding-start: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
            padding-inline-start: calc(var(--sf-icon-button--padding-inline-start) - var(--sf-icon-button--border-inline-start-width));
    padding-top: calc(var(--sf-icon-button--padding-top) - var(--sf-icon-button--border-top-width));
    -webkit-padding-end: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
            padding-inline-end: calc(var(--sf-icon-button--padding-inline-end) - var(--sf-icon-button--border-inline-end-width));
    padding-bottom: calc(var(--sf-icon-button--padding-bottom) - var(--sf-icon-button--border-bottom-width));
    /* The public border reaches every appearance, as on sf-button: the side
       widths are registered lengths inside the control height. Outline,
       surface and a group's segments set them after this, and win. */
    --sf-icon-button--border-top-width: var(--sf-icon-button-border-width, 0);
    --sf-icon-button--border-bottom-width: var(--sf-icon-button-border-width, 0);
    --sf-icon-button--border-inline-start-width: var(--sf-icon-button-border-width, 0);
    --sf-icon-button--border-inline-end-width: var(--sf-icon-button-border-width, 0);
    background-color: var(--sf-icon-button--background-color);
    border-color: transparent;
    border-color: var(--sf-icon-button--border-color, var(--sf-icon-button-border-color, transparent));
    border-width: 0;
    border-width: var(--sf-icon-button--border-width, 0);
    border-top-width: 0;
    border-top-width: var(--sf-icon-button--border-top-width, 0);
    border-inline-end-width: 0;
    border-inline-end-width: var(--sf-icon-button--border-inline-end-width, 0);
    border-bottom-width: 0;
    border-bottom-width: var(--sf-icon-button--border-bottom-width, 0);
    border-inline-start-width: 0;
    border-inline-start-width: var(--sf-icon-button--border-inline-start-width, 0);
    border-style: solid;
    border-style: var(--sf-icon-button--border-style, solid);
    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0);
    box-shadow: var(--sf-icon-button--focus-inset, 0 0 rgba(0, 0, 0, 0)), var(--sf-icon-button--box-shadow, 0 0 rgba(0, 0, 0, 0));
  }
  .sf-icon-button .sf-close-icon {
    background-color: var(--sf-close-icon--background-color);
    border-color: transparent;
    border-color: var(--sf-close-icon--border-color, transparent);
  }
  .sf-icon-button .sf-icon {
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-icon-button-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));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-primary));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-primary));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-secondary-container));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-primary-container));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-secondary-container));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-primary-container));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
    --sf-icon-button--border-color: var(--sf-icon-button-border-color, var(--sf-outline));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-primary));
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-primary-active));
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-primary-active));
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-surface-container));
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface-inverse));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-primary));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-secondary-container));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-primary-container));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary));
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary-active));
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary-active));
  }
  .sf-icon-button.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-surface-inverse));
  }
  .sf-icon-button.sf-icon-button--size-2.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --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-icon-button.sf-icon-button--size-2.sf-icon-button--icon sf-icon:not(:defined) {
    --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-icon-button.sf-icon-button--size-3.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-3);
    --sf-icon--height: var(--sf-text-height-3);
    --sf-icon--width: var(--sf-text-height-3);
  }
  .sf-icon-button.sf-icon-button--size-3.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-3);
    --sf-icon--height: var(--sf-text-height-3);
    --sf-icon--width: var(--sf-text-height-3);
  }
  .sf-icon-button.sf-icon-button--size-1\/2.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --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-icon-button.sf-icon-button--size-1\/2.sf-icon-button--icon sf-icon:not(:defined) {
    --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-icon-button.sf-icon-button--size-1\/3.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --sf-icon--font-size: var(--sf-text-height-1\/3);
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-icon-button.sf-icon-button--size-1\/3.sf-icon-button--icon sf-icon:not(:defined) {
    --sf-icon--font-size: var(--sf-text-height-1\/3);
    --sf-icon--height: var(--sf-text-height-1\/3);
    --sf-icon--width: var(--sf-text-height-1\/3);
  }
  .sf-icon-button.sf-icon-button--size-1.sf-icon-button--icon .sf-icon:not(does-not-exist) {
    --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-icon-button.sf-icon-button--size-1.sf-icon-button--icon sf-icon:not(:defined) {
    --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-icon-button--size-1 {
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-default));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-default));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-default));
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-default));
  }
  .sf-icon-button--size-1.tightness-low {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));
  }
  .sf-icon-button--size-1.spacing-compact {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-low));
  }
  .sf-icon-button--size-1.tightness-high {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));
  }
  .sf-icon-button--size-1.spacing-comfortable {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-high));
  }
  .sf-icon-button--size-1.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));
  }
  .sf-icon-button--size-1.spacing-spacious {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1--space-y-tightness-highest));
  }
  .sf-icon-button--size-2 {
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-default));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-default));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-default));
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-default));
  }
  .sf-icon-button--size-2.tightness-low {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));
  }
  .sf-icon-button--size-2.spacing-compact {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-low));
  }
  .sf-icon-button--size-2.tightness-high {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));
  }
  .sf-icon-button--size-2.spacing-comfortable {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-high));
  }
  .sf-icon-button--size-2.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));
  }
  .sf-icon-button--size-2.spacing-spacious {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-2--space-y-tightness-highest));
  }
  .sf-icon-button--size-3 {
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-default));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-default));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-default));
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-default));
  }
  .sf-icon-button--size-3.tightness-low {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));
  }
  .sf-icon-button--size-3.spacing-compact {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-low));
  }
  .sf-icon-button--size-3.tightness-high {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));
  }
  .sf-icon-button--size-3.spacing-comfortable {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-high));
  }
  .sf-icon-button--size-3.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));
  }
  .sf-icon-button--size-3.spacing-spacious {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-3--space-y-tightness-highest));
  }
  .sf-icon-button--size-1\/2 {
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-default));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-default));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-default));
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-default));
  }
  .sf-icon-button--size-1\/2.tightness-low {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));
  }
  .sf-icon-button--size-1\/2.spacing-compact {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-low));
  }
  .sf-icon-button--size-1\/2.tightness-high {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));
  }
  .sf-icon-button--size-1\/2.spacing-comfortable {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-high));
  }
  .sf-icon-button--size-1\/2.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));
  }
  .sf-icon-button--size-1\/2.spacing-spacious {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/2--space-y-tightness-highest));
  }
  .sf-icon-button--size-1\/3 {
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-default));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-default));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-default));
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-default));
  }
  .sf-icon-button--size-1\/3.tightness-low {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));
  }
  .sf-icon-button--size-1\/3.spacing-compact {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-low));
  }
  .sf-icon-button--size-1\/3.tightness-high {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));
  }
  .sf-icon-button--size-1\/3.spacing-comfortable {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-high));
  }
  .sf-icon-button--size-1\/3.tightness-highest {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));
  }
  .sf-icon-button--size-1\/3.spacing-spacious {
    --sf-icon-button--padding-top: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-bottom: var(--sf-icon-button-padding-block, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-start: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));
    --sf-icon-button--padding-inline-end: var(--sf-icon-button-padding-inline, var(--sf-ui-1\/3--space-y-tightness-highest));
  }
  .sf-icon-button--outline {
    --sf-icon-button--border-bottom-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-inline-end-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-inline-start-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-style: solid;
    --sf-icon-button--border-top-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-width: var(--sf-icon-button-border-width, var(--sf-px));
  }
  .sf-icon-button.radius-default {
    border-radius: var(--sf-radius-default);
  }
  .sf-icon-button.radius-square {
    border-radius: var(--sf-radius-square);
  }
  .sf-icon-button.radius-rounded {
    border-radius: var(--sf-radius-rounded);
  }
  .sf-icon-button.segment-start {
    --sf-icon-button--border-top-right-radius: var(--sf-radius-square);
    --sf-icon-button--border-bottom-right-radius: var(--sf-radius-square);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
  }
  .sf-icon-button.segment-middle {
    --sf-icon-button--border-top-left-radius: var(--sf-radius-square);
    --sf-icon-button--border-top-right-radius: var(--sf-radius-square);
    --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-inline-start-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button.segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button.segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button.segment-end:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button.segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-icon-button.segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button.segment-end:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button.segment-end {
    --sf-icon-button--border-top-left-radius: var(--sf-radius-square);
    --sf-icon-button--border-bottom-left-radius: var(--sf-radius-square);
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-end:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-end:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-end {
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-start:where(:dir(ltr)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-start:where(:dir(rtl)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-start {
    border-inline-end-color: transparent;
    border-inline-end-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(ltr)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-end-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(rtl)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(ltr)) {
    border-left-color: transparent;
    border-left-color: var(--sf-white--alfa-24, transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
    }
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle:where(:dir(rtl)) {
    border-right-color: transparent;
    border-right-color: var(--sf-white--alfa-24, transparent);
  }
  .sf-icon-button:not(.sf-icon-button--outline).segment-middle {
    border-inline-end-color: transparent;
    border-inline-end-color: var(--sf-white--alfa-24, transparent);
    border-inline-start-color: transparent;
    border-inline-start-color: var(--sf-white--alfa-24, transparent);
  }
  /* Surface, built on the neutral alpha ramp. Same reading as on the button: not
     a colour of its own but a degree of contrast against whatever is behind it,
     so one declaration is right in both themes. The icon keeps the role colour,
     because the fill is too faint to carry one. `--ghost` reads as `--link`, as
     on the button. */
  .sf-icon-button.sf-icon-button--surface {
    --sf-icon-button--background-color: transparent;
  }
  .sf-icon-button.sf-icon-button--surface {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-alpha-4));
    --sf-icon-button--border-color: var(--sf-icon-button-border-color, var(--sf-alpha-8));
    --sf-icon-button--border-bottom-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-inline-end-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-inline-start-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-style: solid;
    --sf-icon-button--border-top-width: var(--sf-icon-button-border-width, var(--sf-px));
    --sf-icon-button--border-width: var(--sf-icon-button-border-width, var(--sf-px));
  }
  .sf-icon-button.sf-icon-button--surface.sf-icon-button--on-surface {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--surface.sf-icon-button--on-surface.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-surface));
  }
  .sf-icon-button.sf-icon-button--surface.sf-icon-button--primary {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-primary));
  }
  .sf-icon-button.sf-icon-button--surface.sf-icon-button--primary.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-primary));
  }
}
@layer sf.states {
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:disabled, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:disabled, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:disabled {
    --sf-icon-button--border-color: var(--sf-outline-variant);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-hover);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-secondary-container-hover);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-primary-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-surface-container-hover);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-primary-active);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-secondary-container-active);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-primary-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-surface-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):hover, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-on-surface-hover);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--icon:not(:disabled):not(.disabled).active, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled):active, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-on-surface-active);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--secondary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--tonal.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--default.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--close:disabled > .sf-close > .sf-close-icon, .sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button:not(:disabled):not(.disabled).focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
    /* The same second line the button draws: on a filled control the ring
       colour can sit next to the fill on one ramp and disappear into it, so the
       control's own ink separates them. Transparent where there is no fill to
       separate from. */
    --sf-icon-button--focus-inset: inset 0 0 0 var(--sf-focus--offset) var(--sf-icon-button--focus-ink, transparent);
  }
  .sf-icon-button:not(:disabled):not(.disabled):focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
    /* The same second line the button draws: on a filled control the ring
       colour can sit next to the fill on one ramp and disappear into it, so the
       control's own ink separates them. Transparent where there is no fill to
       separate from. */
    --sf-icon-button--focus-inset: inset 0 0 0 var(--sf-focus--offset) var(--sf-icon-button--focus-ink, transparent);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--primary {
    --sf-icon-button--focus-ink: var(--sf-on-primary);
  }
  /* Flush against its neighbours, so the ring turns inwards. Same colour, same
     width, only the offset changes sign. */
  .sf-icon-button.segment-start:not(:disabled):not(.disabled).focus-visible,
  .sf-icon-button.segment-middle:not(:disabled):not(.disabled).focus-visible,
  .sf-icon-button.segment-end:not(:disabled):not(.disabled).focus-visible {
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-icon-button.segment-start:not(:disabled):not(.disabled):focus-visible,
  .sf-icon-button.segment-middle:not(:disabled):not(.disabled):focus-visible,
  .sf-icon-button.segment-end:not(:disabled):not(.disabled):focus-visible {
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  @media (forced-colors: active) {
    .sf-icon-button:not(:disabled):not(.disabled).focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
    }
    .sf-icon-button:not(:disabled):not(.disabled):focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
    }
  }
  /* The states of the two ramp appearances: one step up on hover, another when
     pressed, and surface raises its border alongside. */
  .sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-alpha-8);
  }
  .sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):hover {
    --sf-icon-button--border-color: var(--sf-alpha-12);
  }
  .sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-alpha-12);
  }
  .sf-icon-button.sf-icon-button--surface.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-alpha-12);
  }
  .sf-icon-button.sf-icon-button--surface:not(:disabled):not(.disabled):active {
    --sf-icon-button--border-color: var(--sf-alpha-16);
  }
  .sf-icon-button.sf-icon-button--surface.active:not(:disabled):not(.disabled) {
    --sf-icon-button--border-color: var(--sf-alpha-16);
  }
  .sf-icon-button.sf-icon-button--surface:disabled,
  .sf-icon-button.sf-icon-button--surface.disabled {
    --sf-icon-button--background-color: transparent;
    --sf-icon-button--border-color: var(--sf-alpha-4);
  }
  .sf-icon-button.sf-icon-button--surface:disabled,
  .sf-icon-button.sf-icon-button--surface.disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--surface:disabled > .sf-close > .sf-close-icon,
  .sf-icon-button.sf-icon-button--surface.disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
}
/* The destructive scheme. Every role it paints with is the error family's twin
   of the primary one -- fill, text, hover, active, disabled and the focus ink --
   so a destructive control behaves exactly like a primary one and only its
   colour says what it does. Added because the Framework had error roles and no
   way for a control to use them: a product that wanted a red delete had to
   reach past the component and set its colour by hand, and the next one would
   have done it again. The outline's border stays the neutral control outline,
   as it does for every other scheme. */
@layer sf.components {
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-error));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-error));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon,
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, var(--sf-error-container));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-on-error-container));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
    --sf-icon-button--border-color: var(--sf-icon-button-border-color, var(--sf-outline));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-error));
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close {
    --sf-icon-button--background-color: var(--sf-icon-button-background-color, transparent);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-error-active));
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon {
    --sf-icon--color: var(--sf-icon-button-color, var(--sf-error-active));
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-error));
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-on-error-container));
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-error));
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-error-active));
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-icon-button-color, var(--sf-error-active));
  }
}
@layer sf.states {
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:disabled,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:disabled {
    --sf-icon-button--background-color: var(--sf-disable);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:disabled,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:disabled {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:disabled,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:disabled {
    --sf-icon-button--border-color: var(--sf-outline-variant);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-hover);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover,
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):hover,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):hover {
    --sf-icon-button--background-color: var(--sf-error-container-hover);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).active,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-error-active);
  }
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).active,
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--tonal.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close.active:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).active,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):active,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).active {
    --sf-icon-button--background-color: var(--sf-error-container-active);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close.focus-visible:not(:disabled):not(.disabled) {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled).focus-visible,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled).focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--icon:not(:disabled):not(.disabled):focus-visible,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:not(:disabled):not(.disabled):focus-visible {
    --sf-icon-button--background-color: var(--sf-transparent-for-focus);
  }
  .sf-icon-button.sf-icon-button--link.sf-icon-button--error.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--ghost.sf-icon-button--error.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error.sf-icon-button--close:disabled > .sf-close > .sf-close-icon,
  .sf-icon-button.sf-icon-button--outline.sf-icon-button--error.sf-icon-button--close:disabled > .sf-close > .sf-close-icon {
    --sf-close-icon--background-color: var(--sf-on-disable);
  }
  .sf-icon-button.sf-icon-button--default.sf-icon-button--error {
    --sf-icon-button--focus-ink: var(--sf-on-error);
  }
}
@layer sf.override {
  sf-icon-button[\:has\(.sf-icon-button--outline\[class*\%3Dsegment-\]\)] + sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(.sf-icon-button--outline[class*=segment-]) + sf-icon-button .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button[\:has\(.sf-icon-button--outline\[class*\%3Dsegment-\]\)] + sf-button .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-button[class*=segment-]:not(.sf-button--outline) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(.sf-icon-button--outline[class*=segment-]) + sf-button .sf-button[class*=segment-]:not(.sf-button--outline),
  .sf-icon-button.sf-icon-button--outline[class*=segment-] + .sf-button[class*=segment-]:not(.sf-button--outline) {
    --sf-button--border-top-width: var(--sf-px);
    --sf-button--border-inline-end-width: var(--sf-px);
    --sf-button--border-bottom-width: var(--sf-px);
    --sf-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button[\:has\(\%2B\%20sf-icon-button\%20.sf-icon-button--outline\[class*\%3Dsegment-\]\)] .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline)[\:has\(\%2B\%20.sf-icon-button.sf-icon-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(+ sf-icon-button .sf-icon-button--outline[class*=segment-]) .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline):has(+ .sf-icon-button.sf-icon-button--outline[class*=segment-]) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button[\:has\(\%2B\%20sf-button\%20.sf-button--outline\[class*\%3Dsegment-\]\)] .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline)[\:has\(\%2B\%20.sf-button.sf-button--outline\[class*\%3Dsegment-\]\)] {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
  sf-icon-button:has(+ sf-button .sf-button--outline[class*=segment-]) .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline),
  .sf-icon-button[class*=segment-]:not(.sf-icon-button--outline):has(+ .sf-button.sf-button--outline[class*=segment-]) {
    --sf-icon-button--border-top-width: var(--sf-px);
    --sf-icon-button--border-inline-end-width: var(--sf-px);
    --sf-icon-button--border-bottom-width: var(--sf-px);
    --sf-icon-button--border-inline-start-width: var(--sf-px);
  }
}
/* An icon button sets .loading as a button does (sf-icon-button loading) and
   had no rule for it: it went disabled with no sign of work. The same stripes
   as .sf-button.loading, defined here so the icon-button sheet alone draws them. */
@layer sf.components {
  .sf-icon-button {
    --sf-icon-button-loading-stripe: var(--sf-alpha-8);
  }
  .sf-icon-button > * {
    position: relative;
    z-index: 1;
  }
  .sf-icon-button.loading, .sf-icon-button.sf-icon-button-state-loading {
    pointer-events: none;
    position: relative;
    overflow: hidden;
  }
  .sf-icon-button.loading::after, .sf-icon-button.sf-icon-button-state-loading::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    inset: -50%;
    background-image: repeating-linear-gradient(135deg, var(--sf-icon-button-loading-stripe) 0, var(--sf-icon-button-loading-stripe) var(--sf-space-1\/2), transparent var(--sf-space-1\/2), transparent var(--sf-space-1));
    -webkit-animation: sf-icon-button-stripes-slide calc(var(--sf-duration-slow) * 2) linear infinite;
            animation: sf-icon-button-stripes-slide calc(var(--sf-duration-slow) * 2) linear infinite;
    will-change: transform;
    pointer-events: none;
  }
  @-webkit-keyframes sf-icon-button-stripes-slide {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(calc(var(--sf-space-1) * 1.41421356));
              transform: translateX(calc(var(--sf-space-1) * 1.41421356));
    }
  }
  @keyframes sf-icon-button-stripes-slide {
    from {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(calc(var(--sf-space-1) * 1.41421356));
              transform: translateX(calc(var(--sf-space-1) * 1.41421356));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-icon-button.loading::after,
    .sf-icon-button.sf-icon-button-state-loading::after {
      -webkit-animation: none;
              animation: none;
    }
  }
}