@use 'sass:color';
@use 'ej2-base/styles/definition/material-dark' as *;
@forward 'ej2-base/styles/definition/material-dark';

$stepper-ol-padding: 0 !default;
$stepper-step-radius: 9999px !default;
$stepper-step-width: 32px !default;
$stepper-step-font-size: 32px !default;
$stepper-icon-size: 16px !default;
$stepper-progress-bar-height: 1.6px !default;
$stepper-progress-bar-width: 1.6px !default;
$stepper-progress-value-height: 100% !default;
$stepper-progress-value-width: 100% !default;
$stepper-progress-position: 50% !default;
$stepper-temp-outline-width: 2px solid !default;
$stepper-label-top: 1em !default;
$stepper-label-bottom: 4.5em !default;
$stepper-label-position: 2.5em !default;
$stepper-validation-position: .25em !default;
$stepper-text-padding: 0 6px !default;
$stepper-icon-text-padding: 2px 8px !default;
$stepper-text-vert-padding: 6px 0 !default;
$stepper-label-optional: 3em !default;
$stepper-text-postion: 10px !default;
$stepper-optional-size: 12px !default;
$step-border: 2px solid !default;
$stepper-label-order: -1 !default;
$stepper-font-weight: 600 !default;
$stepper-text-size: 14px !default;
$stepper-tooltip-tip-bottom-height: 8px !default;
$stepper-inherit-height: inherit !default;
$stepper-content-line-height: 0 !default;
$stepper-label-line-height: 2em !default;
$stepper-text-container-border-radius: unset !default;
$stepper-text-container-border-none: none !default;
$step-content-padding: 0 8px !default;
$step-padding-none: 0 !default;
$step-margin-none: 0 !default;
$step-container-padding-block: 5px !default;
$step-label-optional-padding: 6px !default;
$stepper-horizontal-label-gap: 1em !default;
$stepper-label-before-optional-gap: .5em !default;
$stepper-margin-unset: unset !default;
$stepper-horizontal-label-optional-margin: 2.5em !default;
$stepper-horizontal-optional-margin-top: .5em !default;
$stepper-horizontal-label-after-optional-margin-top: .2em !default;
$stepper-vertical-optional-margin-right: 4em !default;
$stepper-progress-top-position: var(--progress-top-position) !default;
$stepper-vertical-progress-position: var(--progress-position) !default;

$stepper-small-step-width: 28px !default;
$stepper-small-step-font-size: 28px !default;
$stepper-small-step-height: 28px !default;
$stepper-small-icon-size: 14px !default;
$stepper-small-optional-size: 10px !default;
$stepper-small-text-size: 12px !default;

$stepper-bigger-step-width: 40px !default;
$stepper-bigger-step-font-size: 40px !default;
$stepper-bigger-step-height: 40px !default;
$stepper-bigger-icon-size: 18px !default;
$stepper-bigger-optional-size: 14px !default;
$stepper-bigger-text-size: 16px !default;

$stepper-bigger-small-step-width: 36px !default;
$stepper-bigger-small-step-font-size: 36px !default;
$stepper-bigger-small-step-height: 36px !default;
$stepper-bigger-small-icon-size: 16px !default;
$stepper-bigger-small-optional-size: 12px !default;
$stepper-bigger-small-text-size: 14px !default;

$step-selected-li-shadow: 0 0 0 2px $overlay-bg-color, 0 0 0 4px $primary, 0 0 0 8px $overlay-bg-color !default;
$step-keyboard-selected-li-shadow: 0 0 0 2px $overlay-bg-color, 0 0 0 4px $grey-dark-font, 0 0 0 8px $overlay-bg-color !default;
$step-valid-li-shadow: 0 0 0 2px $overlay-bg-color, 0 0 0 4px $success-bg, 0 0 0 8px $overlay-bg-color !default;
$step-error-li-shadow: 0 0 0 2px $overlay-bg-color, 0 0 0 4px $error-font, 0 0 0 8px $overlay-bg-color !default;
$step-li-shadow: 0 0 0 8px $overlay-bg-color !default;
$step-border-color: $overlay-bg-color !default;
$step-hover-text-color: $primary-font !default;
$step-hover-not-text-color: $grey-400 !default;
$step-hover-border-color: $overlay-bg-color !default;
$step-active-border-color: $overlay-bg-color !default;
$stepper-outline-color: $overlay-bg-color !default;
$step-color: $grey-400 !default;
$step-optional-color: $grey-300 !default;
$step-bg-color: $grey-900 !default;
$step-completed-color: $primary-font !default;
$step-completed-bg-color: $primary !default;
$step-progress-bg-color: $grey-800 !default;
$step-progress-value-bg-color: $primary !default;
$step-disabled-bg-color: $grey-800 !default;
$step-disabled-font-color: rgba($grey-dark-font, 26) !default;
$step-disabled-color: $grey-500 !default;
$stepper-text-color: $grey-dark-font !default;
$step-valid-icon-only-color:$success-bg !default;
$step-error-icon-only-color: $error-font !default;
$step-valid-completed-color: $primary-font !default;
$step-valid-completed-bg-color: $success-bg !default;
$step-error-icon-color: $primary-font !default;
$step-error-completed-color: $error-font !default;
$step-error-completed-bg-color: $error-font !default;
$step-hover-color: $grey-800 !default;
$step-active-color: $overlay-bg-color !default;
$step-selected-hover-color: color.adjust($primary, $lightness: 10%) !default;
$step-selected-active-color: color.adjust($primary, $lightness: 15%) !default;