/* docara-shell-source: runtime/component/file-upload/css/file-upload.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-file-upload {
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-file-upload--border-bottom-right-radius, var(--sf-radius--surface));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-file-upload {
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-file-upload--border-bottom-right-radius, var(--sf-radius--surface));
    }
  }
  .sf-file-upload:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-file-upload--border-bottom-right-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-file-upload {
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-file-upload--border-bottom-right-radius, var(--sf-radius--surface));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-file-upload {
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-file-upload--border-bottom-right-radius, var(--sf-radius--surface));
    }
  }
  .sf-file-upload:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-file-upload--border-bottom-right-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-file-upload {
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-file-upload--border-bottom-left-radius, var(--sf-radius--surface));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-file-upload {
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-file-upload--border-bottom-left-radius, var(--sf-radius--surface));
    }
  }
  .sf-file-upload:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-file-upload--border-bottom-left-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-file-upload {
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-file-upload--border-bottom-left-radius, var(--sf-radius--surface));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-file-upload {
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-file-upload--border-bottom-left-radius, var(--sf-radius--surface));
    }
  }
  .sf-file-upload:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-file-upload--border-bottom-left-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-file-upload {
    border-right-width: var(--sf-px);
    border-right-width: var(--sf-file-upload--border-right-width, var(--sf-px));
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .sf-file-upload {
    border-right-width: var(--sf-px);
    border-right-width: var(--sf-file-upload--border-right-width, var(--sf-px));
    }
  }
  .sf-file-upload:where(:dir(ltr)) {
    border-right-width: var(--sf-px);
    border-right-width: var(--sf-file-upload--border-right-width, var(--sf-px));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-file-upload {
    border-left-width: var(--sf-px);
    border-left-width: var(--sf-file-upload--border-right-width, var(--sf-px));
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .sf-file-upload {
    border-left-width: var(--sf-px);
    border-left-width: var(--sf-file-upload--border-right-width, var(--sf-px));
    }
  }
  .sf-file-upload:where(:dir(rtl)) {
    border-left-width: var(--sf-px);
    border-left-width: var(--sf-file-upload--border-right-width, var(--sf-px));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-file-upload {
    border-left-width: var(--sf-px);
    border-left-width: var(--sf-file-upload--border-left-width, var(--sf-px));
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .sf-file-upload {
    border-left-width: var(--sf-px);
    border-left-width: var(--sf-file-upload--border-left-width, var(--sf-px));
    }
  }
  .sf-file-upload:where(:dir(ltr)) {
    border-left-width: var(--sf-px);
    border-left-width: var(--sf-file-upload--border-left-width, var(--sf-px));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-file-upload {
    border-right-width: var(--sf-px);
    border-right-width: var(--sf-file-upload--border-left-width, var(--sf-px));
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .sf-file-upload {
    border-right-width: var(--sf-px);
    border-right-width: var(--sf-file-upload--border-left-width, var(--sf-px));
    }
  }
  .sf-file-upload:where(:dir(rtl)) {
    border-right-width: var(--sf-px);
    border-right-width: var(--sf-file-upload--border-left-width, var(--sf-px));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-file-upload {
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-file-upload--border-top-right-radius, var(--sf-radius--surface));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-file-upload {
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-file-upload--border-top-right-radius, var(--sf-radius--surface));
    }
  }
  .sf-file-upload:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-file-upload--border-top-right-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-file-upload {
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-file-upload--border-top-right-radius, var(--sf-radius--surface));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-file-upload {
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-file-upload--border-top-right-radius, var(--sf-radius--surface));
    }
  }
  .sf-file-upload:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-file-upload--border-top-right-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-file-upload {
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-file-upload--border-top-left-radius, var(--sf-radius--surface));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-file-upload {
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-file-upload--border-top-left-radius, var(--sf-radius--surface));
    }
  }
  .sf-file-upload:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-file-upload--border-top-left-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-file-upload {
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-file-upload--border-top-left-radius, var(--sf-radius--surface));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-file-upload {
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-file-upload--border-top-left-radius, var(--sf-radius--surface));
    }
  }
  .sf-file-upload:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-file-upload--border-top-left-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-file-upload {
    padding-left: var(--sf-file-upload--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-file-upload {
    padding-left: var(--sf-file-upload--padding-inline-start);
    }
  }
  .sf-file-upload:where(:dir(ltr)) {
    padding-left: var(--sf-file-upload--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-file-upload {
    padding-right: var(--sf-file-upload--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-file-upload {
    padding-right: var(--sf-file-upload--padding-inline-start);
    }
  }
  .sf-file-upload:where(:dir(rtl)) {
    padding-right: var(--sf-file-upload--padding-inline-start);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-file-upload {
    padding-right: var(--sf-file-upload--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-file-upload {
    padding-right: var(--sf-file-upload--padding-inline-end);
    }
  }
  .sf-file-upload:where(:dir(ltr)) {
    padding-right: var(--sf-file-upload--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-file-upload {
    padding-left: var(--sf-file-upload--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-file-upload {
    padding-left: var(--sf-file-upload--padding-inline-end);
    }
  }
  .sf-file-upload:where(:dir(rtl)) {
    padding-left: var(--sf-file-upload--padding-inline-end);
  }
  .sf-file-upload {
    border-bottom-width: var(--sf-px);
    border-bottom-width: var(--sf-file-upload--border-bottom-width, var(--sf-px));
    border-end-end-radius: var(--sf-radius--surface);
    border-end-end-radius: var(--sf-file-upload--border-bottom-right-radius, var(--sf-radius--surface));
    border-end-start-radius: var(--sf-radius--surface);
    border-end-start-radius: var(--sf-file-upload--border-bottom-left-radius, var(--sf-radius--surface));
    border-inline-end-width: var(--sf-px);
    border-inline-end-width: var(--sf-file-upload--border-right-width, var(--sf-px));
    border-inline-start-width: var(--sf-px);
    border-inline-start-width: var(--sf-file-upload--border-left-width, var(--sf-px));
    border-start-end-radius: var(--sf-radius--surface);
    border-start-end-radius: var(--sf-file-upload--border-top-right-radius, var(--sf-radius--surface));
    border-start-start-radius: var(--sf-radius--surface);
    border-start-start-radius: var(--sf-file-upload--border-top-left-radius, var(--sf-radius--surface));
    border-top-width: var(--sf-px);
    border-top-width: var(--sf-file-upload--border-top-width, var(--sf-px));
    gap: var(--sf-file-upload--gap);
    -webkit-padding-start: var(--sf-file-upload--padding-inline-start);
            padding-inline-start: var(--sf-file-upload--padding-inline-start);
    padding-top: var(--sf-file-upload--padding-top);
    -webkit-padding-end: var(--sf-file-upload--padding-inline-end);
            padding-inline-end: var(--sf-file-upload--padding-inline-end);
    padding-bottom: var(--sf-file-upload--padding-bottom);
    background-color: var(--sf-file-upload--background-color);
    border-color: transparent;
    border-color: var(--sf-file-upload--border-color, transparent);
    box-shadow: var(--sf-file-upload--box-shadow);
    --sf-file-upload--background-color: var(--sf-surface-0);
    --sf-file-upload--border-color: var(--sf-outline);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-file-upload-bottom--gap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-file-upload .sf-file-upload-bottom {
    --sf-file-upload-bottom--background-color: transparent;
    --sf-file-upload-bottom--gap: var(--sf-space-1\/4);
    background-color: var(--sf-file-upload-bottom--background-color);
    gap: var(--sf-file-upload-bottom--gap);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-file-upload-block--gap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-file-upload .sf-file-upload-block {
    --sf-file-upload-block--background-color: transparent;
    --sf-file-upload-block--gap: var(--sf-space-1\/4);
    background-color: var(--sf-file-upload-block--background-color);
    gap: var(--sf-file-upload-block--gap);
  }
  .sf-file-upload .sf-file-upload-link {
    --sf-file-upload-link--color: var(--sf-primary);
    --sf-file-upload-link--font-family: var(--sf-text--family);
    --sf-file-upload-link--font-weight: var(--sf-font-weight-medium);
    --sf-file-upload-link--margin-bottom: var(--sf-text--margin);
    color: var(--sf-file-upload-link--color);
    font-family: var(--sf-file-upload-link--font-family);
    font-size: var(--sf-file-upload-link--font-size);
    font-weight: var(--sf-file-upload-link--font-weight);
    line-height: var(--sf-file-upload-link--line-height);
    margin-bottom: var(--sf-file-upload-link--margin-bottom);
  }
  .sf-file-upload .sf-file-upload-block-text {
    --sf-file-upload-block-text--color: var(--sf-on-surface-variant);
    --sf-file-upload-block-text--font-family: var(--sf-text--family);
    --sf-file-upload-block-text--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-file-upload-block-text--color);
    font-family: var(--sf-file-upload-block-text--font-family);
    font-size: var(--sf-file-upload-block-text--font-size);
    font-weight: var(--sf-file-upload-block-text--font-weight);
    line-height: var(--sf-file-upload-block-text--line-height);
  }
  .sf-file-upload .sf-file-upload-text {
    --sf-file-upload-text--color: var(--sf-on-surface-variant);
    --sf-file-upload-text--font-family: var(--sf-text--family);
    --sf-file-upload-text--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-file-upload-text--color);
    font-family: var(--sf-file-upload-text--font-family);
    font-size: var(--sf-file-upload-text--font-size);
    font-weight: var(--sf-file-upload-text--font-weight);
    line-height: var(--sf-file-upload-text--line-height);
  }
  .sf-file-upload .sf-featured-icon > .sf-icon {
    color: var(--sf-icon-featured-icon--color);
  }
  .sf-file-upload--size-1 .sf-file-upload-link {
    --sf-file-upload-link--font-size: var(--sf-text-size-1);
    --sf-file-upload-link--line-height: var(--sf-text-height-1);
  }
  .sf-file-upload--size-1 .sf-file-upload-block-text {
    --sf-file-upload-block-text--font-size: var(--sf-text-size-1);
    --sf-file-upload-block-text--line-height: var(--sf-text-height-1);
  }
  .sf-file-upload--size-1 .sf-file-upload-text {
    --sf-file-upload-text--font-size: var(--sf-text-size-1);
    --sf-file-upload-text--line-height: var(--sf-text-height-1);
  }
  .sf-file-upload--size-2 .sf-file-upload-link {
    --sf-file-upload-link--font-size: var(--sf-text-size-2);
    --sf-file-upload-link--line-height: var(--sf-text-height-2);
  }
  .sf-file-upload--size-2 .sf-file-upload-block-text {
    --sf-file-upload-block-text--font-size: var(--sf-text-size-2);
    --sf-file-upload-block-text--line-height: var(--sf-text-height-2);
  }
  .sf-file-upload--size-2 .sf-file-upload-text {
    --sf-file-upload-text--font-size: var(--sf-text-size-2);
    --sf-file-upload-text--line-height: var(--sf-text-height-2);
  }
  .sf-file-upload--size-1\/2 .sf-file-upload-link {
    --sf-file-upload-link--font-size: var(--sf-text-size-1\/2);
    --sf-file-upload-link--line-height: var(--sf-text-height-1\/2);
  }
  .sf-file-upload--size-1\/2 .sf-file-upload-block-text {
    --sf-file-upload-block-text--font-size: var(--sf-text-size-1\/2);
    --sf-file-upload-block-text--line-height: var(--sf-text-height-1\/2);
  }
  .sf-file-upload--size-1\/2 .sf-file-upload-text {
    --sf-file-upload-text--font-size: var(--sf-text-size-1\/2);
    --sf-file-upload-text--line-height: var(--sf-text-height-1\/2);
  }
  .sf-file-upload--size-1 {
    --sf-file-upload--gap: var(--sf-space-1\/3);
    --sf-file-upload--padding-bottom: var(--sf-space-1);
    --sf-file-upload--padding-inline-end: var(--sf-space-3);
    --sf-file-upload--padding-inline-start: var(--sf-space-3);
    --sf-file-upload--padding-top: var(--sf-space-1);
  }
  .sf-file-upload--size-2 {
    --sf-file-upload--gap: var(--sf-space-1\/2);
    --sf-file-upload--padding-bottom: var(--sf-space-2);
    --sf-file-upload--padding-inline-end: var(--sf-space-4);
    --sf-file-upload--padding-inline-start: var(--sf-space-4);
    --sf-file-upload--padding-top: var(--sf-space-2);
  }
  .sf-file-upload--size-1\/2 {
    --sf-file-upload--gap: var(--sf-space-1\/3);
    --sf-file-upload--padding-bottom: var(--sf-space-1\/2);
    --sf-file-upload--padding-inline-end: var(--sf-space-2);
    --sf-file-upload--padding-inline-start: var(--sf-space-2);
    --sf-file-upload--padding-top: var(--sf-space-1\/2);
  }
  .sf-file-upload:not([disabled]):not(.disabled).focus-visible {
    --sf-file-upload--border-color: var(--sf-outline-variant);
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-file-upload:not([disabled]):not(.disabled):focus-visible {
    --sf-file-upload--border-color: var(--sf-outline-variant);
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-file-upload:not([disabled]):not(.disabled).focus-visible .sf-featured-icon .sf-icon, .sf-file-upload:not([disabled]):not(.disabled):hover .sf-featured-icon .sf-icon {
    color: var(--sf-primary);
  }
  .sf-file-upload:not([disabled]):not(.disabled):focus-visible .sf-featured-icon .sf-icon, .sf-file-upload:not([disabled]):not(.disabled):hover .sf-featured-icon .sf-icon {
    color: var(--sf-primary);
  }
  .sf-file-upload:not([disabled]):not(.disabled):hover {
    --sf-file-upload--border-color: var(--sf-outline-primary);
  }
  /* A file held over the area: the script set .dragover and nothing drew it, so a
     person dropping had no sign the area would take the file. */
  .sf-file-upload.dragover:not([disabled]):not(.disabled) {
    --sf-file-upload--background-color: var(--sf-primary-transparent-select);
    --sf-file-upload--border-color: var(--sf-outline-primary);
  }
  .sf-file-upload.dragover:not([disabled]):not(.disabled) .sf-featured-icon .sf-icon {
    color: var(--sf-primary);
  }
  .sf-file-upload[disabled] {
    --sf-file-upload--background-color: var(--sf-disable);
    --sf-file-upload--border-color: var(--sf-outline-disable);
  }
  .sf-file-upload.disabled {
    --sf-file-upload--background-color: var(--sf-disable);
    --sf-file-upload--border-color: var(--sf-outline-disable);
  }
  .sf-file-upload[disabled] .sf-featured-icon .sf-icon {
    color: var(--sf-on-disable);
  }
  .sf-file-upload.disabled .sf-featured-icon .sf-icon {
    color: var(--sf-on-disable);
  }
  .sf-file-upload[disabled] .sf-file-upload-link {
    --sf-file-upload-link--color: var(--sf-on-disable);
  }
  .sf-file-upload.disabled .sf-file-upload-link {
    --sf-file-upload-link--color: var(--sf-on-disable);
  }
  .sf-file-upload[disabled] .sf-file-upload-block-text {
    --sf-file-upload-block-text--color: var(--sf-on-disable);
  }
  .sf-file-upload.disabled .sf-file-upload-block-text {
    --sf-file-upload-block-text--color: var(--sf-on-disable);
  }
  .sf-file-upload[disabled] .sf-file-upload-text {
    --sf-file-upload-text--color: var(--sf-on-disable);
  }
  .sf-file-upload.disabled .sf-file-upload-text {
    --sf-file-upload-text--color: var(--sf-on-disable);
  }
  @media (forced-colors: active) {
    .sf-file-upload:not([disabled]):not(.disabled).focus-visible {
      outline: var(--sf-focus-outline-width) solid Highlight;
      outline-offset: var(--sf-focus-outline-width);
    }
    .sf-file-upload:not([disabled]):not(.disabled):focus-visible {
      outline: var(--sf-focus-outline-width) solid Highlight;
      outline-offset: var(--sf-focus-outline-width);
    }
  }
}
@layer sf.components {
  .sf-upload-progress-repeat:not(:disabled).focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-upload-progress-repeat:not(:disabled):focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  @media (forced-colors: active) {
    .sf-upload-progress-repeat:not(:disabled).focus-visible {
      box-shadow: none;
      outline: var(--sf-focus-outline-width) solid Highlight;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
    }
    .sf-upload-progress-repeat:not(:disabled):focus-visible {
      box-shadow: none;
      outline: var(--sf-focus-outline-width) solid Highlight;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
    }
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-upload-progress {
    min-width: 0;
    min-inline-size: 0;
    background-color: transparent;
    background-color: var(--sf-upload-progress--background-color, transparent);
    gap: var(--sf-upload-progress--gap);
  }
  .sf-upload-progress-name,
  .sf-upload-progress-text,
  .sf-upload-progress-repeat {
    word-wrap: anywhere;
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) gap/var(--sf-upload-progress-content--gap) */
  .sf-upload-progress .sf-upload-progress-content {
    min-width: 0;
    min-inline-size: 0;
    --sf-upload-progress-content--background-color: transparent;
    background-color: var(--sf-upload-progress-content--background-color);
    gap: var(--sf-upload-progress-content--gap);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) gap/var(--sf-upload-progress-top--gap) */
  .sf-upload-progress .sf-upload-progress-top {
    min-width: 0;
    min-inline-size: 0;
    --sf-upload-progress-top--background-color: transparent;
    background-color: var(--sf-upload-progress-top--background-color);
    gap: var(--sf-upload-progress-top--gap);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-upload-progress .sf-upload-progress-left {
    min-width: 0;
    min-inline-size: 0;
    --sf-upload-progress-left--background-color: transparent;
    background-color: var(--sf-upload-progress-left--background-color);
  }
  .sf-upload-progress .sf-upload-progress-name {
    --sf-upload-progress-name--color: var(--sf-on-surface);
    --sf-upload-progress-name--font-family: var(--sf-text--family);
    --sf-upload-progress-name--font-weight: var(--sf-font-weight-medium);
    color: var(--sf-upload-progress-name--color);
    font-family: var(--sf-upload-progress-name--font-family);
    font-size: var(--sf-upload-progress-name--font-size);
    font-weight: var(--sf-upload-progress-name--font-weight);
    line-height: var(--sf-upload-progress-name--line-height);
  }
  .sf-upload-progress .sf-upload-progress-text {
    --sf-upload-progress-text--font-family: var(--sf-text--family);
    --sf-upload-progress-text--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-upload-progress-text--color);
    font-family: var(--sf-upload-progress-text--font-family);
    font-size: var(--sf-upload-progress-text--font-size);
    font-weight: var(--sf-upload-progress-text--font-weight);
    line-height: var(--sf-upload-progress-text--line-height);
  }
  .sf-upload-progress .sf-icon {
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-on-surface-variant));
    font-size: var(--sf-icon--font-size);
    height: var(--sf-icon--height);
    width: var(--sf-icon--width);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-upload-progress .sf-icon-button {
    padding-right: var(--sf-icon-button--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-upload-progress .sf-icon-button {
    padding-right: var(--sf-icon-button--padding-inline-end);
    }
  }
  .sf-upload-progress .sf-icon-button:where(:dir(ltr)) {
    padding-right: var(--sf-icon-button--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-upload-progress .sf-icon-button {
    padding-left: var(--sf-icon-button--padding-inline-end);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-upload-progress .sf-icon-button {
    padding-left: var(--sf-icon-button--padding-inline-end);
    }
  }
  .sf-upload-progress .sf-icon-button:where(:dir(rtl)) {
    padding-left: var(--sf-icon-button--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-upload-progress .sf-icon-button {
    padding-left: var(--sf-icon-button--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-upload-progress .sf-icon-button {
    padding-left: var(--sf-icon-button--padding-inline-start);
    }
  }
  .sf-upload-progress .sf-icon-button:where(:dir(ltr)) {
    padding-left: var(--sf-icon-button--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-upload-progress .sf-icon-button {
    padding-right: var(--sf-icon-button--padding-inline-start);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-upload-progress .sf-icon-button {
    padding-right: var(--sf-icon-button--padding-inline-start);
    }
  }
  .sf-upload-progress .sf-icon-button:where(:dir(rtl)) {
    padding-right: var(--sf-icon-button--padding-inline-start);
  }
  .sf-upload-progress .sf-icon-button {
    flex-shrink: 0;
    padding-bottom: var(--sf-icon-button--padding-bottom);
    -webkit-padding-end: var(--sf-icon-button--padding-inline-end);
            padding-inline-end: var(--sf-icon-button--padding-inline-end);
    -webkit-padding-start: var(--sf-icon-button--padding-inline-start);
            padding-inline-start: var(--sf-icon-button--padding-inline-start);
    padding-top: var(--sf-icon-button--padding-top);
  }
  .sf-upload-progress .sf-upload-progress-repeat {
    --sf-upload-progress-repeat--radius: var(--sf-radius--ui);
    max-width: 100%;
    max-inline-size: 100%;
    border-radius: var(--sf-upload-progress-repeat--radius);
    padding-top: max(var(--sf-upload-progress-repeat--padding-block), var(--sf-focus-outline-width));
    padding-bottom: max(var(--sf-upload-progress-repeat--padding-block), var(--sf-focus-outline-width));
    padding-block: max(var(--sf-upload-progress-repeat--padding-block), var(--sf-focus-outline-width));
    padding-left: max(var(--sf-upload-progress-repeat--padding-inline), var(--sf-focus-outline-width));
    padding-right: max(var(--sf-upload-progress-repeat--padding-inline), var(--sf-focus-outline-width));
    padding-inline: max(var(--sf-upload-progress-repeat--padding-inline), var(--sf-focus-outline-width));
    color: var(--sf-upload-progress-repeat--color);
    font-family: var(--sf-upload-progress-repeat--font-family);
    font-size: var(--sf-upload-progress-repeat--font-size);
    font-weight: var(--sf-upload-progress-repeat--font-weight);
    line-height: var(--sf-upload-progress-repeat--line-height);
  }
  .sf-upload-progress > .sf-icon,
  .sf-upload-progress-top > .sf-icon {
    flex-shrink: 0;
  }
  .sf-upload-progress--size-1 .sf-upload-progress-content, .sf-upload-progress--size-1\/2 .sf-upload-progress-content {
    --sf-upload-progress-content--gap: var(--sf-space-1\/4);
  }
  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1\/2 .sf-upload-progress-top, .sf-upload-progress.sf-upload-progress--done.sf-upload-progress--size-1\/2 .sf-upload-progress-top, .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1\/2 .sf-upload-progress-top, .sf-upload-progress--size-1 .sf-upload-progress-top {
    --sf-upload-progress-top--gap: var(--sf-space-1\/3);
  }
  .sf-upload-progress--size-1 .sf-upload-progress-name {
    --sf-upload-progress-name--font-size: var(--sf-text-size-1);
    --sf-upload-progress-name--line-height: var(--sf-text-height-1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-2 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-2 .sf-button .sf-icon {
    padding-right: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-2 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-2 .sf-button .sf-icon {
    padding-right: var(--sf-ui-1\/3--space-y-tightness-default);
    }
  }
  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1 .sf-button .sf-icon:where(:dir(ltr)), .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1 .sf-button .sf-icon:where(:dir(ltr)), .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-2 .sf-button .sf-icon:where(:dir(ltr)), .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-2 .sf-button .sf-icon:where(:dir(ltr)) {
    padding-right: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-2 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-2 .sf-button .sf-icon {
    padding-left: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-2 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-2 .sf-button .sf-icon {
    padding-left: var(--sf-ui-1\/3--space-y-tightness-default);
    }
  }
  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1 .sf-button .sf-icon:where(:dir(rtl)), .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1 .sf-button .sf-icon:where(:dir(rtl)), .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-2 .sf-button .sf-icon:where(:dir(rtl)), .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-2 .sf-button .sf-icon:where(:dir(rtl)) {
    padding-left: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-2 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-2 .sf-button .sf-icon {
    padding-left: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-2 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-2 .sf-button .sf-icon {
    padding-left: var(--sf-ui-1\/3--space-y-tightness-default);
    }
  }
  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1 .sf-button .sf-icon:where(:dir(ltr)), .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1 .sf-button .sf-icon:where(:dir(ltr)), .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-2 .sf-button .sf-icon:where(:dir(ltr)), .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-2 .sf-button .sf-icon:where(:dir(ltr)) {
    padding-left: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-2 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-2 .sf-button .sf-icon {
    padding-right: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-2 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-2 .sf-button .sf-icon {
    padding-right: var(--sf-ui-1\/3--space-y-tightness-default);
    }
  }
  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1 .sf-button .sf-icon:where(:dir(rtl)), .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1 .sf-button .sf-icon:where(:dir(rtl)), .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-2 .sf-button .sf-icon:where(:dir(rtl)), .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-2 .sf-button .sf-icon:where(:dir(rtl)) {
    padding-right: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1 .sf-button .sf-icon, .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1 .sf-button .sf-icon, .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-2 .sf-button .sf-icon, .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-2 .sf-button .sf-icon {
    padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    -webkit-padding-end: var(--sf-ui-1\/3--space-y-tightness-default);
            padding-inline-end: var(--sf-ui-1\/3--space-y-tightness-default);
    -webkit-padding-start: var(--sf-ui-1\/3--space-y-tightness-default);
            padding-inline-start: var(--sf-ui-1\/3--space-y-tightness-default);
    padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
  }
  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1 .sf-upload-progress-repeat {
    --sf-upload-progress-repeat--padding-block: var(--sf-ui-1--space-y-tightness-default);
    --sf-upload-progress-repeat--padding-inline: var(--sf-ui-1--space-x);
    --sf-upload-progress-repeat--font-size: var(--sf-text-size-1);
    --sf-upload-progress-repeat--line-height: var(--sf-text-height-1);
  }
  .sf-upload-progress--size-2 .sf-upload-progress-content {
    --sf-upload-progress-content--gap: var(--sf-space-1\/3);
  }
  .sf-upload-progress--size-2 .sf-upload-progress-top {
    --sf-upload-progress-top--gap: var(--sf-space-1\/2);
  }
  .sf-upload-progress--size-2 .sf-upload-progress-name {
    --sf-upload-progress-name--font-size: var(--sf-text-size-2);
    --sf-upload-progress-name--line-height: var(--sf-text-height-2);
  }
  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-2 .sf-upload-progress-repeat {
    --sf-upload-progress-repeat--padding-block: var(--sf-ui-2--space-y-tightness-default);
    --sf-upload-progress-repeat--padding-inline: var(--sf-ui-2--space-x);
    --sf-upload-progress-repeat--font-size: var(--sf-text-size-2);
    --sf-upload-progress-repeat--line-height: var(--sf-text-height-2);
  }
  .sf-upload-progress--size-1\/2 .sf-upload-progress-name {
    --sf-upload-progress-name--font-size: var(--sf-text-size-1\/2);
    --sf-upload-progress-name--line-height: var(--sf-text-height-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1\/2 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1\/2 .sf-button .sf-icon {
    padding-right: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1\/2 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1\/2 .sf-button .sf-icon {
    padding-right: var(--sf-ui-1\/3--space-y-tightness-default);
    }
  }
  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1\/2 .sf-button .sf-icon:where(:dir(ltr)), .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1\/2 .sf-button .sf-icon:where(:dir(ltr)) {
    padding-right: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1\/2 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1\/2 .sf-button .sf-icon {
    padding-left: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1\/2 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1\/2 .sf-button .sf-icon {
    padding-left: var(--sf-ui-1\/3--space-y-tightness-default);
    }
  }
  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1\/2 .sf-button .sf-icon:where(:dir(rtl)), .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1\/2 .sf-button .sf-icon:where(:dir(rtl)) {
    padding-left: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1\/2 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1\/2 .sf-button .sf-icon {
    padding-left: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1\/2 .sf-button .sf-icon,html:not([dir="rtl"])  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1\/2 .sf-button .sf-icon {
    padding-left: var(--sf-ui-1\/3--space-y-tightness-default);
    }
  }
  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1\/2 .sf-button .sf-icon:where(:dir(ltr)), .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1\/2 .sf-button .sf-icon:where(:dir(ltr)) {
    padding-left: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1\/2 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1\/2 .sf-button .sf-icon {
    padding-right: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1\/2 .sf-button .sf-icon,[dir="rtl"]  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1\/2 .sf-button .sf-icon {
    padding-right: var(--sf-ui-1\/3--space-y-tightness-default);
    }
  }
  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1\/2 .sf-button .sf-icon:where(:dir(rtl)), .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1\/2 .sf-button .sf-icon:where(:dir(rtl)) {
    padding-right: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  .sf-upload-progress.sf-upload-progress--process.sf-upload-progress--size-1\/2 .sf-button .sf-icon, .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1\/2 .sf-button .sf-icon {
    -webkit-padding-end: var(--sf-ui-1\/3--space-y-tightness-default);
            padding-inline-end: var(--sf-ui-1\/3--space-y-tightness-default);
    -webkit-padding-start: var(--sf-ui-1\/3--space-y-tightness-default);
            padding-inline-start: var(--sf-ui-1\/3--space-y-tightness-default);
  }
  .sf-upload-progress.sf-upload-progress--error.sf-upload-progress--size-1\/2 .sf-upload-progress-repeat {
    --sf-upload-progress-repeat--padding-block: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-upload-progress-repeat--padding-inline: var(--sf-ui-1\/2--space-x);
    --sf-upload-progress-repeat--font-size: var(--sf-text-size-1\/2);
    --sf-upload-progress-repeat--line-height: var(--sf-text-height-1\/2);
  }
  .sf-upload-progress--size-1 {
    --sf-upload-progress--gap: var(--sf-space-1\/2);
  }
  .sf-upload-progress.sf-upload-progress--size-1 .sf-icon {
    --sf-icon--font-size: var(--sf-text-size-3);
    --sf-icon--height: var(--sf-text-size-3);
    --sf-icon--width: var(--sf-text-size-3);
  }
  .sf-upload-progress.sf-upload-progress--size-1 .sf-upload-progress-text {
    --sf-upload-progress-text--font-size: var(--sf-text-size-1\/2);
    --sf-upload-progress-text--line-height: var(--sf-text-height-1\/2);
  }
  .sf-upload-progress--size-2 {
    --sf-upload-progress--gap: var(--sf-space-1);
  }
  .sf-upload-progress.sf-upload-progress--size-2 .sf-icon {
    --sf-icon--font-size: var(--sf-text-size-4);
    --sf-icon--height: var(--sf-text-size-4);
    --sf-icon--width: var(--sf-text-size-4);
  }
  .sf-upload-progress.sf-upload-progress--size-2 .sf-upload-progress-text {
    --sf-upload-progress-text--font-size: var(--sf-text-size-1);
    --sf-upload-progress-text--line-height: var(--sf-text-height-1);
  }
  .sf-upload-progress--size-1\/2 {
    --sf-upload-progress--gap: var(--sf-space-1\/3);
  }
  .sf-upload-progress--size-1\/2 .sf-upload-progress-top {
    --sf-upload-progress-top--gap: var(--sf-upload-progress--gap);
  }
  .sf-upload-progress.sf-upload-progress--size-1\/2 .sf-icon {
    --sf-icon--font-size: var(--sf-text-size-2);
    --sf-icon--height: var(--sf-text-size-2);
    --sf-icon--width: var(--sf-text-size-2);
  }
  .sf-upload-progress.sf-upload-progress--size-1\/2 .sf-upload-progress-text {
    --sf-upload-progress-text--font-size: var(--sf-text-size-1\/3);
    --sf-upload-progress-text--line-height: var(--sf-text-height-1\/3);
  }
  .sf-upload-progress--process .sf-icon, .sf-upload-progress--done .sf-icon {
    --sf-icon--color: var(--sf-primary);
  }
  .sf-upload-progress--process .sf-upload-progress-text, .sf-upload-progress--done .sf-upload-progress-text {
    --sf-upload-progress-text--color: var(--sf-on-surface-variant);
  }
  .sf-upload-progress--process .sf-icon-button > .sf-icon, .sf-upload-progress--error .sf-icon-button > .sf-icon {
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-upload-progress--error .sf-icon {
    --sf-icon--color: var(--sf-error);
  }
  .sf-upload-progress--error .sf-upload-progress-text {
    --sf-upload-progress-text--color: var(--sf-on-surface);
  }
  .sf-upload-progress--error .sf-upload-progress-repeat {
    --sf-upload-progress-repeat--color: var(--sf-on-surface);
    --sf-upload-progress-repeat--font-family: var(--sf-text--family);
    --sf-upload-progress-repeat--font-weight: var(--sf-font-weight-bold);
  }
}