/* SHARED STYLING */
:host {
  display: flex;
  flex: auto;

  --ic-typography-color: currentcolor;
}

.step {
  display: flex;
  flex: 1 1 0;
}

.step-icon {
  display: flex;
  justify-content: center;
}

.heading,
::slotted([slot="heading"]),
.subheading,
.step-status,
.next-step {
  white-space: pre-line;
}

.next-step {
  color: var(--ic-stepper-compact-step-next-text);
}

.visually-hidden {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visually-hidden:dir(rtl) {
  right: -9999px;
}

/* COMPACT STEP STYLING */
:host(.ic-step-compact) {
  -moz-column-gap: var(--ic-space-sm);
       column-gap: var(--ic-space-sm);

  --compact-step-inner-color: var(--ic-step-indicator-status-current);
  --compact-step-outer-color: var(--ic-step-indicator-status-remaining);
  --compact-step-circular-line-width: var(--ic-space-xxs);
}

:host(.ic-step-compact) .step {
  -moz-column-gap: var(--ic-space-sm);
       column-gap: var(--ic-space-sm);
}

:host(.ic-step-compact) .step:not(.current) {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.compact-step-progress-indicator {
  margin: var(--ic-space-xs) 0 0;
}

:host ic-loading-indicator::part(ic-loading-container) {
  border-radius: 50%;
}

:host() ic-loading-indicator::part(ic-loading-container) {
  background-color: var(--ic-step-indicator-background);
}

:host(.ic-step-compact) .heading-area {
  display: flex;
  flex-direction: column;
  width: 14.25rem;
}

:host(.ic-step-compact) .heading,
:host(.ic-step-compact) ::slotted([slot="heading"]) {
  color: var(--ic-stepper-compact-step-title);
}

:host(.ic-step-compact) .disabled .heading,
:host(.ic-step-compact) .disabled ::slotted([slot="heading"]) {
  color: var(--ic-stepper-compact-step-title-disabled);
}

.info-line {
  display: flex;
  -moz-column-gap: var(--ic-space-xs);
       column-gap: var(--ic-space-xs);
}

.step-status {
  display: flex;
  color: var(--ic-stepper-compact-step-requirement-text);
  -moz-column-gap: var(--ic-space-xxxs);
       column-gap: var(--ic-space-xxxs);
}

.compact-step-completed .step-status {
  color: var(--ic-stepper-compact-step-completed-text);
}

.compact-step-disabled :is(.heading, .step-status) {
  color: var(--ic-stepper-compact-step-requirement-text-disabled);
}

.step-num {
  color: var(--ic-stepper-compact-step-stage-text);
  white-space: nowrap;
}

:host(.ic-step-compact) .step-icon {
  margin: var(--ic-space-xxxs);
}

:host(.ic-step-compact) .step-icon svg {
  width: var(--ic-space-md);
  height: var(--ic-space-md);
}

/* DEFAULT STEP STYLING */
:host(.ic-step-default) .step {
  flex-direction: column;
}

:host(.ic-step-default.last-step) {
  flex-grow: initial;
}

.step-top {
  display: flex;
  width: 100%;
  align-items: center;
  align-self: flex-start;
  height: 2.5rem;
}

:host(.ic-step-default) .step-icon {
  border-radius: 50%;
  background-color: var(--ic-step-number-inactive);
}

.step-icon-inner {
  width: var(--ic-space-xl);
  height: var(--ic-space-xl);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: var(--ic-step-number-text-inactive);
}

:host(.ic-step-default) .current {
  color: var(--ic-status-info-default);
}

:host(.ic-step-default) .heading-area {
  margin: var(--ic-space-xs) 0;
  padding-right: var(--ic-space-xs);
  width: 100%;
}

:host(.ic-step-default) .heading,
:host(.ic-step-default) ::slotted([slot="heading"]),
.subheading {
  width: -moz-fit-content;
  width: fit-content;
}

.heading,
::slotted([slot="heading"]) {
  color: var(--ic-step-title);
}

.current .heading,
.current ::slotted([slot="heading"]) {
  color: var(--ic-step-title-current);
}

.completed .heading,
.completed ::slotted([slot="heading"]) {
  color: var(--ic-step-title-success);
}

.disabled .heading,
.disabled ::slotted([slot="heading"]) {
  color: var(--ic-step-title-disabled);
}

.subheading {
  color: var(--ic-step-title-status-text-inactive);
}

.current .subheading {
  color: var(--ic-step-title-status-text-current);
}

.disabled .subheading {
  color: var(--ic-step-title-status-text-disabled);
}

:host(.ic-step-default) .completed {
  color: var(--ic-status-success-default);
}

.active .step-icon-inner {
  box-shadow: inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem;
}

.current .step-icon-inner {
  background-color: var(--ic-step-number-background-active);
  color: var(--ic-step-number-text-current);
}

.disabled {
  color: var(--ic-color-text-disabled-mid);
}

.disabled .step-icon-inner {
  border: var(--ic-border-width) dashed var(--ic-step-number-disabled);
  width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
  height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
  color: var(--ic-step-number-text-disabled);
}

.disabled .step-icon {
  background-color: transparent !important;
}

.completed .step-icon-inner {
  background: var(--ic-step-number-background-success);
  box-shadow: inset var(--ic-step-number-background-success) 0 0 0
    var(--ic-space-xxxs);
  border-radius: 100%;
}

:host(.ic-step-default) .current .step-icon {
  border: var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);
  padding: var(--ic-space-xxxs);
  margin: 0 calc(-1 * var(--ic-space-xxxs));
  background-color: var(--ic-step-number-current-outer-fill);

  /* compensating for the circle being bigger than other steps */
}

.step-connect {
  height: var(--ic-space-xxxs);
  background-color: var(--ic-stepper-connector-remaining-status);
  margin: 0 var(--ic-space-xs);
  border-radius: var(--ic-space-xxs);
  width: 100%;
}

.aligned-full-width.step-connect {
  min-width: 6.25rem;
  width: 100%;
}

.disabled .step-connect {
  height: 0;
  background-color: rgb(0 0 0 / 0%);
  border-top: 0.125rem dashed var(--ic-stepper-connector-disabled);
  border-radius: 0;
}

.completed .step-connect {
  background-color: var(--ic-stepper-connector-success);
}

.step-connect-inner {
  width: 70%;
  display: flex;
  flex: auto;
  height: var(--ic-space-xxxs);
  border-radius: var(--ic-space-xxs);
  background-color: var(--ic-stepper-connector-current-status);
}

.step-icon-inner .check-icon {
  padding-top: var(--ic-space-xxs);
}

.step-icon-inner .check-icon svg {
  width: var(--ic-space-md);
  height: auto;
}

.step-icon-inner .check-icon > svg > path {
  fill: var(--ic-step-number-icon-success);
}

/** High Contrast **/
@media (forced-colors: active) {
  /* COMPACT STEP */
  .compact-step-disabled :is(.heading, .step-status) {
    color: GrayText;
  }

  /* DEFAULT STEP */
  .step-connect:not(.disabled .step-connect) {
    border: var(--ic-border-hc);
  }

  .active .step-icon-inner,
  .completed .step-icon-inner,
  .current .step-icon-inner {
    forced-color-adjust: none;
    box-shadow: inset canvastext 0 0 0 0.125rem;
    background-color: transparent;
    color: canvastext;
  }

  :host(.ic-step-default) .current .step-icon {
    padding: 0;
    border: none;
  }

  .disabled,
  .disabled .heading-area,
  .disabled .step-icon-inner,
  .disabled .heading,
  .disabled ::slotted([slot="heading"]) {
    color: GrayText;
  }

  .step-connect-inner,
  .completed .step-connect {
    background-color: canvastext;
  }

  .step-icon-inner .check-icon > svg > path {
    fill: canvastext;
  }
}