/**
    Applies all the outline properties useful to show a dashed-focus ring around a component.
    TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
 */
:host {
  --wcs-horizontal-step-text-color-default: var(--wcs-semantic-color-text-secondary);
  --wcs-horizontal-step-text-color-active: var(--wcs-semantic-color-foreground-brand);
  --wcs-horizontal-step-text-color-disabled: var(--wcs-semantic-color-text-disabled);
  display: block;
}
:host .steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex: 1;
}
:host .graphic-step {
  display: flex;
  position: relative;
  flex-direction: row;
  flex: 1;
  align-items: center;
}
:host .graphic-step wcs-button {
  z-index: 1;
  mix-blend-mode: darken;
}
:host .graphic-step[data-first] {
  flex: 0;
}
:host wcs-progress-bar {
  --wcs-progress-bar-border-radius: 0;
  flex: 1;
  margin: 0 -1px;
}
:host .label-container {
  justify-content: space-between;
  display: flex;
  flex-direction: row;
  margin-top: var(--wcs-semantic-spacing-base);
}
:host .label-container > * {
  width: 100%;
  text-align: center;
  flex: 1;
  color: var(--wcs-horizontal-step-text-color-default);
  font-weight: 500;
}
:host .label-container > *[data-disable] {
  color: var(--wcs-horizontal-step-text-color-disabled);
}
:host .label-container > *[data-current] {
  color: var(--wcs-horizontal-step-text-color-active);
}
:host .label-container > div[data-first] {
  margin-right: calc(var(--wcs-semantic-size-m, 40px) / 2);
  text-align: left;
  flex: 0.5;
}
:host .label-container > div[data-last] {
  margin-left: calc(var(--wcs-semantic-size-m, 40px) / 2);
  text-align: right;
  flex: 0.5;
}