.wizard-head
{
    margin-bottom: steps(3);

    @include for-at-least-normal-tablets
    {
        margin-bottom: steps(4.5);

        text-align: center;
    }

    &.delimited,
    &:not([data-first-step="true"])
    {
        padding-bottom: steps(3);
        border-bottom: 1px solid $color-border-normal;
        margin-bottom: steps(3) - 1px;

        @include for-at-least-normal-tablets
        {
            padding-bottom: steps(2.5);
        }
    }

    &:not([data-first-step="true"])
    {
        h1
        {
            @include normal-heading;

            @include for-at-most-small-tablets
            {
                margin-bottom: steps(2);
            }
        }

        &.nondelimited
        {
            padding-bottom: 0;
            border-bottom: 0;
            margin-bottom: steps(3);
        }
    }

    > .content
    {
        @include page-container;
    }

    .progress
    {
        counter-reset: step-list;

        @include for-at-least-normal-tablets
        {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;

            margin-bottom: steps(2.5);

            &:last-child
            {
                margin-bottom: steps(2);
            }
        }

        .step
        {
            width: 100%;

            color: $color-text-lighter;

            &::before
            {
                @include font-dimensions(14px, steps(2), 0.6px);

                counter-increment: step-list;
                content: counter(step-list) "/" attr(data-total-steps);

                float: left;
                height: steps(2);
                padding: 5px steps(1) 3px;
                border: 1px solid $color-border-darker;
                border-radius: steps(2);
                margin-right: steps(2);

                text-align: center;
                white-space: nowrap;
            }

            .text
            {
                @include baseline-box(14px, steps(2), 0.6px);

                display: block;
                overflow: hidden;
            }

            @include for-at-most-small-tablets
            {
                &:not(.active)
                {
                    @include visually-hidden;
                }
            }

            @include for-at-least-normal-tablets
            {
                width: auto;
                margin: steps(0.5) 0;

                white-space: nowrap;

                &:not(:last-child)
                {
                    margin-right: steps(3);
                }

                &::before
                {
                    content: counter(step-list);

                    width: steps(2);
                    padding: 5px 4px 3px;
                    border-radius: 50%;
                    margin-right: steps(3);
                }

                &.completed,
                &.active
                {
                    color: $color-text-darker;
                }

                &.completed
                {
                    &::before
                    {
                        content: svg-image-data-url("checkmark", $color-text-lighter);
                    }
                }

                &.active
                {
                    &::before
                    {
                        @include antialiasing;

                        border-color: $color-background-inverted-lightest;

                        color: $color-text-inverted-lighter;
                        background: $color-background-inverted-lightest;
                    }
                }

                .text
                {
                    display: inline-block;
                    overflow: visible;
                }
            }
        }
    }

    .links
    {
        @include links;
    }

    a.back
    {
        @include back-link;

        @include for-at-most-small-tablets
        {
            overflow: hidden;
            display: block;
            width: steps(3);
            height: steps(3);
        }
    }

    @include for-at-most-small-tablets
    {
        &:not([data-first-step="true"])
        {
            > .content
            {
                display: flex;
                flex-wrap: wrap;
            }

            h1,
            .failure-notice
            {
                flex: none;
                width: 100%;
            }

            .progress
            {
                order: 1;
                flex: 1 1;
            }

            .links
            {
                padding: 0;
                margin-right: steps(2);
            }

            .failure-notice
            {
                order: 1;
            }
        }
    }
}

.wizard-action
{
    @include page-content;
    @include buttons;

    margin-top: steps(3);

    @include for-at-least-normal-tablets
    {
        margin-top: steps(6);

        text-align: center;
    }

    .button
    {
        padding: steps(2.5) steps(3.5);
        line-height: steps(3);
        font-size: 22px;
        font-weight: bold;
        border-radius: steps(4);
    }
}

.wizard-end
{
    .content
    {
        text-align: center;
    }

    h1
    {
        @include normal-heading;
        @include success-icon;
    }

    .text
    {
        @include normal-heading;
    }

    .actions
    {
        @include buttons;

        margin-bottom: steps(2);

        @include for-at-least-normal-tablets
        {
            margin-top: steps(4);
            margin-bottom: steps(3);
        }

        .button
        {
            @include button-spacing;

            @include for-phones
            {
                letter-spacing: 0.6px;
            }

            @include for-at-least-tablets
            {
                &:not(:only-child)
                {
                    margin-bottom: steps(2);
                }
            }
        }
    }

    .links
    {
        @include list-links;
    }
}
