/*
    Mixin to progressively-enhance :focus-visible, keeping :focus where not supported
    Add an arbitrary list of selectors into the arguments, and the styling in the block.
    I you pass no selectors to the mixin the parent ("ampersand") operator is used instead.

    There are two mixins:
    - focus-visible: a generic focus-visible, giving you "slots" to decide what to
      render for :focus, :focus reset, and :focus-visible
    - focus-visible-outline: a focus-visible, which only resets the outline. If you don't need more custom resets, use this one!

    Use focus-visible:
    The key thing here is checking which slot is being rendered.
    For example, you can reset box-shadow here, or anything else.

    @include focus-visible using ($slot) {
        @if $slot == focus {
            outline: 2px solid transparent;
            box-shadow: 0 0 0 4px blue;
        }
        @if $slot == focusReset {
            box-shadow: none;
        }
        @if $slot == focusVisible {
            box-shadow: 0 0 0 4px blue;
        }
    }

    Use focus-visible-outline:
    @include focus-visible-outline("button", "a[href]") {
        outline: 2px solid blue;
    }

    Resulting CSS (compressed):

    button:focus,
    a[href]:focus {
        outline: 2px solid blue;
    }

    button:focus:not(:focus-visible),
    a[href]:focus:not(:focus-visible) {
        outline: none;
    }
    button:focus-visible,
    a[href]:focus-visible {
        outline: 2px solid blue;
    }
*/
/*
    Mixin to progressively-enhance :focus-visible, keeping :focus where not supported
    Add an arbitrary list of selectors into the arguments, and the styling in the block.
    I you pass no selectors to the mixin the parent ("ampersand") operator is used instead.

    There are two mixins:
    - focus-visible: a generic focus-visible, giving you "slots" to decide what to
      render for :focus, :focus reset, and :focus-visible
    - focus-visible-outline: a focus-visible, which only resets the outline. If you don't need more custom resets, use this one!

    Use focus-visible:
    The key thing here is checking which slot is being rendered.
    For example, you can reset box-shadow here, or anything else.

    @include focus-visible using ($slot) {
        @if $slot == focus {
            outline: 2px solid transparent;
            box-shadow: 0 0 0 4px blue;
        }
        @if $slot == focusReset {
            box-shadow: none;
        }
        @if $slot == focusVisible {
            box-shadow: 0 0 0 4px blue;
        }
    }

    Use focus-visible-outline:
    @include focus-visible-outline("button", "a[href]") {
        outline: 2px solid blue;
    }

    Resulting CSS (compressed):

    button:focus,
    a[href]:focus {
        outline: 2px solid blue;
    }

    button:focus:not(:focus-visible),
    a[href]:focus:not(:focus-visible) {
        outline: none;
    }
    button:focus-visible,
    a[href]:focus-visible {
        outline: 2px solid blue;
    }
*/
/**
    @prop --uic-wizard-header-step-background-color: background color
    @prop --uic-wizard-header-step-focus-color: focus color
    @prop --uic-wizard-header-step-disabled-number-bg-color: disabled number background color
    @prop --uic-wizard-header-step-disabled-label-color: disabled label color
    @prop --uic-wizard-header-step-hover-number-border-color: hover number border color
    @prop --uic-wizard-header-step-hover-number-color: hover number color
    @prop --uic-wizard-header-step-active-bg-color: active background color
    @prop --uic-wizard-header-step-active-number-bg-color: active number background color
    @prop --uic-wizard-header-step-active-number-border-color: active number border color
    @prop --uic-wizard-header-step-active-number-color: active number color
    @prop --uic-wizard-header-step-active-number-highlight-color: active number highlight color
    @prop --uic-wizard-header-step-selected-bg-color: selected background color
    @prop --uic-wizard-header-step-selected-line-color: selected line color
    @prop --uic-wizard-header-step-selected-number-bg-color: selected number bg color
    @prop --uic-wizard-header-step-selected-number-color: selected number color
    @prop --uic-wizard-header-step-selected-label-color: selected label color
    @prop --uic-wizard-header-step-flyout-indicator-color: flyout indicator color
    @prop --uic-wizard-header-step-number-bg-color: number background color
    @prop --uic-wizard-header-step-number-color: number color
    @prop --uic-wizard-header-step-flag-width: flag icon width
    @prop --uic-wizard-header-step-flag-height: flag icon height
    @prop --uic-wizard-header-step-flag-offset-left: flag offset left
    @prop --uic-wizard-header-step-flag-offset-top: flag offset top
    @prop --uic-wizard-header-step-base-height-vertical: step height in vertical layout, might be larger for multiline
    @prop --uic-wizard-header-step-number-width: number rectangle width
    @prop --uic-wizard-header-step-number-height: number rectangle height
    @prop --uic-wizard-header-step-flyout-indicator-size: flyout indicator icon size
    @prop --uic-wizard-header-step-flyout-indicator-padding-left: flyout indicator padding left
    @prop --uic-wizard-header-step-number-margin: header step number margin. top when horizontal layout, right when vertical
    @prop --uic-wizard-header-step-padding-horizontal-left-right: left and right padding in horizontal layout
    @prop --uic-wizard-header-step-padding-horizontal-top-bottom: top and bottom padding in horizontal layout
    @prop --uic-wizard-header-step-padding-vertical: 4 axis padding in vertical layout
    @prop --uic-wizard-header-step-line-width: width of the line between steps
    @prop --uic-wizard-header-step-line-width-active: width of the line between steps when active (steps before current one)
    @prop --uic-wizard-header-step-line-gap-horizontal: gap between line and number rectangle in horizontal layout
    @prop --uic-wizard-header-step-line-gap-vertical: gap between line and number rectangle in vertical layout
    @prop --uic-wizard-header-step-line-offset-horizontal: offset of the line from the number rectangle center to the bottom
*/
uic-wizard-header-step {
  align-items: center;
  background-color: var(--uic-wizard-header-step-background-color);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-basis: var(--uic-wizard-header-step-number-width);
  flex-direction: column;
  flex-grow: 1;
  padding: var(--uic-wizard-header-step-padding-horizontal-top-bottom) var(--uic-wizard-header-step-padding-horizontal-left-right);
  position: relative;
  /* stylelint-disable selector-no-qualifying-type */
  /* stylelint-enable selector-no-qualifying-type */
}
uic-wizard-header-step:focus {
  outline: none;
}
uic-wizard-header-step:focus .uic-wizard-header-step__number {
  border: 2px solid var(--uic-wizard-header-step-focus-color);
}
uic-wizard-header-step:focus:not(:focus-visible) {
  outline: none;
}
uic-wizard-header-step:focus:not(:focus-visible) .uic-wizard-header-step__number {
  border: 0;
}
uic-wizard-header-step:focus-visible {
  outline: none;
}
uic-wizard-header-step:focus-visible .uic-wizard-header-step__number {
  border: 2px solid var(--uic-wizard-header-step-focus-color);
}
uic-wizard-header-step[disabled] {
  pointer-events: none;
}
uic-wizard-header-step[disabled] .uic-wizard-header-step__number {
  background-color: var(--uic-wizard-header-step-disabled-number-bg-color);
}
uic-wizard-header-step[disabled] .uic-wizard-header-step__label {
  color: var(--uic-wizard-header-step-disabled-label-color);
}
uic-wizard-header-step:hover .uic-wizard-header-step__number {
  border: 1px solid var(--uic-wizard-header-step-hover-number-border-color);
  color: var(--uic-wizard-header-step-hover-number-color);
}
uic-wizard-header-step:active {
  background: var(--uic-wizard-header-step-active-bg-color);
}
uic-wizard-header-step:active .uic-wizard-header-step__number {
  background-color: var(--uic-wizard-header-step-active-number-bg-color);
  border-color: var(--uic-wizard-header-step-active-number-border-color);
  color: var(--uic-wizard-header-step-active-number-color);
}
uic-wizard-header-step:active .uic-wizard-header-step__number::after {
  background: var(--uic-wizard-header-step-active-number-highlight-color);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
uic-wizard-header-step[selected] {
  background-color: var(--uic-wizard-header-step-selected-bg-color);
}
uic-wizard-header-step[selected] .uic-wizard-header-step__number {
  background: var(--uic-wizard-header-step-selected-number-bg-color);
  color: var(--uic-wizard-header-step-selected-number-color);
  font-weight: bold;
}
uic-wizard-header-step[selected] .uic-wizard-header-step__label {
  color: var(--uic-wizard-header-step-selected-label-color);
  font-weight: bold;
}
uic-wizard-header-step[selected] .uic-wizard-header-step__label-wrapper--with-flyout .uic-wizard-header-step__flyout-indicator {
  visibility: visible;
}
uic-wizard-header-step .uic-wizard-header-step__number {
  align-items: center;
  background: var(--uic-wizard-header-step-number-bg-color);
  border: 1px solid transparent;
  box-sizing: border-box;
  color: var(--uic-wizard-header-step-number-color);
  display: flex;
  flex-shrink: 0;
  font-size: var(--uic-font-size-normal);
  height: var(--uic-wizard-header-step-number-height);
  justify-content: center;
  margin-top: var(--uic-wizard-header-step-number-margin);
  position: relative;
  width: var(--uic-wizard-header-step-number-width);
}
uic-wizard-header-step .uic-wizard-header-step__number .uic-wizard-header-step__flag {
  --uic-icon-width: var(--uic-wizard-header-step-flag-width);
  --uic-icon-height: var(--uic-wizard-header-step-flag-height);
  left: var(--uic-wizard-header-step-flag-offset-left);
  position: absolute;
  top: var(--uic-wizard-header-step-flag-offset-top);
}
uic-wizard-header-step .uic-wizard-header-step__label-wrapper {
  --horzizontal-margin: calc(
    var(--uic-wizard-header-step-flyout-indicator-size) + var(--uic-wizard-header-step-flyout-indicator-padding-left)
  );
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 2px var(--horzizontal-margin) 0 var(--horzizontal-margin);
}
uic-wizard-header-step .uic-wizard-header-step__label-wrapper--with-flyout {
  margin: 2px 0 0 var(--horzizontal-margin);
}
uic-wizard-header-step .uic-wizard-header-step__label-wrapper .uic-wizard-header-step__label {
  -webkit-box-orient: vertical;
  display: block;
  /* stylelint-disable declaration-property-value-disallowed-list, value-no-vendor-prefix, property-no-vendor-prefix */
  /* webkit not supported by IE, but currently no other good solution is available for multiline text with ellipsis.  */
  display: -webkit-box;
  flex-grow: 0;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  /* stylelint-enable declaration-property-value-disallowed-list, value-no-vendor-prefix, property-no-vendor-prefix */
}
uic-wizard-header-step .uic-wizard-header-step__label-wrapper .uic-wizard-header-step__flyout-indicator {
  --uic-icon-width: var(--uic-wizard-header-step-flyout-indicator-size);
  --uic-icon-height: var(--uic-wizard-header-step-flyout-indicator-size);
  align-self: center;
  fill: var(--uic-wizard-header-step-flyout-indicator-color);
  flex-basis: var(--uic-wizard-header-step-flyout-indicator-size);
  flex-grow: 0;
  flex-shrink: 0;
  margin-top: -1px;
  padding-left: var(--uic-wizard-header-step-flyout-indicator-padding-left);
  visibility: hidden;
  width: 100%;
}
uic-wizard-header-step .uic-wizard-header-step__flyout {
  --uic-flyout-content-min-height: 0;
  --uic-flyout-max-width: 200%;
  pointer-events: none;
}
uic-wizard-header-step .uic-wizard-header-step__flyout uic-button {
  pointer-events: auto;
}
uic-wizard-header-step:not(:first-child)::before {
  background: var(--uic-color-blue2);
  content: "";
  height: var(--uic-wizard-header-step-line-width-active);
  left: 0;
  position: absolute;
  top: calc(4px + var(--uic-wizard-header-step-number-margin) + var(--uic-wizard-header-step-padding-horizontal-top-bottom) + var(--uic-wizard-header-step-number-height) / 2);
  width: calc(50% - var(--uic-wizard-header-step-number-width) / 2 - var(--uic-wizard-header-step-line-gap-horizontal));
}
uic-wizard-header-step:not(:last-child)::after {
  background: var(--uic-color-blue2);
  content: "";
  height: var(--uic-wizard-header-step-line-width-active);
  position: absolute;
  right: 0;
  top: calc(var(--uic-wizard-header-step-line-offset-horizontal) + var(--uic-wizard-header-step-number-margin) + var(--uic-wizard-header-step-padding-horizontal-top-bottom) + var(--uic-wizard-header-step-number-height) / 2);
  width: calc(50% - var(--uic-wizard-header-step-number-width) / 2 - var(--uic-wizard-header-step-line-gap-horizontal));
}
uic-wizard-header-step[selected] ~ uic-wizard-header-step::before, uic-wizard-header-step[selected] ~ uic-wizard-header-step::after {
  background: var(--uic-color-grey2);
  height: var(--uic-wizard-header-step-line-width);
}
uic-wizard-header-step[selected]::after {
  background: var(--uic-color-grey2);
  height: var(--uic-wizard-header-step-line-width);
}
uic-wizard-header-step[vertical] {
  flex-basis: var(--uic-wizard-header-step-base-height-vertical);
  flex-direction: row;
  height: 100%;
  justify-content: flex-start;
  padding: var(--uic-wizard-header-step-padding-vertical);
  /* stylelint-disable selector-no-qualifying-type */
  /* stylelint-enable selector-no-qualifying-type */
}
uic-wizard-header-step[vertical] .uic-wizard-header-step__number {
  margin: 0 var(--uic-wizard-header-step-number-margin) 0 0;
}
uic-wizard-header-step[vertical] .uic-wizard-header-step__label-wrapper {
  justify-content: left;
  margin: 0;
  width: 100%;
}
uic-wizard-header-step[vertical] .uic-wizard-header-step__label-wrapper--with-flyout {
  justify-content: space-between;
  margin: 0;
}
uic-wizard-header-step[vertical] .uic-wizard-header-step__label {
  flex-grow: 0;
  margin-top: 0;
  text-align: left;
}
uic-wizard-header-step[vertical]:not(:first-child)::before {
  top: 0;
  width: var(--uic-wizard-header-step-line-width-active);
}
uic-wizard-header-step[vertical]:not(:last-child)::after {
  width: var(--uic-wizard-header-step-line-width-active);
}
uic-wizard-header-step[vertical][selected] ~ uic-wizard-header-step::before, uic-wizard-header-step[vertical][selected] ~ uic-wizard-header-step::after {
  width: var(--uic-wizard-header-step-line-width);
}
uic-wizard-header-step[vertical][selected]::after {
  width: var(--uic-wizard-header-step-line-width);
}
uic-wizard-header-step[vertical]:not(:first-child)::before, uic-wizard-header-step[vertical]:not(:last-child)::after {
  height: calc(50% - var(--uic-wizard-header-step-number-height) / 2 - var(--uic-wizard-header-step-line-gap-vertical));
  left: var(--uic-wizard-header-step-line-left-vertical);
}
uic-wizard-header-step[vertical]:not(:last-child)::after {
  top: calc(50% + var(--uic-wizard-header-step-number-height) / 2 + var(--uic-wizard-header-step-line-gap-vertical));
}