nav.pane .quick_links {
    --item-padding: 0.25rem;

    justify-content: space-between;

    a {
        background-color: var(--background-2);

        transition: var(--transition-fade);

        ion-icon {
            width: var(--item-size);
        }
    }

    a:hover {
        transition: var(--transition-cut);
        transform: var(--transform-scale-x) var(--transform-scale-y);
    }

    .phantom {
        width: calc(var(--item-size) + calc(var(--item-padding) * 2));

        // Fake hiding the element.
        //
        // Due to how flexboxes function, settings `display: none`
        // will result in the box just scaling as if the element
        // never existed.
        //
        // phantom needs to sit beside a element in hierarchy,
        // otherwise phantom will inherit from <a> like this:
        //
        // .pane_nav > .quick_links > a > .phantom
        background-color: inherit;
    }
}

@media (max-width: 600px) {
    nav.pane .quick_links {
        margin-bottom: var(--spacing-small);

        --item-padding: var(--padding-mobile);

        > a {
            background-color: var(--background-1);
        }

        > .phantom {
            background-color: inherit;
        }
    }
}