// = Main Navbar
// ============================================================================
.o_main_navbar {
    .o_menu_toggle {
        @extend %-main-navbar-entry-base;
        @extend %-main-navbar-entry-spacing;
        color: $o-navbar-entry-color;

        rect, g {
            transform-origin: 0 50%;
        }

        // Define a local mixin to handle the toggle state
        // --------------------------------------------------------------------
        @mixin o_main_navbar_toggler_toggled() {
            rect {
                width: 6px;
                height: 3px;

                &:first-child {
                    transform: translate(12%,0);
                    rx: 1;
                }
            }

            #o_menu_toggle_row_0 {
                transform:  scale3d(.5, 1, 1) translate(0, 45%) skewY(-22deg);

                + g rect {
                    width: 0;
                    height: 0;
                }
            }

            #o_menu_toggle_row_2 {
                transform:  scale3d(.5, 1, 1) translate(0, -37%) skewY(22deg);
            }
        }

        &.o_menu_toggle_back {
            @include o_main_navbar_toggler_toggled();
            transform: scaleX(-1);
        }

        // Animate on large screen without 'reduced-motion' only.
        // --------------------------------------------------------------------
        @include media-breakpoint-up(lg) {
            @media screen and (prefers-reduced-motion: no-preference) {
                &:hover {
                    @include o_main_navbar_toggler_toggled();
                }

                &, g {
                    transition: all .3s;
                }

                rect {
                    transition: all .1s;
                }
            }
        }
    }
}