/* Breakpoints variables */
/**
 * Responsive media for mobile (small) only.
 * Use: @include mobile-only() { ... }
 */
/**
 * Responsive media for medium only.
 * Use: @include medium-only() { ... }
 */
/**
 * Responsive media for large only.
 * Use: @include large-only() { ... }
 */
/**
 * Responsive media for xlarge only.
 * Use: @include xlarge-only() { ... }
 */
/**
 * Responsive media for medium to large.
 * Use: @include medium-large() { ... }
 */
/**
 * Responsive media for medium and up.
 * Use: @include medium-up() { ... }
 */
/**
* Responsive media for large and up.
* Use: @include large-up() { ... }
*/
:host {
  align-items: center;
  background-color: var(--color-neutral-purewhite);
  display: flex;
  height: 64px;
  width: 100%;
}

.step-bar__steps {
  display: grid;
  flex: 1;
  height: 100%;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  padding: 0 5px;
}
@media (min-width: 993px) {
  .step-bar__steps {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    padding: 0;
  }
}