/*------------------------------------*\
    TASK LIST
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

.ds_task-list {
    list-style-type: none;
    margin: -0.125rem 0 0 0; // Negative top margin to offset top border of first task
    padding: 0;

    &__task {
        align-items: center;
        border-top: 0.125rem settings.$ds_colour__border--faint solid;
        display: flex;
        gap: 0.5rem 2rem;
        justify-content: space-between;
        margin: 0;
        @include helpers.ds_responsive-padding(2, top);
        @include helpers.ds_responsive-padding(2, bottom, $tuning: -0.125rem);

        &:last-child {
            border-bottom: 0.125rem settings.$ds_colour__border--faint solid;
        }

        // Stack at small size
        @include helpers.ds_media-query(small-down) {
            align-items: flex-start;
            flex-direction: column;
            @include helpers.ds_responsive-padding(3, bottom, $tuning: -0.125rem);
        }

        &-details {
            max-width: 100%;
        }

        // remove heading styles
        &-heading {
            font-weight: settings.$normal;
            margin: 0;
            @include helpers.ds_root-size;
        }

        &-link {
            text-decoration: underline;
        }

        &-summary {
            margin: 0;
            @include helpers.ds_responsive-margin(1, top);
        }

        // DEPRECATED - use ds_tag component instead
        &-status {
            @include helpers.ds_small-size;
            @include helpers.ds_high-contrast-outline;
            background-color: settings.$ds_colour__background--tertiary;
            font-weight: settings.$bold;
            padding: 0.25rem 1rem;
            white-space: nowrap;

            &--complete {
                background: settings.$ds_colour__background--primary;
                color: settings.$ds_colour__state--positive;
                border: 0.125rem settings.$ds_colour__state--positive solid;
                padding: 0.125rem 1rem;
            }
        }
    }

    &-heading {
        @include helpers.ds_h3-style;
        display: inline-block;
    }

    &-intro {
        @include helpers.ds_responsive-margin(2, bottom);
    }

    // Add top margin if following inline heading
    &-heading + &-intro {
        //@include ds_responsive-margin(1, top);
    }
    // Include tuning for top border of tasks
    &-heading + & {
        @include helpers.ds_responsive-margin(1, top, $tuning: -0.125rem);
    }
}

.ds_task-list-group {
    list-style-type: none;
    margin: 0;
    padding: 0;

    &__section,
    &__section:last-child {
        margin: 0;
        padding: 0;
        @include helpers.ds_responsive-margin(5, bottom);

        @include helpers.ds_media-query(small-down) {
            @include helpers.ds_responsive-margin(6, bottom);
        }
    }

    &--ordered {
        list-style-position: inside;
        list-style-type: decimal;

        .ds_task-list-group__section::marker {
            @include helpers.ds_h3-size;
            font-weight: settings.$bold;
        }
    }
}

.ds_task-list-status {
    @include helpers.ds_responsive-margin(5, bottom);

    @include helpers.ds_media-query(small-down) {
        @include helpers.ds_responsive-margin(6, bottom);
    }

    > p {
        @include helpers.ds_responsive-margin(1, bottom);
    }

    &-heading {
        @include helpers.ds_h3-style;
    }
}