/*------------------------------------*\
    ACCORDION
\*------------------------------------*/

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

// modifiable vars
$accordion__border-width: 0.0625rem; //1px
$accordion__header-colour: settings.$ds_colour__link !default;




.ds_accordion {
    position: relative;
    
    @include helpers.ds_responsive-margin (4, bottom, false, -1 * $accordion__border-width);
    @include helpers.ds_responsive-margin (4, top);

    &__open-all {
        display: none;
        line-height: helpers.line-height-on-grid(settings.$root-font-size);
        margin-bottom: 0.5rem;
        margin-left: 0.5rem;
        position: relative;

        @include helpers.ds_media-query(medium) {
            line-height: helpers.line-height-on-grid(settings.$root-font-size--medium);
        }

        + * {
            clear: both;
        }
    }
}

h1,h2,h3 {
    + .ds_accordion {
        margin-top: 0
    }
}

.ds_accordion.js-initialised {
    // Open all button is shown after JavaScript is initialised
    .ds_accordion__open-all {
        display: block;
    }

    .ds_accordion-item__header {
        padding: 0;
    }
}

.ds_accordion-item {
    border-bottom: $accordion__border-width solid settings.$ds_colour__border;
    border-top: $accordion__border-width solid settings.$ds_colour__border;

    /// [1] subtracting the accordion item's border width
    &__header {
        @include helpers.ds_link;
        @include helpers.ds_link--block;

        background-color: settings.$ds_colour__background--primary;
        border-width: 0;
        color: currentColor;
        margin: 0;
        padding: 0.5rem 0.5rem calc(0.75rem - $accordion__border-width); /// [1]
        position: relative;
        text-align: left;
        width: 100%;

        &:hover:not(:focus) {
            color: settings.$ds_colour__link--hover;
        }
    }

    &__title {
        @include helpers.ds_h4-size;
        margin-bottom: 0.25rem;

        &--button {
            padding: 0;
            margin-bottom: 0;
        }
    }

    /// [1] subtracting the accordion item's border width
    &__button {
        appearance: unset;
        background: transparent;
        border: 0;
        padding: 0.5rem 0.5rem calc(0.75rem - $accordion__border-width); /// [1]
        position: relative;
        text-align: left;
        width: 100%;
        z-index: 1;
    }

    &__label {
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    &__title--button &__label {
        z-index: -1;
    }

    &__indicator {
        @include helpers.ds_small-size;
        color: settings.$ds_colour__link;
        display: block;
        font-weight: settings.$normal;
        margin-top: 0.25rem;
        min-height: 1.5rem;
        padding: 0 0 0 1.1875rem; //19px
        pointer-events: none;
        position: relative;

        &::after {
            @include helpers.ds_chevron(down, 0.6125em);
            left: 0.1875rem; // 3px
            top: 0.375rem; // 6px
            position: absolute;
            transition: transform 0.2s, top 0.2s;
            pointer-events: none;
        }
    }

    &__body {
        display: none;
        padding: 1rem 0.5rem 1.5rem;

        @include helpers.ds_last-child-no-margin;
    }

    &__control:checked ~ &__body {
        display: block;
    }

    &__control:checked ~ &__header &__indicator {
        &::after {
            top: 0.625rem; // 1px
            transform: rotate(-225deg);
        }

        .js-close-label {
            display: inline;
        }
    }

    &__control:focus ~ &__header,
    &__button:focus {
        @include helpers.ds_focus;
    }

    &__control:focus ~ &__header,
    &__button:focus {
        @include helpers.ds_focus--inset;
    }

    &__control:focus ~ &__header &__indicator {
        color: settings.$ds_colour__link--focus;
        text-decoration-color: transparent;
    }

    &__control:focus ~ &__header &__indicator {
        color: settings.$ds_colour__link--focus;
        text-decoration: none;
    }

    + .ds_accordion-item {
        margin-top: -1 * $accordion__border-width;
    }

    // link styling for indicator text content
    &__indicator {
        text-decoration: underline;
        text-underline-offset: helpers.$link__underline-offset;
    }

    &__header:hover &__indicator {
        text-underline-offset: helpers.$link__underline-offset--hover;
        text-decoration-thickness: helpers.$link__underline-thickness--hover;
    }

    &__header:hover:not(:focus-within) &__indicator {
        color: settings.$ds_colour__link--hover;
    }

    .ds_accordion-item__button:focus &__indicator {
        color: settings.$ds_colour__link--focus;
        text-decoration-color: transparent;
    }

    @include helpers.ds_media-query(medium) {
        &__indicator {
            margin-top: 0.5rem;
            padding-left: 1.375rem; // 22px

            &::after {
                top: 0.3125rem; //5px
            }
        }

        &__control:checked ~ &__header &__indicator {
            &::after {
                top: 0.625rem; // 1px
            }
        }

        /// [1] subtracting the accordion item's border width
        &__header,
        &__button {
            padding: 1rem 1rem calc(1rem - $accordion__border-width) 0.5rem; /* [1] */
        }

        &__title {
            margin-bottom: 0.5rem;

            &--button {
                margin-bottom: 0;
            }
        }
    }
}




/* Open/close label display */
.ds_accordion-item__indicator::before {
    content: 'Open';
}
.ds_accordion-item__indicator[data-open-text]::before {
    content: attr(data-open-text);
}

.ds_accordion-item__control:checked ~ .ds_accordion-item__header {
    .ds_accordion-item__indicator::before {
        content: 'Close';
    }
    .ds_accordion-item__indicator[data-close-text]::before {
        content: attr(data-close-text);
    }
}



/* SMALL VARIANT */

.ds_accordion--small {
    .ds_accordion-item__header,
    .ds_accordion-item__title,
    .ds_accordion-item__button,
    .ds_accordion-item__body,
    .ds_accordion__open-all {
        font-size: helpers.px-to-rem(settings.$root-font-size); // 1rem
        line-height: helpers.line-height-on-grid(settings.$root-font-size); //1.5
    }

    .ds_accordion-item__body {
        padding-right: 1rem;

        h3, h4 {
            font-size: 1em; // 1rem
            line-height: helpers.line-height-on-grid(settings.$root-font-size); //1.5
        }
    }
}


/* HIGH CONTRAST */
@include helpers.ds_media-query-high-contrast {
    .ds_accordion-item__indicator {
        color: linktext !important;
    }
}