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

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

@stepMargin: 1em 0;
@stepsBorderRadius: @defaultBorderRadius;
@stepsBackground: "";
@stepsBoxShadow: none;
@stepsBorder: 1px solid @borderColor;

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

@verticalMargin: 0;
@horizontalMargin: 0;

@arrowSize: @relativeLarge;
@verticalPadding: @relativeLarge;
@horizontalPadding: 2em;

@transition:
    background-color @defaultDuration @defaultEasing,
    opacity @defaultDuration @defaultEasing,
    color @defaultDuration @defaultEasing,
    box-shadow @defaultDuration @defaultEasing;
@lineHeight: @relativeLarge;
@alignItems: center;
@justifyContent: center;
@backgroundColor: @white;
@background: @backgroundColor;
@borderRadius: 0;
@borderWidth: 1px;
@boxShadow: none;
@border: none;
@divider: @borderWidth solid @borderColor;

/* Icon */
@iconDistance: 1rem;
@iconSize: 2.5em;
@iconAlign: center;

/* Title */
@titleFontFamily: @headerFont;
@titleFontWeight: @bold;
@titleFontSize: @relativeLarge;
@titleColor: @darkTextColor;

/* Description */
@descriptionDistance: 0.25em;
@descriptionFontSize: @relativeSmall;
@descriptionFontWeight: @normal;
@descriptionColor: @textColor;

/* Arrow */
@arrowBackgroundColor: @backgroundColor;
@arrowTopOffset: 50%;
@arrowRightOffset: 0;
@arrowBorderWidth: 0 @borderWidth @borderWidth 0;

@arrowDisplay: block;
@lastArrowDisplay: none;

@activeArrowDisplay: block;
@activeLastArrowDisplay: none;

/* Mobile */
@mobileIconDistance: @iconDistance;

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

/* Vertical */
@verticalDivider: @divider;
@verticalArrowTopOffset: 50%;
@verticalArrowRightOffset: 0;
@verticalLeftArrowLeftOffset: 0;
@verticalLeftArrowRightOffset: 100%;
@verticalLeftArrowBorderWidth: @borderWidth 0 0 @borderWidth;
@verticalArrowBorderWidth: 0 @borderWidth @borderWidth 0;

@verticalArrowDisplay: none;
@verticalLastArrowDisplay: @verticalArrowDisplay;

@verticalActiveArrowDisplay: block;
@verticalActiveLastArrowDisplay: block;

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

@attachedHorizontalOffset: -@borderWidth;
@attachedVerticalOffset: 0;
@attachedWidth: e(%("calc(100%% + %d)", -@attachedHorizontalOffset * 2));

@orderedFontFamily: inherit;
@orderedFontWeight: @bold;

/* Circular */
@circularStepsMargin: @stepMargin;
@circularStepsPadding: @stepMargin;
@circularStepDisabledItemOpacity: 0.5;
@circularStepColor: @borderColor;
@circularStepBorderWidth: 2px;
@circularStepBorder: @circularStepBorderWidth solid @circularStepColor;
@circularStepRingSize: 2.2em;
@circularStepIconSize: 0.95em;
@circularStepIconDistance: calc((-@circularStepRingSize + @circularStepIconSize) - 0.3em);
@circularStepCompletedIconLineHeight: 1em;
@circularStepCompletedIconDistance: calc(-@circularStepRingSize + ((@circularStepRingSize / 2) / 2) + (@circularStepBorderWidth / 2));

@circularStepContentMarginTop: -1.5em;
@circularStepContentCenterAlignedMarginTop: -0.65em;
@circularStepContentBottomAlignedMarginTop: 0.5em;
@circularStepContentHorizontalPadding: 0.5em;
@circularStepContentPadding: 0 @circularStepContentHorizontalPadding;
@circularStepContentCenterAlignedMarginLeft: -@circularStepContentHorizontalPadding;
@circularStepContentDescriptionDistance: 0.5em;
@circularStepContentCenterAlignedBackground: @white;
@invertedCircularStepContentCenterAlignedBackground: @black;

@verticalCircularStepPadding: 3em;
@verticalCircularStepContentPadding: 3.5em;
@verticalCircularStepLineDistance: calc(@circularStepRingSize / unit(@circularStepBorderWidth));
@verticalCircularStepIconDistance: calc((@circularStepRingSize / (unit(@circularStepRingSize) * unit(@circularStepBorderWidth))) + @circularStepBorderWidth);
@verticalCircularStepCompletedIconDistance: calc((@circularStepRingSize / (unit(@circularStepRingSize) * unit(@circularStepBorderWidth))) + (@circularStepBorderWidth - (@circularStepBorderWidth / 2)));

@circularStepActiveColor: @completedColor;
@circularStepCompletedColor: @white;
@circularStepCompletedBackground: @completedColor;

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

/* Completed */
@completedColor: @positiveColor;

/* Hover */
@hoverBackground: @offWhite;
@hoverColor: @hoveredTextColor;

/* Down */
@downBackground: @darkWhite;
@downColor: @pressedTextColor;

/* Active */
@activeBackground: @darkWhite;
@activeColor: @linkColor;
@activeIconColor: @darkTextColor;

/* Active + Hover */
@activeHoverBackground: @lightGrey;
@activeHoverColor: @textColor;

/* Disabled */
@disabledBackground: @background;
@disabledColor: @disabledTextColor;

/* Inverted */
@invertedActiveBackground: #333;
@invertedActiveHoverBackground: #444;
@invertedHoverBackground: #3f3f3f;
@invertedDisabledBackground: #222;