@mixin menuMobile {
    padding: 0 1rem;

    > li {
        display: block;
        padding: 1rem;

        a {
            display: block;
        }
    }
}

@mixin menuDesktop($right: false) {
    padding: .75rem;

    > li {
        display: inline-block;

        @if $right {
            color: white;

            > a {
                &:hover {
                    color: var(--background);

                    svg {
                        fill: var(--background);
                    }
                }
            }
        }

        &:not(:last-child) {
            padding-right: 1rem;
        }
    }
}