.drawer-toggles {
    .drawer-toggler {
        z-index: #{$zindex-fixed - 10};

        @include media-breakpoint-up(md) {
            top: calc(#{$navbar-height * 2} + 0.7rem);
        }

        @include media-breakpoint-up(xlg) {
            top: calc(#{$navbar-height} + 0.7rem);
        }

        .btn.icon-no-margin {
            border-radius: $border-radius;
            padding: 16px;
            background-color: $btn-secondary-bg;
            color: $text-on-secondary;
            box-shadow: $box-shadow-sm;
            transition: padding 200ms, background-color 150ms ease-in-out, border-color 150ms ease-in-out;
            width: auto;
            height: auto;
            margin: 0;

            &:hover,
            &:focus {
                background-color: $btn-secondary-hover-bg;
                border-color: $btn-secondary-hover-border;
                color: $text-on-secondary;
            }
        }

        .no-left-nav & {
            top: calc(#{$navbar-height * 2} + 0.7rem);
        }
    }

    .drawer-left-toggle {
        @include media-breakpoint-up(xlg) {
            left: 286px;

            .no-left-nav & {
                left: 0;
            }
        }

        .btn {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;

            &:hover,
            &:focus {
                padding-left: 28px;
            }
        }
    }

    .drawer-right-toggle {
        margin: 0;

        .btn.icon-no-margin {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            padding-right: 10px;
            padding-left: 14px;

            &:hover {
                padding-right: 20px;
            }
        }
    }
}

#page {
    &.drawers {
        padding-left: .5rem;
        padding-right: .5rem;

        @include media-breakpoint-up(xlg) {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        @include media-breakpoint-up(xl) {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }

        &.show-drawer-left {
            @include media-breakpoint-up(xlg) {
                margin-left: calc(#{$navbar-width} + #{$drawer-left-width});

                .no-left-nav & {
                    margin-left: $drawer-left-width;
                }
            }

            @include media-breakpoint-up(xl) {
                padding-left: 1.5rem;
            }
        }

        &.show-drawer-right {
            margin-right: 0;

            .no-left-nav & {
                @include media-breakpoint-up(lg) {
                    margin-right: $drawer-right-width;
                }
            }

            @include media-breakpoint-up(xlg) {
                margin-left: $navbar-width;

                .no-left-nav & {
                    margin-left: 0;
                }
            }

            @include media-breakpoint-up(xl) {
                margin-right: $drawer-right-width;
                padding-right: 1.5rem;
            }
        }

        #region-main {
            > .notifications {
                padding-left: 15px;
                padding-right: 15px;
            }
        }

        &.hasstickyfooter {
            padding-bottom: $stickyfooter-height;
        }
    }
}

.secondary-nav-helper {
    ~ #page,
    ~ #page.drawers {
        margin-top: #{$navbar-height * 2};

        @include media-breakpoint-up(xlg) {
            margin-top: $navbar-height;
        }

        .no-left-nav & {
            margin-top: #{$navbar-height * 2};
        }
    }

    ~ .drawer-left,
    ~ .drawer-right {
        top: #{$navbar-height * 2};
        height: calc(100vh - #{$navbar-height * 2});

        @include media-breakpoint-up(xlg) {
            top: $navbar-height;
            height: calc(100vh - #{$navbar-height});

            .no-left-nav & {
                top: #{$navbar-height * 2};
                height: calc(100vh - #{$navbar-height * 2});
            }
        }

        &.drawer-primary {
            .no-left-nav & {
                top: 0;
                height: 100dvh;
            }
        }
    }
}
