/*------------------------------------*\
    SIDE NAVIGATION
\*------------------------------------*/

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

// modifiable vars
$side-nav__expand-colour: settings.$ds_colour__brand !default;

// fixed vars
$side-nav__border-width: 0.0625rem; // 1px
$side-nav__outline-width: 0.125rem; // 2px


.ds_side-navigation {
    border: $side-nav__border-width solid settings.$ds_colour__border;
    position: relative;
    @include helpers.ds_block-margins;
    @include helpers.ds_small-size;


    /// [1] Allowance for 1px border on all sides of parent container
    &__expand {
        @include helpers.ds_link;
        @include helpers.ds_link--block;
        @include helpers.ds_high-contrast-button;

        background-color: settings.$ds_colour__background--primary;
        color: $side-nav__expand-colour;
        cursor: pointer;
        font-weight: settings.$bold;
        line-height: inherit;
        margin: 0;
        padding: #{1rem - $side-nav__border-width} #{3rem - $side-nav__border-width} #{1rem - $side-nav__border-width} #{1rem - $side-nav__border-width}; /// [1]
        position: sticky;
        text-align: left;
        text-decoration: none;
        top: 0;
        transition: background-color settings.$transition-in-time, box-shadow settings.$transition-in-time;
        width: 100%;
        z-index: 2;

        &--shadow {
            box-shadow: 0 0.3125rem 0.3125rem rgba(0,0,0,0.15);
        }

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

        &:hover .side-navigation__expand-indicator {
            color: settings.$ds_colour__link--hover;
        }

        &--shadow:focus {
            box-shadow: 0 round(helpers.$focus__shadow-width, 1px) settings.$ds_colour__link--focus__shadow, 0 0.5rem 0.3125rem rgba(0,0,0,0.15);
        }
    }

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

    #show-side-navigation {
        @include helpers.ds_visually-hidden;
    }

    #show-side-navigation:focus ~ .ds_side-navigation__expand {
        @include helpers.ds_focus;
    }

    #show-side-navigation:checked ~ .ds_side-navigation__expand .ds_side-navigation__expand-indicator {
        top: 1.4375rem;
        transform: rotate(-225deg);
    }

    #show-side-navigation:checked ~ .ds_side-navigation__expand:not(:focus):not(:hover) {
        background-color: settings.$ds_colour__link--current__background;
        color: settings.$ds_colour__link--current;
    }

    #show-side-navigation:checked ~ &__list,
    #show-side-navigation:checked ~ &__list &__list {
        display: block;
    }

    &__list {
        display: none;
        list-style-type: none;
        margin: 0.5rem 1rem;
        overflow: hidden;

        &:focus-within {
            overflow: visible;
        }
    }

    &__list &__list {
        margin: 0 0 0 1rem;
    }

    &__item {
        position: relative;
        margin-bottom: 0;

        &--disabled {
            text-decoration: line-through;
        }
    }

    /// [2] vertical padding offsets the text slightly for visual balance
    &__link {
        @include helpers.ds_link--block;

        margin-bottom: 0.125rem;
        padding: 0.75rem 2.5rem 0.625rem 1rem; /// [2]



        &:not([href]) {
            pointer-events: none;
        }

        &:hover,
        &.ds_current {
            position: relative;

            &::before {
                border-left: $side-nav__outline-width solid settings.$ds_colour__border--highlight;
                bottom: 0;
                content: '';
                position: absolute;
                left: 0;
                top: 0;
            }
        }

        &:focus {
            z-index: 2;
        }

        &:focus::before {
            content: none;
        }

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

            &:hover {
                background-color: settings.$ds_colour__link--current__background;
            }
        }

        &--inactive {
            pointer-events: none;
            background-color: settings.$ds_colour__link--disabled__background;
        }
    }
}

@include helpers.ds_media-query(medium-down) {
    .js-initialised #show-side-navigation {
        display: none;
    }
}

@include helpers.ds_media-query(medium) {
    .ds_side-navigation {
        border-width: 0;
        line-height: 1.5rem;

        &__expand {
            display: none;
        }

        &__list {
            display: block !important;
            margin: 0;
        }

        #show-side-navigation {
            display: none;
        }
    }
}