@use '@tokens' as tokens;
@use '../../settings/transitions';

$padding: tokens.$space-500;
$row-gap: tokens.$space-700;
$transition-duration: transitions.$duration-100;
$transition-timing: transitions.$timing-eased-out;

$track-height: tokens.$space-300;
$track-border-radius: tokens.$radius-100;
$track-background: tokens.$border-interactive-state-default;
$track-background-hover: tokens.$border-interactive-state-hover;
$track-background-active: tokens.$border-interactive-state-active;
$track-background-disabled: tokens.$disabled-background;
$track-lower-background: tokens.$selected-state-default;
$track-lower-background-hover: tokens.$selected-state-default;
$track-lower-background-active: tokens.$selected-state-default;
$track-lower-background-disabled: tokens.$disabled-foreground;

$thumb-width: tokens.$space-900;
$thumb-height: tokens.$space-1100;
$thumb-border-width: tokens.$border-width-200;
$thumb-border-width-state-disabled: tokens.$border-width-100;
$thumb-border-style: solid;
$thumb-border-color: tokens.$form-field-filled-border-state-default;
$thumb-border-color-state-hover: tokens.$form-field-filled-border-state-hover;
$thumb-border-color-state-active: tokens.$selected-state-default;
$thumb-border-color-state-disabled: tokens.$disabled-foreground;
$thumb-border-radius: tokens.$radius-200;
$thumb-background-color: tokens.$form-field-filled-background-state-default;
$thumb-background-color-state-hover: tokens.$form-field-filled-background-state-hover;
$thumb-background-color-state-active: tokens.$form-field-filled-background-state-active;
$thumb-background-color-state-disabled: tokens.$disabled-background;
$thumb-background-image: var(--#{tokens.$css-variable-prefix}slider-thumb-background-image-url);
$thumb-background-image-disabled: var(--#{tokens.$css-variable-prefix}slider-thumb-disabled-background-image-url);
$thumb-background-size: tokens.$space-500 tokens.$space-700;
$thumb-box-shadow: tokens.$shadow-100;
$thumb-box-shadow-state-hover: tokens.$shadow-100;
$thumb-box-shadow-state-active: tokens.$shadow-200;
$thumb-box-shadow-state-disabled: none;
$thumb-box-shadow-state-focus: tokens.$focus-ring;
