.dwp-side-navigation {

    margin-bottom: govuk-spacing(2);


    @include govuk-media-query($until: tablet) {
        max-width: 220px;
    }

    &__button {
        display: none;

        @include govuk-font($size: 19);

        margin-bottom: govuk-spacing(2);
        padding: govuk-spacing(1) 2px govuk-spacing(1) 0;

        border-width: 0;

        color: govuk-functional-colour(link);
        background: none;

        cursor: pointer;
        -webkit-appearance: none;

        @include govuk-media-query($until: tablet) {
            padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 0;
        }

        &:hover {
            color: govuk-colour("black");
            background: govuk-colour("black", $variant: "tint-95");

            .dwp-side-navigation__chevron {
                color: govuk-colour("black");
                background: govuk-colour("black");

                &::after {
                    color: govuk-colour("black", $variant: "tint-95");
                }
            }
        }

        &:focus {
            @include govuk-focused-text;

            .dwp-side-navigation__chevron {
                color: govuk-colour("black");
                background: govuk-colour("black");

                &::after {
                    color: govuk-functional-colour(focus);
                }
            }
        }
    }

    &__section-toggle-text {
        margin-left: govuk-spacing(2);
        vertical-align: middle;
    }

    &__chevron {
        box-sizing: border-box;
        display: inline-block;

        position: relative;

        width: govuk-px-to-rem(20px);
        height: govuk-px-to-rem(20px);

        border: govuk-px-to-rem(1px) solid;
        border-radius: 50%;

        vertical-align: middle;

        &--down {
            transform: rotate(180deg);
        }

        &::after {
            content: "";
            box-sizing: border-box;
            display: block;

            position: absolute;
            bottom: govuk-px-to-rem(5px);
            left: govuk-px-to-rem(6px);

            width: govuk-px-to-rem(6px);
            height: govuk-px-to-rem(6px);

            transform: rotate(-45deg);

            border-top: govuk-px-to-rem(2px) solid;
            border-right: govuk-px-to-rem(2px) solid;
        }
    }

    &__list {
        @include govuk-font($size: 19);
        margin-top: 0;
        @include govuk-responsive-margin(4, "bottom");
        padding-left: 0;
        list-style-type: none;

        > li {
            margin-bottom: govuk-spacing(1);
        }

        &--sub-item {
            margin-top: govuk-spacing(1);
        }
    }

    &__item {
        box-sizing: border-box;
        padding: govuk-spacing(1) 0 0;

        @include govuk-media-query($until: tablet) {
            padding: 0;
        }

        &--selected {
            margin: govuk-spacing(2) 0 govuk-spacing(1) -14px;
            padding: govuk-spacing(1) 0 govuk-spacing(1) govuk-spacing(2);
            border-left: 4px solid govuk-functional-colour(link);
            background-color: govuk-colour("black", $variant: "tint-95");

            @include govuk-media-query($until: tablet) {
                margin-left: 0;
                padding: govuk-spacing(0) 0 govuk-spacing(0) govuk-spacing(2);
            }
        }

        :last-child {
            margin-bottom: 0;
        }

    }

    &__link {

        font-size: 16px;
        text-decoration: none;

        @extend %govuk-link;
        @include govuk-link-style-no-visited-state;

        @include govuk-media-query($until: tablet) {
            display: inline-block;
            padding: (govuk-spacing(2) - 1) 0;
        }

        &--selected {
            font-weight: bold;
        }
    }

    &__sub-item {
        box-sizing: border-box;
        padding: govuk-spacing(1) 0 0;


        @include govuk-media-query($until: tablet) {
            padding: 0;
        }

        &::before {

            content: "—";
            color: govuk-colour("black", $variant: "tint-25");
            font-size: 16px;
            font-weight: 700;
        }

        &:last-child {
            padding-bottom: govuk-spacing(1);
        }
    }
}

.govuk-frontend-supported {
    .dwp-side-navigation {
        &__button {
            @include govuk-media-query($until: tablet) {
                display: block;
            }
        }

        &--mobile {
            @include govuk-media-query($until: tablet) {
                display: none;
            }
        }
    }
}