/*
  Font family is Nunito Sans. Its fallback is Helvetica
*/
/*
  Font sizes have been converted to rem considering a base size of 16px.
*/
/*
*  Z-Index
*  
*  The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. 
*  Overlapping elements with a larger z-index cover those with a smaller one.
*  
*  REF: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
*  REF: https://www.smashingmagazine.com/2019/04/z-index-component-based-web-application/  
*/
/**
 * Define media query values
 */
:host {
  padding: 8px;
}
:host .step {
  width: 100%;
  display: flex;
  align-items: center;
}
:host .step__content {
  display: flex;
  align-items: center;
}
:host .step__content--completed {
  color: var(--color-content-disable, #595959);
}
:host .step__content--active {
  color: var(--color-primary, #1e6bf1);
  font-weight: bold;
}
:host .step__content--pointer {
  cursor: pointer;
}
:host .step__content--disabled {
  cursor: no-drop;
}
:host .step__content__ellipse {
  display: inline-flex;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-content-default, #282828);
  margin-right: 4px;
  min-width: 24px;
  min-height: 24px;
}
:host .step__content__ellipse bds-typo,
:host .step__content__ellipse bds-icon {
  color: var(--color-surface-0, white);
}
:host .step__content__ellipse--completed {
  background: var(--color-content-ghost, #8c8c8c);
}
:host .step__content__ellipse--completed bds-typo,
:host .step__content__ellipse--completed bds-icon {
  color: var(--color-surface-0, white);
}
:host .step__content__ellipse--active {
  background: var(--color-surface-primary, #1e6bf1);
}
:host .step__content__ellipse--active bds-typo,
:host .step__content__ellipse--active bds-icon {
  color: var(--color-content-bright, white);
}
:host .step__content__ellipse--disabled {
  background: var(--color-content-ghost, #8c8c8c);
}
:host .step__content__ellipse--disabled bds-typo,
:host .step__content__ellipse--disabled bds-icon {
  color: var(--color-surface-0, white);
}
:host .step__content__text--completed {
  color: var(--color-content-ghost, #8c8c8c);
}
:host .step__content__text--active {
  color: var(--color-content-default, #282828);
}
:host .step__content__text--disabled {
  color: var(--color-content-ghost, #8c8c8c);
}
@media (max-width: 780px) {
  :host {
    display: flex;
    flex: inherit;
  }
}