/*------------------------------------*\
    TABS
\*------------------------------------*/

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

$tab__background-colour: settings.$ds_colour__background--secondary !default;
$tab__background-colour--current: settings.$ds_colour__background--primary !default;
$tab__link-colour: settings.$ds_colour__text !default;
$tab__link-colour--current: settings.$ds_colour__text !default;
$tab__border-width: 0.125rem !default;
$tab__border-width--current: 0.1875rem !default;
$tab__padding--vertical: 0.75rem !default;
$tab__padding--horizontal: 1rem !default;
$tab__gap: 0.5rem !default;
$tab__toggle-colour: settings.$ds_colour__link !default;
$tab__toggle-colour--hover: settings.$ds_colour__link--hover !default;

.ds_tabs {
    @include helpers.ds_responsive-margin(4, bottom);

    // Default title style matches contents list heading
    &__title {
        margin: 0;
        padding: 0;
        @include helpers.ds_h3-size;
        @include helpers.ds_responsive-margin(1, bottom);
    }

    // Default list style matches contents list
    &__list {
        list-style: none;
        margin-left: 0;
        padding-left: 2rem;
        @include helpers.ds_small-size;
        @include helpers.ds_responsive-margin(6, bottom);
    }

    &__tab {
        position: relative;

        &::before {
            background: currentColor;
            content: "—";
            height: 0.0625rem;
            left: -2rem;
            overflow: hidden;
            position: absolute;
            top: 0.75rem;
            width: 1.25rem;
        }

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

    // Add space between stacked content blocks
    &__content + &__content {
        @include helpers.ds_responsive-margin(3, top);
    }

    &.ds_tabs--links {
        // Change to dropdown menu when tabs are links and javascript is initialised
        .ds_tabs__navigation.js-initialised {
            // Dropdown menu
            @include helpers.ds_media-query(medium-down) {
                @include helpers.ds_responsive-margin(4, bottom);

                .ds_tabs {
                    &__toggle {
                        @include helpers.ds_link;
                        @include helpers.ds_link--block;
                        @include helpers.ds_high-contrast-button;

                        background-color: settings.$ds_colour__background--primary;
                        border: 0.125rem solid settings.$ds_colour__border--faint;
                        color: $tab__toggle-colour;
                        font-weight: settings.$bold;
                        margin: 0;
                        padding: 0.875rem 2.375rem 0.875rem 0.875rem;
                        text-align: left;
                        text-decoration: none;
                        width: 100%;

                        &:hover:not(:focus) {
                            color: $tab__toggle-colour--hover;
                        }

                        &::after {
                            @include helpers.ds_chevron(down, 0.75em);
                            border-width: 0 0 0.1875rem 0.1875rem;
                            position: absolute;
                            right: 1rem;
                            top: 1.0625rem;
                            transition: transform 0.2s;
                            pointer-events: none;
                        }

                        &:focus {
                            // focus state encompasses border
                            border: 0;
                            padding: 1rem 2.5rem 1rem 1rem;

                            &::after {
                                right: 1.125rem;
                                top: 1.1875rem;
                            }
                        }

                        // Hide menu after button
                        & + .ds_tabs__list {
                            display: none;
                        }

                        // Change button state and open menu
                        &[aria-expanded="true"] {

                            border-bottom: 0;
                            color: $tab__link-colour;
                            padding-bottom: 1rem; // increased to take up space from removed border

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

                            &:hover:not(:focus) {
                                background-color: settings.$ds_colour__blocklink-bg--hover;
                            }

                            &::after {
                                top: 1.4375rem;
                                transform: rotate(-225deg);
                            }

                            &:focus::after {
                                top: 1.5625rem;
                            }

                            & + .ds_tabs__list {
                                display: block;
                            }
                        }
                    }

                    &__list {
                        border: 0.125rem solid settings.$ds_colour__border--faint;
                        border-top: 0;
                        margin: 0;
                        padding: 0.5rem 0.375rem 0.375rem 0.375rem;
                        @include helpers.ds_root-size;
                    }

                    &__tab {
                        margin: 0 0 0.125rem 0;
                        padding: 0;

                        &::before {
                            display: none;
                        }

                        &-link {
                            @include helpers.ds_link;
                            @include helpers.ds_link--block;
                            padding: 0.6875rem 1rem; // 11px so 2px margin keeps to grid
                            text-decoration: none;
                        }

                        &.ds_current {
                            font-weight: settings.$normal;

                            .ds_tabs__tab-link:not(:focus) {
                                background-color: settings.$ds_colour__link--current__background;
                                border-left: 0.125rem solid settings.$ds_colour__brand;
                                color: $tab__link-colour--current;
                                padding-left: 0.875rem;
                            }

                        }
                    }

                    &__title {
                        display: none;
                    }

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

                }
            }
        }

        @include helpers.ds_media-query(medium) {
            .ds_tabs {
            // Hide toggle button when not needed
                &__toggle {
                    display: none;
                }

                // Hide current page label when not needed
                &__current {
                    display: none;
                }
            }
        }
    }

    // Change to tab layout when dynamic tabs initialised or when tabs are links
    &.js-initialised,
    &.ds_tabs--links {
        .ds_tabs {
            // Tabs format
            @include helpers.ds_media-query(medium) {
                &__list {
                    display: flex;
                    flex-wrap: wrap;
                    gap: $tab__gap;
                    margin: 0;
                    padding: 0;
                }

                &__tab-link {
                    @include helpers.ds_link--block($underline: true);
                    color: $tab__link-colour;
                    padding: $tab__padding--vertical $tab__padding--horizontal;
                }

                &__tab {
                    &::before {
                        display: none;
                    }

                    background-color: $tab__background-colour;
                    margin: 0;

                    &.ds_current {
                        background-color: $tab__background-colour--current;
                        font-weight: settings.$normal;
                        margin-bottom: -$tab__border-width !important;

                        .ds_tabs__tab-link {
                            border-top: $tab__border-width--current solid settings.$ds_colour__border--highlight;
                            border-left: $tab__border-width solid settings.$ds_colour__border;
                            border-right: $tab__border-width solid settings.$ds_colour__border;
                            border-bottom: 0;
                            color: $tab__link-colour--current;
                            padding: calc(#{$tab__padding--vertical} - #{$tab__border-width--current}) calc(#{$tab__padding--horizontal} - #{$tab__border-width}) calc(#{$tab__padding--vertical} + #{$tab__border-width});
                            text-decoration: none;

                            &:focus {
                                border: 0;
                                padding: $tab__padding--vertical $tab__padding--horizontal calc(#{$tab__padding--vertical} + #{$tab__border-width});
                            }
                        }
                    }

                    &:focus-within {
                        margin-bottom: -$tab__border-width !important;

                        .ds_tabs__tab-link {
                            padding: $tab__padding--vertical $tab__padding--horizontal calc(#{$tab__padding--vertical} + #{$tab__border-width}) ;
                        }
                    }

                }

                &__title {
                    @include helpers.ds_visually-hidden;
                }

                &__content {
                    border-top: $tab__border-width solid settings.$ds_colour__border;
                    margin: 0;
                    @include helpers.ds_responsive-padding(3, top, $tuning: -$tab__border-width);

                    &--bordered {
                        border: $tab__border-width solid settings.$ds_colour__border;
                        @include helpers.ds_responsive-padding(3, top, $tuning: -$tab__border-width);
                        @include helpers.ds_responsive-padding(2, right, $tuning: -$tab__border-width);
                        @include helpers.ds_responsive-padding(3, bottom, $tuning: -$tab__border-width);
                        @include helpers.ds_responsive-padding(2, left, $tuning: -$tab__border-width);
                        @include helpers.ds_last-child-no-margin;
                    }
                }

                // Hide content that is not in view
                &__content--hidden {
                    display: none;
                }
            }
        }
    }

    // Different behaviour when tab not interactive
    &.ds_tabs--links {
        // When tabs format
        @include helpers.ds_media-query(medium) {
            .ds_tabs__tab {
                &.ds_current {
                    .ds_tabs__tab-link {
                        &:hover {
                            background-color: inherit;
                            color: inherit;
                        }
                    }
                }
            }
        }
    }
}