.setup-wizard{
    background-color: var(--white-bg);
    border: 1px solid var(--text-color);
    padding: var(--medium-gap);
}

.setup-wizard-inner {
    background-color: var(--gray-bg);
    padding: var(--medium-gap);
    display: flex;
    flex-direction:column;
    gap: var(--pill-gap);
}

    .setup-wizard-inner > h3{
        padding: 0;
        margin: 0;
    }

.setup-wizard-progress {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--medium-gap) !important;
}

    .setup-wizard-progress > progress {
        padding: 0;
        margin: 0;
        flex-grow: 2;
        height: var(--pill-gap);
        border-radius: calc(var(--pill-gap)/2);
        /* Reset browser defaults */
        -webkit-appearance: none;
        appearance: none;
        border: none;
        background-color: var(--gray-bg);
        color: var(--text-color);
        box-shadow: 0 2px 18px rgb(0 0 0 / 0.2);
    }

        /* Chrome / Safari */
        .setup-wizard-progress > progress::-webkit-progress-bar {
            height: var(--pill-gap);
            background-color: var(--gray-bg);
            border-radius: calc(var(--pill-gap)/2);
        }

        .setup-wizard-progress > progress::-webkit-progress-value {
            height: var(--pill-gap);
            background: var(--primary-color-2);
            background: linear-gradient(135deg,var(--primary-color-2) 15%, var(--primary-color-1) 50%, var(--primary-color-3) 100%);
            border-radius: calc(var(--pill-gap)/2);
        }

        /* Firefox */
        .setup-wizard-progress > progress::-moz-progress-bar {
            height: var(--pill-gap);
            background: var(--primary-color-2);
            background: linear-gradient(135deg,var(--primary-color-2) 15%, var(--primary-color-1) 50%, var(--primary-color-3) 100%);
            border-radius: calc(var(--pill-gap)/2);
        }

    .setup-wizard-progress > label {
        padding: 0;
        margin: 0;
    }

.setup-step{
    display: flex;
}

.setup-step-inner {
    background-color: var(--white-bg);
    border: 1px solid var(--text-color);
    padding: var(--pill-gap);
    display: flex;
    gap: var(--pill-gap);
    justify-content: space-between;
    flex-grow:2;
}

    .setup-step-inner.setup-step-inner--checked {
        flex-grow: 0;
    }

    .setup-step-inner .icon-edit {
        display: flex;
        flex-shrink: 0;
        background-color: var(--gray-bg);
    }

.setup-step-state {
    width: var(--btn-h);
    height: var(--btn-h);
    background-color: var(--text-color);
    flex-shrink: 0;
}

.setup-step-text {
    display: flex;
    flex-direction: column;
}

    .setup-step-text > h4 {
        padding: 0;
        margin: 0;
    }

    .setup-step-text > p {
        padding: 0;
        margin: 0;
        font-size: 0.85em;
        opacity: 0.80;
    }


@media (max-width: 850px) {
    .setup-wizard-inner, .setup-wizard {
        padding: var(--pill-gap);
    }
}