/*------------------------------------*\
    #STEP NAVIGATION
    Step navigation is an enhancement to the DS accordion
\*------------------------------------*/

@use "sass:math";
@use "../../base/helpers";
@use "../../base/settings";

$step-count-margin: 2.5rem;
$step-count-margin--medium: 3rem;
$step-count-size: 2rem;
$step-count-size--medium: 2.5rem;
$step-content-line-height: 1.5rem;
$step-content-line-height--medium: 2rem;
$step-vertical-line-width: 0.125rem;

.ds_step-navigation {
    counter-reset: section;

    &__list {
        list-style-type: none;
        margin: 0;

        li {
            margin-bottom: 0;
        }
    }

    &__title {
        font-size: settings.$h3-size;
        line-height: 1.5rem;
    }

    &__title-link {
        display: block;
        text-decoration: underline;
        @include helpers.ds_responsive-margin(3, bottom);
        @include helpers.ds_responsive-margin(1, top);
    }

    &__current-link::before {
        content: '';
        position: absolute;
        left: #{math.div($step-count-size, 2) - $step-count-margin};
        right: 100%;
        height: 0.0625rem;
        background: settings.$ds_colour__border--strong;
        margin-top: math.div($step-content-line-height, 2);
    }

    &__count {
        background-color: settings.$ds_colour__background--primary;
        border: 0.0625rem solid currentColor;
        border-radius: 1.25rem;
        color: settings.$ds_colour__border--strong;
        content: counter(section);
        counter-increment: section;
        display: block;
        font-size: helpers.px-to-rem(settings.$root-font-size);
        font-weight: settings.$bold;
        height: $step-count-size;
        left: #{$step-count-margin * -1};
        line-height: #{$step-count-size - 0.125rem};
        position: absolute;
        text-align: center;
        top: 0.25rem;
        width: $step-count-size;
    }

    .ds_current &__count {
        background-color: settings.$ds_colour__link--current__background;
        border: 0.125rem solid settings.$ds_colour__border--highlight;
        line-height: #{$step-count-size - 0.25rem};

        @include helpers.ds_media-query-high-contrast {
            border-color: highlight;
        }
    }

    .ds_accordion {
        margin-left: $step-count-margin;
    }

    .ds_accordion__open-all {
        margin-left: $step-count-margin * -1;
        padding-left: 0;
    }

    .ds_accordion-item {
        position: relative;

        &::before {
            border-left: 0.0625rem solid settings.$ds_colour__border--strong;
            bottom: -0.625rem;
            content: '';
            display: block;
            left: #{math.div($step-count-size, 2) - $step-count-margin - math.div($step-vertical-line-width, 2)};
            position: absolute;
            top: 2rem;
            width: $step-vertical-line-width;
        }

        &:last-child::before {
            bottom: 0 !important;
        }

        &:last-child::after {
            border-bottom: 0.0625rem solid settings.$ds_colour__border--strong;
            bottom: -0.0625rem;
            content: '';
            display: block;
            height: 0.0625rem;
            left: #{math.div($step-count-size, 2) - $step-count-margin - 0.375rem};
            position: absolute;
            width: 0.8125rem;
        }
    }

    &__or,
    &__and {
        counter-increment: section -1;
    }

    &__or &__count,
    &__and &__count {
        background-color: transparent;
        border-color: transparent;
    }
}

@include helpers.ds_media-query(medium) {
    .ds_step-navigation--small {
        .ds_step-navigation__count {
            top: 0.75rem;
        }

        .ds_accordion-item::before {
            bottom: -1.125rem;
            top: 2.5rem;
        }
    }

    .ds_step-navigation:not(.ds_step-navigation--small) {
        .ds_step-navigation__count {
            font-size: helpers.px-to-rem(settings.$root-font-size--medium);
            height: $step-count-size--medium;
            left: #{$step-count-margin--medium * -1};
            line-height: #{$step-count-size--medium - 0.125rem};
            top: 0.75rem;
            width: $step-count-size--medium;
        }

        .ds_current .ds_step-navigation__count {
            line-height: #{$step-count-size--medium - 0.25rem};
        }

        .ds_step-navigation__current-link::before {
            left: #{math.div($step-count-size--medium, 2) - $step-count-margin--medium};
            margin-top: math.div($step-content-line-height--medium, 2);
        }

        .ds_accordion {
            margin-left: $step-count-margin--medium;
        }

        .ds_accordion__open-all {
            margin-left: $step-count-margin--medium * -1;
        }

        .ds_accordion-item::before {
            bottom: -1.0625rem;
            left: #{math.div($step-count-size--medium, 2) - $step-count-margin--medium};
            top: 3.0625rem;
        }

        .ds_accordion-item:last-child::after {
            left: #{math.div($step-count-size--medium, 2) - $step-count-margin--medium - 0.375rem};
        }
    }
}