/*
 * This file is imported into every component!
 *
 * Nothing in this file may output any CSS
 * without being explicitly called by outside code.
 */
/**
* @prop --progress-flow-step-background-color: Background color of steps, defaults to `--contrast-600`.
* @prop --progress-flow-step-background-color--selected: Background color of selected step, defaults to `--lime-primary-color`.
* @prop --progress-flow-step-background-color--passed: Background color of passed steps, defaults to the background color the step has when selected.
* @prop --progress-flow-step-text-color: Text of steps, defaults to `--contrast-1200`.
* @prop --progress-flow-step-text-color--selected: Text color of selected step, defaults to `--lime-primary-color`.
* @prop --progress-flow-step-text-color--passed: Text color of passed steps, defaults to the text color the step has when selected.
* @prop --progress-flow-step-divider-color: Color of the arrow shaped dividers between steps which must be the same as component's background, defaults to `--contrast-100`.
* @prop --progress-flow-icon-color--inactive: Color of the optional icons used in each step. Only affects inactive steps, defaults to text colors for inactive, active, or passed step.
*/
:host {
  --step-height: 2rem;
  --selected-indicator-right: -0.5rem;
  --max-text-width: 10rem;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.25rem;
}
:host::-webkit-scrollbar {
  display: none;
}

:host(.is-narrow) {
  --step-height: 1.5rem;
  --selected-indicator-right: 0;
}