@import 'constants';
@import 'styling';

.sidebar-layout {
	@include sidebar-base;

	.sb-top-navbar {
		@include sb-top-navbar-base;
	}

	.sb-side-navbar {
		@include sb-side-navbar-base;

		.sb-side-sticky-region {
			background: $sb-side-navbar-color;
			position: sticky;
			top: 0;
			font-size: $sb-side-sticky-region-font-size;
			padding: $sb-side-sticky-content-padding;
			z-index: 5;

            +.sb-side-scroll-region {
                padding-top: $sb-sticky-scroll-offset-padding;
            }
		}

		.sb-side-scroll-region {
			position: relative;
			overflow-y: auto;
			padding: $sb-side-scroll-content-padding;
		}
	}

	.sb-main-content {
		@include sb-main-content-base;
	}

	.sb-main-overlay {
		@include sb-main-overlay;
	}

	.sb-side-navbar-toggle {
		@include sb-side-navbar-toggle;
	}

	// Responsive Helpers
	@media screen and (min-width: $desktop) {
		.sb-top-navbar {
			display: none;
		}
		.sb-side-navbar {
			flex: 0 0 auto;
			position: fixed;
			transform: none;
		}
		.sb-main-content {
			padding-left: $sb-side-navbar-width;
		}
		.sb-side-navbar-toggle {
			display: none;
		}
	}
}

.sb-menu-icon {
	@include sidebar-menu-icon-base;
}