/* docara-shell-source: runtime/utility/scroll-slider-color/default/css/default.css */
@layer sf.utilities {
  .scroll-transparent,
  .scroll-thumb-transparent {
    --sf-scroll-bg-thumb: var(--sf-transparent);
  }
  .scroll-current,
  .scroll-thumb-current {
    --sf-scroll-bg-thumb: var(--sf-current);
  }
  .scroll-surface,
  .scroll-thumb-surface {
    --sf-scroll-bg-thumb: var(--sf-on-surface);
  }
  .scroll-primary,
  .scroll-thumb-primary {
    --sf-scroll-bg-thumb: var(--sf-on-primary);
  }
  .scroll-secondary,
  .scroll-thumb-secondary {
    --sf-scroll-bg-thumb: var(--sf-on-secondary);
  }
  .scroll-tertiary,
  .scroll-thumb-tertiary {
    --sf-scroll-bg-thumb: var(--sf-on-tertiary);
  }
}

/* docara-shell-source: runtime/utility/scroll-backdrop-color/default/css/default.css */
@layer sf.utilities {
  .scroll-bg-transparent {
    --sf-scroll-bg-track: var(--sf-transparent);
  }
  .scroll-bg-current {
    --sf-scroll-bg-track: var(--sf-current);
  }
  .scroll-bg-surface {
    --sf-scroll-bg-track: var(--sf-surface-transparent-overlay);
  }
  .scroll-bg-primary {
    --sf-scroll-bg-track: var(--sf-primary-transparent-overlay);
  }
  .scroll-bg-secondary {
    --sf-scroll-bg-track: var(--sf-secondary-transparent-overlay);
  }
  .scroll-bg-tertiary {
    --sf-scroll-bg-track: var(--sf-tertiary-transparent-overlay);
  }
  .scroll-bg-error {
    --sf-scroll-bg-track: var(--sf-error-transparent-overlay);
  }
  .scroll-bg-warning {
    --sf-scroll-bg-track: var(--sf-warning-transparent-overlay);
  }
  .scroll-bg-success {
    --sf-scroll-bg-track: var(--sf-success-transparent-overlay);
  }
}

/* docara-shell-source: runtime/utility/scroll-backdrop-width/default/css/default.css */
@layer sf.utilities {
  .scroll-bg-1 {
    --sf-scroll-bg-width: var(--sf-b0);
  }
  .scroll-bg-2 {
    --sf-scroll-bg-width: var(--sf-b4);
  }
  .scroll-bg-3 {
    --sf-scroll-bg-width: var(--sf-b8);
  }
  .scroll-bg-4 {
    --sf-scroll-bg-width: var(--sf-c1);
  }
}

/* docara-shell-source: runtime/utility/scroll-backdrop-radius/default/css/default.css */
@layer sf.utilities {
  .scroll-bg-radius-1 {
    --sf-scroll-radius: var(--sf-a1);
  }
  .scroll-bg-radius-2 {
    --sf-scroll-radius: var(--sf-a2);
  }
  .scroll-bg-radius-3 {
    --sf-scroll-radius: var(--sf-a4);
  }
  .scroll-bg-radius-4 {
    --sf-scroll-radius: var(--sf-a8);
  }
}