@use '../../variables' as *;

$step-circle-size: $size-xs;
$step-circle-border-width: 1px;

.progressIndicator {
  display: flex;

  .step {
    flex-basis: 128px;
  }
}

.step {
  border-top: 2px solid currentColor;
  align-items: center;
  height: $size-base;
  padding-right: $space-xl;

  &.clickable {
    cursor: pointer;

    &:focus-within {
      .label {
        text-decoration: underline;

        // Getting a warning for this property, but is working just fine :shrug: - Peter
        // https://caniuse.com/mdn-css_properties_text-decoration-thickness
        text-decoration-thickness: 2px;
      }
    }

    &:not(.disabled):hover .label {
      text-decoration: underline;
    }
  }
}

.current,
.complete {
  color: var(--color-accent-30);
}

.error {
  color: var(--color-error-30);
}

.disabled {
  color: var(--color-neutral-30);
  pointer-events: none;

  .label {
    color: var(--color-neutral-30);
  }
}

.current {
  .innerIcon {
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 50%;
  }
}

.label {
  white-space: nowrap;
  color: var(--color-neutral-100);
}

.icon {
  display: block;
  position: relative;
  width: $step-circle-size;
  height: $step-circle-size;
  font-size: $font-micro;
  border-radius: 50%;
  text-align: center;
  border: $step-circle-border-width solid currentColor;
}

.innerIcon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: #{$step-circle-size - $step-circle-border-width * 2};
}