/*!
 * Pico Reforged v2.0.1 (https://pico.rusticstack.com)
 * Copyright 2019-2024 Lucas Larroche and the Pico CSS authors
 * Copyright 2026 rusticstack
 * Licensed under MIT
 */
@layer pico.tokens, pico.theme, pico.core;

@layer pico.extras {
  :root, :host, [data-theme] {
    --pico-stepper-marker-size: 2rem;
    --pico-stepper-line-width: .125rem;
    --pico-stepper-gap: .5rem;
    --pico-stepper-ring-width: var(--pico-outline-width);
    --pico-stepper-line-color: var(--pico-muted-border-color);
    --pico-stepper-label-color: var(--pico-muted-color);
    --pico-stepper-complete-label-color: var(--pico-color);
    --pico-stepper-current-color: var(--pico-color);
    --pico-stepper-current-ring-color: var(--pico-primary-background);
    --pico-stepper-complete-background: var(--pico-primary-background);
    --pico-stepper-complete-color: var(--pico-primary-inverse);
    --pico-stepper-complete-line-color: var(--pico-primary-background);
  }

  ol[data-stepper] {
    inline-size: 100%;
    margin: 0 0 var(--pico-spacing);
    padding: 0;
    list-style: none;
    display: flex;
  }

  nav > :is(ol[data-stepper]) {
    margin-bottom: 0;
  }

  ol[data-stepper] > li {
    --_marker-background: var(--pico-background-color);
    --_marker-color: var(--pico-stepper-label-color);
    --_marker-ring: inset 0 0 0 var(--pico-stepper-line-width) var(--pico-form-element-border-color);
    --_marker-icon: none;
    --_label-color: var(--pico-stepper-label-color);
    --_label-weight: inherit;
    --_line-color: var(--pico-stepper-line-color);
    gap: var(--pico-stepper-gap);
    min-inline-size: 0;
    color: var(--_label-color);
    font-weight: var(--_label-weight);
    text-align: center;
    overflow-wrap: break-word;
    flex-direction: column;
    flex: 1 1 0;
    align-items: center;
    margin: 0;
    padding: 0;
    font-size: .875em;
    line-height: 1.25;
    display: flex;
    position: relative;
  }

  ol[data-stepper] > li:before {
    float: none;
    content: "​";
    position: absolute;
  }

  ol[data-stepper] > li > a {
    gap: var(--pico-stepper-gap);
    border-radius: var(--pico-border-radius);
    min-inline-size: 0;
    color: inherit;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    text-decoration: none;
    display: flex;
  }

  ol[data-stepper] > li > a:hover {
    text-underline-offset: var(--pico-text-underline-offset);
    text-decoration: underline;
  }

  ol[data-stepper] > li > a:focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: .25rem;
  }

  ol[data-stepper] > li > a[aria-disabled="true"] {
    opacity: var(--pico-form-element-disabled-opacity);
    pointer-events: none;
  }

  ol[data-stepper] > li > [aria-hidden="true"], ol[data-stepper] > li > a > [aria-hidden="true"] {
    z-index: 1;
    inline-size: var(--pico-stepper-marker-size);
    block-size: var(--pico-stepper-marker-size);
    background: var(--_marker-icon) center / .875rem no-repeat var(--_marker-background);
    box-shadow: var(--_marker-ring);
    color: var(--_marker-color);
    font-variant-numeric: tabular-nums;
    transition: background-color var(--pico-transition),
        box-shadow var(--pico-transition);
    border-radius: 50%;
    flex: none;
    place-items: center;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    display: grid;
  }

  ol[data-stepper] > li:not(:last-child):after {
    inset-block-start: calc((var(--pico-stepper-marker-size) - var(--pico-stepper-line-width)) / 2);
    inset-inline: calc(50% + var(--pico-stepper-marker-size) / 2 + var(--pico-stepper-gap))
        calc(var(--pico-stepper-marker-size) / 2 + var(--pico-stepper-gap) - 50%);
    block-size: var(--pico-stepper-line-width);
    border-radius: var(--pico-stepper-line-width);
    background-color: var(--_line-color);
    content: "";
    position: absolute;
  }

  ol[data-stepper] > li:has( ~ li[aria-current="step"],  ~ li > [aria-current="step"]) {
    --_marker-background: var(--pico-stepper-complete-background);
    --_marker-color: transparent;
    --_marker-ring: 0 0 0 0 transparent;
    --_marker-icon: var(--pico-icon-checkbox);
    --_label-color: var(--pico-stepper-complete-label-color);
    --_line-color: var(--pico-stepper-complete-line-color);
  }

  ol[data-stepper] > li[aria-current="step"], ol[data-stepper] > li:has( > [aria-current="step"]) {
    --_marker-color: var(--pico-primary);
    --_marker-ring: inset 0 0 0 var(--pico-stepper-ring-width) var(--pico-stepper-current-ring-color),
        0 0 0 .25rem color-mix(in oklab, var(--pico-stepper-current-ring-color) 20%, transparent);
    --_label-color: var(--pico-stepper-current-color);
    --_label-weight: 600;
  }

  ol[data-stepper][data-stepper="vertical"] {
    flex-direction: column;
  }

  ol[data-stepper="vertical"] > li {
    line-height: var(--pico-stepper-marker-size);
    text-align: start;
    flex-direction: row;
    flex: none;
    align-items: flex-start;
    padding-block-end: max(1.5rem, calc(var(--pico-spacing) * 1.75));
  }

  ol[data-stepper="vertical"] > li:last-child {
    padding-block-end: 0;
  }

  ol[data-stepper="vertical"] > li > a {
    flex-direction: row;
    align-self: auto;
    align-items: flex-start;
  }

  ol[data-stepper="vertical"] > li:not(:last-child):after {
    inset-block: calc(var(--pico-stepper-marker-size) + var(--pico-stepper-gap) / 2)
      calc(var(--pico-stepper-gap) / 2);
    inset-inline: calc((var(--pico-stepper-marker-size) - var(--pico-stepper-line-width)) / 2) auto;
    block-size: auto;
    inline-size: var(--pico-stepper-line-width);
  }

  @media (width < 576px) {
    ol[data-stepper="responsive"] {
      flex-direction: column;
    }

    ol[data-stepper="responsive"] > li {
      line-height: var(--pico-stepper-marker-size);
      text-align: start;
      flex-direction: row;
      flex: none;
      align-items: flex-start;
      padding-block-end: max(1.5rem, calc(var(--pico-spacing) * 1.75));
    }

    ol[data-stepper="responsive"] > li:last-child {
      padding-block-end: 0;
    }

    ol[data-stepper="responsive"] > li > a {
      flex-direction: row;
      align-self: auto;
      align-items: flex-start;
    }

    ol[data-stepper="responsive"] > li:not(:last-child):after {
      inset-block: calc(var(--pico-stepper-marker-size) + var(--pico-stepper-gap) / 2)
          calc(var(--pico-stepper-gap) / 2);
      inset-inline: calc((var(--pico-stepper-marker-size) - var(--pico-stepper-line-width)) / 2)
          auto;
      block-size: auto;
      inline-size: var(--pico-stepper-line-width);
    }
  }
}

@layer pico.utilities;