.MainNavToggle {
    position: absolute;
    right: 0; // always position the toggle on the right edge of the main nav
    z-index: 99999;
    margin-top: 24px;
    transform: translate(
        50%
    ); // move the toggle 50% of its width to the right, so it is centered on the edge of the main nav

    background: var(--midnight-950);
    border-radius: 50%;
    opacity: 0;

    &-button {
        border: none;
        background: none;
        padding: 0;
        margin: 0;
        appearance: none;

        .GlyphIcon {
            transform: rotate(180deg);
            transform-origin: center;
            transition: transform var(--sidebar-opened-duration) var(--collapsible-easing);

            path {
                fill: var(--midnight-100);
            }
        }

        &:focus-visible {
            outline-style: solid;
            outline-width: 4px;
            border-radius: 50%;
            outline-color: var(--midnight-300);

            &:active {
                outline-color: var(--midnight-400);
            }
        }
    }

    &.collapsed {
        .GlyphIcon {
            transform: rotate(0deg);
        }
    }

    &:hover {
        background-color: var(--midnight-850);
    }
}