.Navigation {
    position: fixed;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 5000;
    width: 100vw;
    height: 100dvh;
    right: 0;
    top: 0;
    transition: 150ms ease-in-out;
    pointer-events: none;

    &.open {
        pointer-events: all;
        background: rgba(0, 0, 0, .5);

        & nav {
            translate: -1rem 0;
        }
    }

    nav {
        background: var(--color-lightest);
        align-items: end;
        box-shadow: var(--box-shadow-z2);
        padding: var(--padding-default);
        height: calc(100% - var(--padding-xxl));
        width: 70%;
        translate: 100% 0;
        transition: 150ms ease-in-out;
        border-radius: var(--radius-default);
    }

    & button {
        justify-self: flex-end;
        font-size: var(--font-size-xl);
    }

    & ul {
        width: 100%;
        align-items: flex-start;
        font-size: var(--font-size-l);
        gap: var(--padding-default);

        & li {
            list-style: none;
            width: 100%;

            & a {
                text-decoration: none;
                display: flex;
                align-items: center;
                gap: var(--padding-default);
                color: var(--color-middle);
                border-radius: var(--radius-default);
                padding: var(--padding-xs) var(--padding-s);
                transition: var(--transition-default);
                background: transparent;
                cursor: pointer;

                &.active {
                    background: var(--color-main-light);
                    color: var(--color-main-dark);
                }
            }
        }
    }
}