@import '_theme.scss';

.categories-sidebar{
	display: flex;
	flex-direction: column;
	margin-right: 0px;
	width: 100%;
	order: 1;
	background: #ffffff;

	&.top{
		height:100%;
		top: 0px;
		position: absolute;
		z-index:4;	/* for firefox */
	}

	.back-block {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 15px 10px;
		height: 60px;
		border-bottom: 1px solid var(--color-line);
		background-color: var(--submenu-background-color);
		color: var(--text-color-submenu);


		.back-icon-container {
			cursor: pointer;
			padding: 5px 10px;

			.back-icon {
				stroke: var(--text-color-submenu);
			}
		}

		.main-title {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 90%;
			font-size: var(--text-size-regular);
		}
	}

	.category-title {
		white-space: nowrap;
		cursor: pointer;
		padding: 13px 20px 10px 20px;
		margin: 0px;
		width: 100%;
		height: 40px;

		.category-name{
			color: inherit;
			font-size: var(--text-size-fineprint);
			text-decoration: none;

			&:hover{
				text-decoration: none;
			}
		}

		&:hover{
			background-color: var(--color-fill);
		}
	}
}
