nav.step {
 margin:var(--grid-aside-columns-gap) 0 var(--input-height);
}

nav.step ol {
 display:flex;
 flex-direction:row;
 justify-content:space-between;
}

nav.step ol li {
 margin:0;
}

nav.step ol li.spacer {
 display:flex;
 flex-grow:1;
 justify-content:center;
}

nav.step ol li.spacer span {
 width:22px;
 height:22px;

 background-image:radial-gradient(circle at center, var(--light-gray) 0, var(--light-gray) 25%, transparent 25%, transparent 100%);
 background-position:center 3px;
 background-size:22px 22px;
 background-repeat:no-repeat;
}

nav.step ol li button {
 border:1px solid var(--light-blue);
 border-radius:var(--global-border-radius);

 background:none;
 background-repeat:no-repeat;
 background-position:center;
 background-size:18px;

 position:relative;
 width:22px;
 height:22px;

 overflow:hidden;
 font-size:0;
 cursor:pointer;
}

nav.step ol li button.complete {
 border-color:var(--success-color);
 background-image:url('icon/green/check.svg');
 background-position:center 4px;
}

nav.step ol li button.incomplete {
 border-color:var(--error-color);
 background-image:url('icon/red/fail.svg');
 background-size:16px;
}

div.step:not(.active) {
 width:0;
 height:0;
 visibility:hidden;
 overflow:hidden;
 pointer-events:none;
}