/*
    SITE NAVIGATION
    containing site-navigation and mobile equivalent
*/

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

// modifiable vars
$site-navigation__mobile-menu-background: settings.$ds_colour__background--secondary !default;
$site-navigation__highlight-colour: settings.$ds_colour__border--highlight !default;

// common to both mobile and desktop
$site-navigation__link-padding: 1rem;

$site-navigation__link-underline-thickness: calc(4em/19);

.ds_site-navigation {
    display: none;
    @include helpers.ds_small-size;

    &__toggle {
        display: none;
    }

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

    &__item {
        margin-bottom: 0;
    }

    &__link {
        color: currentColor;
        display: block;
        padding: #{$site-navigation__link-padding * 0.75} $site-navigation__link-padding;
        text-decoration: none;
        white-space: nowrap;

        &:focus {
            position: relative;
            z-index: 1;
        }
    }
}

// small screens
@include helpers.ds_media-query(medium-down) {
    .ds_site-navigation {
        background-color: $site-navigation__mobile-menu-background;
        margin: 0 -1rem;

        &--mobile {
            overflow: hidden;
        }

        &__list {
            padding: 1rem;
        }

        &__item:not(:last-child) {
            border-bottom: 0.0625rem solid settings.$ds_colour__border;
        }

        &__link {
            padding-bottom: $site-navigation__link-padding;
            padding-top: $site-navigation__link-padding;

            &:hover:not(:focus),
            &.ds_current {
                $site-navigation__mobile-border-width: 0.25rem;
                border-left: $site-navigation__mobile-border-width solid settings.$ds_colour__brand;
                padding-left: #{$site-navigation__link-padding - $site-navigation__mobile-border-width};
            }
        }
    }

    .ds_site-navigation__toggle:checked ~ .ds_site-navigation,
    .ds_site-navigation--open {
        border-top: 0.0625rem solid settings.$ds_colour__border--faint;
        display: block;
    }
}

@include helpers.ds_media-query(medium) {
    .ds_site-navigation {
        line-height: 1.5;

        &:not(&--mobile) {
            display: block;
        }

        &__item {
            display: inline-block;
        }

        &__list {
            display: flex;
            flex-wrap: wrap;
            margin: 0 0 0 -1rem;
        }

        .ds_site-navigation__link {
            @include helpers.ds_fancy-underscore($width: $site-navigation__link-underline-thickness, $horiz-padding: $site-navigation__link-padding);

            &::after {
                bottom: 0;
            }

            &.ds_current:not(:focus) {
                color: settings.$ds_colour__text;

                &:after {
                    background-color: settings.$ds_colour__link;
                    border-bottom: $site-navigation__link-underline-thickness solid transparent;
                    left: $site-navigation__link-padding;
                    opacity: 1;
                    right: $site-navigation__link-padding;
                }
            }
        }

        a.ds_site-navigation__link {
            &:focus {
                box-shadow: inset 0 round(#{helpers.$focus__shadow-width * -1}, 1px) settings.$ds_colour__link--focus__shadow;
                filter: none;
                outline: none;
            }
        }
    }
}