main
{
    nav.side
    {
        border-bottom: 1px solid $color-border-normal;
        margin: steps(4) 0 -1px;

        a
        {
            @include baseline-box(16px, steps(2.5), 0.9px, steps(1), steps(0.5));
            @include icon("chevron-right", $color-text-normal);

            display: block;
            position: relative;
            padding: 12px steps(5) 12px steps(1.5);
            border-top: 1px solid $color-border-normal;
            margin-top: -1px;

            color: $color-text-darker;
            text-decoration: none;

            &:hover,
            &:focus
            {
                color: $color-brand-normal;
            }

            &::before
            {
                position: absolute;
                right: 0;
                margin-top: 0;
                transform: rotate(90deg);
            }
        }

        li.active a
        {
            color: $color-brand-normal;
        }

        @include for-at-least-normal-tablets
        {
            margin: 0 0 -1px;

            a
            {
                @include baseline-box(16px, steps(3), 0.5px, 12px, 12px);

                &:hover,
                &:focus
                {
                    color: $color-text-darker;
                    background: $color-background-lighter;
                }
            }
        }

        @include for-desktops
        {
            margin: steps(1) 0 (steps(8) - 1px);
        }
    }

    nav.breadcrumb
    {
        ol
        {
            @include inline-list;
        }

        li
        {
            &::after
            {
                content: svg-image-data-url("chevron-right", $color-text-normal);

                display: inline-block;
                margin: 0 13px;

                vertical-align: bottom;
            }

            &:last-child::after
            {
                content: none;
            }
        }

        a
        {
            @include baseline-box(14px, steps(3), 0.6px);

            color: $color-text-darker;
            text-decoration: none;

            &:hover,
            &:focus
            {
                color: $color-link-normal;
            }
        }

        .active > a
        {
            color: $color-link-normal;
        }

        @include for-at-most-small-tablets
        {
            display: none;

            + h1
            {
                margin-top: 0;
            }
        }

        @include for-at-least-normal-tablets
        {
            margin-bottom: steps(6);
        }
    }
}
