/*******************************
             Step
*******************************/

/*-------------------
       Group
--------------------*/

@stepStepMargin: 1em 0em;
@stepStepsBorderRadius: @defaultBorderRadius;
@stepStepsBackground: '';
@stepStepsBoxShadow: none;
@stepStepsBorder: 1px solid @borderColor;

/*-------------------
      Element
--------------------*/

@stepVerticalMargin: 0em;
@stepHorizontalMargin: 0em;

@stepArrowSize: @relativeLarge;
@stepVerticalPadding: @relativeLarge;
@stepHorizontalPadding: 2em;

@transition:
  background-color @defaultDuration @defaultEasing,
  opacity @defaultDuration @defaultEasing,
  color @defaultDuration @defaultEasing,
  box-shadow @defaultDuration @defaultEasing
;
@stepLineHeight: @relativeLarge;
@stepAlignItems: center;
@stepJustifyContent: center;
@stepBackgroundColor: @white;
@stepBackground: @stepBackgroundColor;
@stepBorderRadius: 0em;
@stepBorderWidth: 1px;
@stepBoxShadow: none;
@stepBorder: none;
@stepDivider: @stepBorderWidth solid @borderColor;

/* Icon */
@stepIconDistance: 1rem;
@stepIconSize: 2.5em;
@stepIconAlign: middle;

/* Title */
@stepTitleFontFamily: @headerFont;
@stepTitleFontWeight: @bold;
@stepTitleFontSize: @relativeLarge;
@stepTitleColor: @darkTextColor;

/* Description */
@stepDescriptionDistance: 0.25em;
@stepDescriptionFontSize: @relativeSmall;
@stepDescriptionFontWeight: @normal;
@stepDescriptionColor: @textColor;


/* Arrow */
@stepArrowBackgroundColor: @stepBackgroundColor;
@stepArrowTopOffset: 50%;
@stepArrowRightOffset: 0%;
@stepArrowBorderWidth: 0px @stepBorderWidth @stepBorderWidth 0px;

@stepArrowDisplay: block;
@stepLastArrowDisplay: none;

@stepActiveArrowDisplay: block;
@stepActiveLastArrowDisplay: none;

/* Mobile */
@stepMobileIconDistance: @stepIconDistance;

/*-------------------
       Types
--------------------*/

/* Vertical */
@stepVerticalDivider: @stepDivider;
@stepVerticalArrowTopOffset: 50%;
@stepVerticalArrowRightOffset: 0%;
@stepVerticalArrowBorderWidth: 0px @stepBorderWidth @stepBorderWidth 0px;

@stepVerticalArrowDisplay: none;
@stepVerticalLastArrowDisplay: @stepVerticalArrowDisplay;

@stepVerticalActiveArrowDisplay: block;
@stepVerticalActiveLastArrowDisplay: block;

/*-------------------
      Variations
--------------------*/

@stepAttachedHorizontalOffset: -@stepBorderWidth;
@stepAttachedVerticalOffset: 0;
@stepAttachedWidth: ~"calc(100% + "-@stepAttachedHorizontalOffset * 2~")";

@stepOrderedFontFamily: inherit;
@stepOrderedFontWeight: @bold;

/*-------------------
       States
--------------------*/

/* Completed */
@stepCompletedColor: @positiveColor;

/* Hover */
@stepHoverBackground: @offWhite;
@stepHoverColor: @hoveredTextColor;

/* Down */
@stepDownBackground: @darkWhite;
@stepDownColor: @pressedTextColor;

/* Active */
@stepActiveBackground: @darkWhite;
@stepActiveColor: @linkColor;
@stepActiveIconColor: @darkTextColor;

/* Active + Hover */
@stepActiveHoverBackground: @lightGrey;
@stepActiveHoverColor: @textColor;


/* Disabled */
@stepDisabledBackground: @stepBackground;
@stepDisabledColor: @disabledTextColor;