:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }/** Typography */
:host {
  /**
  * @prop --background: the background color of the step breadcrumb. Defaults to var(--nano-color-base-0).
  */
  display: block;
  --background: var(--nano-color-base-0);
}

.step-wrapper {
  container-type: inline-size;
}

.step-list.desktop {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}
.step-list.desktop::before {
  content: "";
  display: block;
  flex-grow: 1;
  block-size: 1px;
  background-color: var(--nano-color-neutral-300);
  position: absolute;
  inset-block-start: 50%;
  z-index: -1;
  inset-inline-start: 0;
  inline-size: 100%;
}

.step-item-wrapper {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.step-item-wrapper:last-of-type {
  flex: 0 1 auto;
}
.step-item-wrapper:last-of-type .step-item {
  padding-inline-end: 0;
}
.step-item-wrapper:first-of-type::before {
  display: none;
}
.step-item-wrapper:first-of-type .step-item {
  padding-inline-start: 0;
}
.step-item-wrapper::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  place-self: center end;
  inset-block-start: 0.5px;
  position: relative;
  border-inline-end: 1px solid var(--nano-color-neutral-300);
  border-block-end: 1px solid var(--nano-color-neutral-300);
  rotate: -45deg;
}

:dir(rtl) .step-item-wrapper::after {
  rotate: 45deg;
}

.step-item {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: var(--nano-spacing-sm);
  background-color: var(--background);
  padding: 0 var(--nano-spacing-sm);
  position: relative;
}
.step-item:focus-visible {
  outline: var(--nano-focus-ring);
  outline-offset: var(--nano-focus-ring-offset);
  z-index: 1;
}
.step-item.step-item--disabled {
  cursor: not-allowed;
}
.step-item.step-item--disabled > * {
  opacity: 0.5;
}

.step-item-icon {
  font-size: var(--nano-font-size-xs);
  line-height: var(--nano-line-height-normal);
  letter-spacing: var(--nano-letter-spacing-loose);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--nano-border-radius-circle);
  background-color: transparent;
  color: var(--nano-color-neutral-1400);
  border: 1px solid var(--nano-color-neutral-300);
}
.step-item--complete .step-item-icon {
  background-color: var(--nano-color-success-1000);
  color: var(--nano-color-base-0);
  border: none;
}
.step-item--active .step-item-icon {
  background-color: var(--nano-color-primary-1000);
  color: var(--nano-color-base-0);
  border: none;
}

.step-dropdown {
  inline-size: 100%;
  min-inline-size: 300px;
}

.step-trigger {
  all: unset;
  display: inline-flex;
  gap: var(--nano-spacing-md);
  align-items: center;
  inline-size: 100%;
  cursor: pointer;
}

.step-trigger-text {
  display: flex;
  flex-direction: column;
}

.step-trigger-now {
  font-weight: var(--nano-font-weight-normal);
  font-size: var(--nano-font-size-xl);
  line-height: var(--nano-line-height-denser);
  text-wrap: balance;
  color: var(--nano-color-neutral-1400);
}

.step-trigger-next {
  font-size: var(--nano-font-size-2xs);
  line-height: var(--nano-line-height-normal);
  letter-spacing: var(--nano-letter-spacing-loose);
  color: var(--nano-color-neutral-1000);
}

.step-trigger-icon {
  margin-inline-start: auto;
  color: var(--nano-color-primary-1000);
  transition: var(--nano-transition-x-fast) rotate;
}
[open] .step-trigger-icon {
  rotate: 180deg;
}

.step-progress-circle {
  --size: 64px;
  --thickness: 4px;
  inline-size: var(--size);
  min-inline-size: var(--size);
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}
.step-progress-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--nano-color-success-1000) calc(var(--value) / var(--max) * 360deg), var(--nano-color-neutral-100) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%);
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black 90%);
}

.step-progress-title {
  font-size: var(--nano-font-size-sm);
  line-height: var(--nano-line-height-normal);
  font-weight: var(--nano-font-weight-bold);
  white-space: nowrap;
  color: var(--nano-color-neutral-1000);
}
.step-progress-title strong {
  color: var(--nano-color-neutral-1400);
}