@import "@Themes/constants.scss";
.root {
	width: 336px;
	height: 100%;
	max-height: 100%;

	border-radius: var(--navigation-radius, 0px);
	background: var(--navigation-button-background-default, #f7f8f8);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;

	@media (max-width: $screen-m) {
		gap: 16px;
		padding: var(--spacing-lg, 24px);
		width: auto;
	}
	.block-list {
		overflow-y: auto;
		::-webkit-scrollbar {
			display: none;
		}
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */

		@media (max-width: $screen-m) {
			display: none;
		}
	}

	.responsive-dropdown {
		display: none;

		@media (max-width: $screen-m) {
			display: block;
		}
	}

	.searchbar {
		padding: var(--spacing-md, 16px);
		@media (max-width: $screen-m) {
			padding: 0px;
			display: flex;
			gap: var(--spacing-md, 16px);
		}

		> label {
			flex: 1;
		}

		.responsive-button-container {
			display: none;

			@media (max-width: $screen-m) {
				display: block;
				flex: 1;
			}

			@media (max-width: $screen-s) {
				display: none;
			}
		}
	}

	.bottom-container {
		margin-top: auto;

		@media (max-width: $screen-m) {
			display: none;
		}

		@media (max-width: $screen-s) {
			display: block;
		}
	}
}