_stepper.scss

@use './../type';
@use './../color';
@use './../spacing';
@use './../animation';

@use './../../functions/icons' as icon-fn;

@use '../../tokens/utilities';
@use '../../functions/tokens';

tokens.$default-map: utilities.$post-spacing;

$stepper-bar-height: tokens.get('utility-gap-4');
$stepper-bar-color: color.$gray-40;
$stepper-bar-fill-color: color.$yellow;

$stepper-indicator-size: tokens.get('utility-gap-40');
$stepper-indicator-border-width: tokens.get('utility-gap-4');
$stepper-indicator-border-color: rgb(var(--post-bg-rgb, 255 255 255));
$stepper-indicator-font-weight: type.$font-weight-bold;
$stepper-indicator-bg: color.$yellow;
$stepper-indicator-color: color.$black;
$stepper-indicator-check-size: tokens.get('utility-gap-24');
$stepper-indicator-transition:
  color animation.$transition-base-timing,
  background-color animation.$transition-base-timing;

$stepper-indicator-hover-color: color.$white;
$stepper-indicator-hover-bg: color.$black;

$stepper-indicator-future-bg: color.$gray-60;
$stepper-indicator-future-color: color.$white;
$stepper-indicator-check-icon: url('#{icon-fn.get-colored-svg-url('2105', $stepper-indicator-color)}');
$stepper-indicator-check-icon-size: $stepper-indicator-check-size;

$stepper-link-line-height: type.$line-height-sm;
$stepper-link-gap: tokens.get('utility-gap-8');
$stepper-link-spacing: tokens.get('utility-gap-16');
$stepper-link-color: color.$gray-60;

$stepper-link-current-color: color.$gray-80;
$stepper-link-current-font-weight: type.$font-weight-bold;