:root {
    --wizard-item-dim: 60px;
    --wizard-item-icon-dim: 40px;

    --wizard-icon-border: 2px;
    --wizard-label-width: 120px;

    --wizard-icons-margin: calc(calc(var(--wizard-label-width)  - var(--wizard-item-dim) ) - calc(var(--wizard-icon-border) * 2) );/*150 - 40 - 4*/
    --wizard-icons-margin-solid: calc(var(--wizard-label-width)  - var(--wizard-item-dim));

    --wizard-link-width: 2px;
    --wizard-link-width-solid: 8px;
    
    --wizard-item-bg: #888; 
    --wizard-item-bg-active: var(--primary);

    --wizard-icon-col: #888;
    --wizard-icon-col-active: var(--primary);

    --wizard-icon-col-solid: #000;
    --wizard-icon-col-active-solid: var(--primary-darker);

    --wizard-label-bg: #EEE; 
}

[data-theme="dark"] {
    --wizard-item-bg: #888; 
    --wizard-item-bg-active: var(--secondary-darker);

    --wizard-icon-col: #888;
    --wizard-icon-col-active: var(--secondary);

    --wizard-icon-col-solid: #FFF;
    --wizard-icon-col-active-solid: var(--secondary-lighter);

    --wizard-label-bg: #111; 
}


.wizard-row
{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 100%; */
}

.wizard-icons
{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: calc(100% - var(--wizard-icons-margin));
    margin-bottom: 5px;
}

.wizard-row.solid .wizard-icons
{
    width: calc(100% - var(--wizard-icons-margin-solid));
}

.wizard-icon
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    width: var(--wizard-item-dim);
    height: var(--wizard-item-dim);
 
    border-radius: 50%;

    background-color: transparent;
    border: var(--wizard-icon-border) solid var(--wizard-item-bg);

    color: var(--wizard-icon-col);

    transition: color 0.4s, background-color 0.4s, box-shadow 0.4s;
    
    cursor: pointer;
}

.wizard-row.solid .wizard-icons .wizard-icon
{
    border: none;
    background-color: var(--wizard-item-bg);
    color: var(--wizard-icon-col-solid);
}

.wizard-icon.active
{
    color: var(--wizard-icon-col-active);
    border: var(--wizard-icon-border) solid var(--wizard-item-bg-active);
}

.wizard-row.solid .wizard-icons .wizard-icon.complete
{
    background-color: var(--wizard-item-bg-active);
}

.wizard-row.solid .wizard-icons .wizard-icon.active
{
    /* background-color: var(--wizard-item-bg-active); */
    color: var(--wizard-icon-col-active-solid);

    box-shadow: var(--button-bs-active);
    background-color: var(--button-bg-active);
}

.wizard-icon > svg
{
    width: var(--wizard-item-icon-dim);
    height: var(--wizard-item-icon-dim);
}

.wizard-row-link
{
    height: 0px;
    border-top: var(--wizard-link-width) solid var(--wizard-item-bg);
    flex-grow: 1;
    /* margin-top: calc(var(--wizard-item-dim) / 2); */

    transition: color 0.4s, background-color 0.4s;
}

.wizard-row.solid .wizard-icons .wizard-row-link
{
    border-top: var(--wizard-link-width-solid) solid var(--wizard-item-bg);
}

.wizard-row-link.complete
{
    border-top: var(--wizard-link-width) solid var(--wizard-item-bg-active);
}

.wizard-row.solid .wizard-icons .wizard-row-link.complete
{
    border-top: var(--wizard-link-width-solid) solid var(--wizard-item-bg-active);
}   

.wizard-labels
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.wizard-label
{
    width: var(--wizard-label-width);
    text-align: center;

    transition: color 0.4s, background-color 0.4s;

    background-color: var(--wizard-label-bg);
    border-radius: 10px;
    padding: 2px;
}

.wizard-icons-margins
{
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
}

.wizard-contents
{
    min-height: 300px;
}

.wizard-contents-margins
{
    /* margin-top: 20px; */
    /* margin-bottom: 20px; */
    /* margin-left: 10px; */
    /* margin-right: 10px; */
}

.wizard-pane
{
    display: none;
    opacity: 0;
    transform: translateX(calc(var(--tabs-anim-pos) *-1));
  
    position: relative;
  
    /* overflow-y: scroll; */
    /* height: calc(100% - var(--content-pane-gap)); */
    transition: opacity var(--tabs-anim-dur) ease-out, transform var(--tabs-anim-dur) ease-out;
    /* padding: 5px; */
}


.wizard-pane.active
{
  display: block;
  opacity: 1;
  transform: translateX(0);
}

.wizard-pane.showing
{
    display: block;
    opacity: 0;
    transform: translateX(var(--tabs-anim-pos));
}

.wizard-pane.showing.from-right
{
  transform: translateX(calc(var(--tabs-anim-pos) *-1));
}

.wizard-pane.clearing
{
    opacity: 0;
    transform: translateX(calc(var(--tabs-anim-pos) *-1));
}

.wizard-pane.clearing.from-right
{
    transform: translateX(var(--tabs-anim-pos));
}

.wizard-prompt
{
    text-align: center;
    margin-bottom: 10px;
}