:where(.main-nav) {
    .nav-container {
        :focus-visible {
            outline: 0.2rem solid var(--color-primary-white);
            outline-offset: 0.2rem;
        }

        /* Back button */

        .back-button {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            background: none;
            border: none;
            position: absolute;
            left: calc(var(--nav-panel-width) * 1.1);
            top: 2rem;
            color: var(--color-primary-white);
            z-index: 2;
            transition: left 250ms ease-in-out;
            padding: 0;

            > svg {
                margin-right: 3rem;
            }

            &.inactive {
                display: none !important;
            }
        }

        &[data-current-nav-index="2"] .back-button {
            left: calc(var(--nav-panel-width) * 2.1);
        }

        @media (max-width: 1024px) {
            .back-button {
                left: unset !important;
                right: 4rem !important;
            }
        }

        /* Close button */

        .close-button {
            position: absolute;
            top: 1rem;
            left: 1.4rem;
            background: none;
            border: none;
            padding: 0;
            color: white;
            align-items: center;
            cursor: pointer;
            z-index: 2;
            display: flex;
            flex-flow: row nowrap;
            gap: 1rem;
            font-size: 1rem;
            letter-spacing: 0.25em;
            font-weight: 700;
        }

        /* Arrow button */

        .arrow {
            color: var(--color-primary-white);
            cursor: pointer;
            min-width: 8rem;
            padding: 0;
            height: 100%;
            border: none;
            background: none;
        }
    }
}