html {
  box-sizing: border-box;
}

body {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}

:host {
  font-family: var(--c-font-family);
}

::-ms-reveal {
  display: none;
}

:host {
  /**
   * @prop --c-steps-outline-color: Steps outline color
   */
  --_c-steps-outline-color: var(--c-steps-outline-color, var(--c-primary-600));
  --_c-steps-color: var(--c-step-color, var(--c-tertiary-500));
  --_c-steps-color-complete: var(--c-step-color-complete, var(--c-primary-600));
  width: 100%;
  display: grid;
  gap: 8px;
  border-radius: 6px;
}

@supports selector(:focus-visible) {
  :host(:focus) {
    outline: none;
  }
}
:host(:focus-visible) {
  outline: 2px var(--_c-steps-outline-color) solid;
  outline-offset: 2px;
}

.c-steps {
  --c-steps-divider-width: calc(100% + 160px);
  --c-steps-divider-margin: 10px -80px 0;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}
.c-steps slot {
  display: flex;
  justify-items: space-between;
  width: 100%;
}
.c-steps ::slotted(.divider) {
  height: 2px;
  flex: 1;
  background-color: var(--_c-steps-color);
  width: var(--c-steps-divider-width);
  margin: var(--c-steps-divider-margin) !important;
}
.c-steps ::slotted(.divider.complete) {
  background-color: var(--_c-steps-color-complete);
  height: 4px;
  margin-top: 9px;
}
.c-steps.mobile {
  --c-steps-divider-width: calc(100% + 11px);
  --c-steps-divider-margin: 10px -10px 0;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}