/*------------------------------------*\
    #SUMMARY LIST
\*------------------------------------*/

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

$summary-card-header-background-colour: settings.$ds_colour__background--secondary !default;

$summary-list__border-width: 0.0625rem; // 1px

.ds_summary-list {
    list-style-type: none;
    margin-left: 0;
    @include helpers.ds_block-margins--bottom;

    &__key {
        font-weight: settings.$bold;
    }

    &__key,
    &__value,
    &__actions {
        display: block;
        margin-left: 0;
        overflow-wrap: break-word;
        @include helpers.ds_responsive-margin(1, bottom);
    }

    &__item {
        border-bottom: $summary-list__border-width solid settings.$ds_colour__border;
        margin: 0;
        position: relative;
        @include helpers.ds_responsive-padding(2, top);
        @include helpers.ds_responsive-padding(1, bottom, false, -1 * $summary-list__border-width);
    }

    &--no-border &__item {
        border-bottom: 0;
        @include helpers.ds_responsive-padding(1, bottom);
    }

    &__value {
        // Remove top margin of first element and bottom margin of last element to avoid additional spacing
        @include helpers.ds_first-child-no-margin;
        @include helpers.ds_last-child-no-margin;

        // If first element is visually hidden supporting text then remove top margin of next sibling
        .visually-hidden:first-child + * {
            margin-top: 0;
        }

        // Additional styling for compound values
        dt,
        dd {
            margin: 0;
        }

        dt {
            margin-top: 1rem;
        }

        @include helpers.ds_media-query(medium) {
            dl:first-child  {
                margin-top: -1rem;
            }
        }
    }

    &__answer::before,
    &__answer::after {
        content: '';
    }

    &__actions-list {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;

        &-item {
            margin: 0;
            padding: 0;

            &:not(:first-child) {
                position: relative;
                @include helpers.ds_responsive-margin(1, left);
                @include helpers.ds_responsive-padding(1, left, false, $summary-list__border-width);

                &::before {
                    background: settings.$ds_colour__text--secondary;
                    content: '';
                    height: calc(1em - 0.125rem);
                    left: 0;
                    position: absolute;
                    top: calc(50% - (1em - 0.125rem) / 2);
                    width: $summary-list__border-width;
                }
            }
        }
    }

}

@include helpers.ds_media-query(medium) {
    .ds_summary-list {
        border-collapse: collapse;
        display: table;
        width: 100%;

        &__item {
            display: table-row;
            padding: 0;
        }

        &__key,
        &__value,
        &__actions {
            display: table-cell;
            padding: 1rem 1rem #{1rem - $summary-list__border-width} 1rem;
        }

        &--no-border &__item {
            .ds_summary-list__key,
            .ds_summary-list__value,
            .ds_summary-list__action {
                padding-bottom: 1rem;
            }
        }

        &__key {
            padding-left: 0;
            width: 50%;
        }

        &__value {
            width: 50%;
        }

        &__actions-list {
            justify-content: flex-end;
        }

        &__actions {
            padding-right: 0;
            text-align: right;
        }
    }
}

@include helpers.ds_media-query(large) {
    .ds_summary-list {
        // Shorter keys modifier
        &--short-keys &__key {
            width: 30%;
        }
        &--short-keys &__value {
            width: 70%;
        }
    }
}

// Summary card
// [1] - Add visual separation of header in high contrast mode
.ds_summary-card {
    border: $summary-list__border-width solid settings.$ds_colour__border;
    @include helpers.ds_block-margins;

    &__header {
        align-items: flex-start;
        border-bottom: $summary-list__border-width solid $summary-card-header-background-colour; //[1]
        background: $summary-card-header-background-colour;
        display: flex;
        justify-content: space-between;
        @include helpers.ds_responsive-padding(3, top, $tuning: -1 * $summary-list__border-width);
        @include helpers.ds_responsive-padding(3, right, $tuning: -1 * $summary-list__border-width);
        @include helpers.ds_responsive-padding(3, bottom, $tuning: -1 * $summary-list__border-width);
        @include helpers.ds_responsive-padding(3, left, $tuning: -1 * $summary-list__border-width);

        // Stack on mobile
        @include helpers.ds_media-query(medium-down) {
            flex-direction: column;
        }

        &-title {
            @include helpers.ds_h3-size;
            font-weight: settings.$bold;
            margin: 0;
        }

        .ds_link {
            font-weight: settings.$bold;
        }

        @include helpers.checkAndFixDescendantLinkColour(settings.$ds_colour__link, $summary-card-header-background-colour, 'summary card header');
    }

    &__actions-list {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        padding-left: 2rem;

        @include helpers.ds_media-query(medium-down) {
            padding-left: 0;
            padding-top: 0.5rem;
        }

        &-item {
            margin: 0;
            padding: 0;

            &:not(:first-child) {
                position: relative;
                @include helpers.ds_responsive-margin(1, left);
                @include helpers.ds_responsive-padding(1, left, false, $summary-list__border-width);

                &::before {
                    background: settings.$ds_colour__text--secondary;
                    content: '';
                    height: calc(1em - 0.125rem);
                    left: 0;
                    position: absolute;
                    top: calc(50% - (1em - 0.125rem) / 2);
                    width: $summary-list__border-width;
                }
            }
        }
    }

    &__content {
        @include helpers.ds_responsive-padding(1, top);
        @include helpers.ds_responsive-padding(3, right, $tuning: -1 * $summary-list__border-width);
        @include helpers.ds_responsive-padding(1, bottom, $tuning: -1 * $summary-list__border-width);
        @include helpers.ds_responsive-padding(3, left, $tuning: -1 * $summary-list__border-width);
    }

    // Remove bottom margin and border
    .ds_summary-list {
        margin-bottom: 0;

        &__item:last-child {
            border-color: transparent;
        }
    }
}