/*
===============================================================
Plik: menu_left_mobile.css
===============================================================
*/

/* ======================================================
   Klasa kontenerowa dla lewego menu
   ====================================================== */
.MenuLeweKontener {
	top: 0px;
	width: 100%;						/* Szerokość na cały kontener */
	height: auto;						
	padding: 0px 0px;
	margin: 0px 0px;
	position: relative; 				/* NIE fixed! Przewijanie razem ze stroną */
	display: flex;						/* flex, bo divy jeden pod drugim */
	flex-direction: column;
	overflow-wrap: break-word; 			/* Zawijanie tekstu w liściach */
	align-items: flex-start;
	overflow: visible;					/* NIE ukrywamy niczego w mobilkach */
	background-color: #101010;
	z-index: 1000;
	border: 0px solid purple;
}

/* =========================================
   WYŚWIETLA TYTUŁ KATEGORII LUB TYTUŁ POSTA
   ========================================= */
.MenuLeweNaglowek {
	width: 100%;
	height: 45px;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px 0px;
	border-bottom: 1px solid #353535;
    border: 0px solid purple;
	padding: 7px;
	font-size: 16px;
	background-color: #252525;
}

/* =========================================
   WYŚWIETLA TYTUŁY POSTÓW W JEDNEJ KATEGORII LUB TYTUŁY AKAPITÓW DLA JEDNEGO POSTA
   ========================================= */
.MenuLeweLista {
    width: 100%;
	max-height: 315px; 			/* Maksymalna wysokość menu do przewijania */
	padding: 5px;
    padding-top: 5px;
	padding-bottom: 0px;
    margin: 0px 0px; 
	flex-grow: 1;    
	overflow-y: auto;			 /* Przewijanie w pionie, jeśli zawartość przekroczy max-height */
    overflow-x: hidden; 		/* Ukrywa poziome przewijanie */
    scrollbar-color: red black; /* Kolor paska przewijania */
	scrollbar-width: thin; 		/* Zmniejsza szerokość paska przewijania */
	word-wrap: break-word;
	white-space: normal;
	direction: ltr;			 	/* Pasek przewijania wraca na prawo */
	background-color: #151515;
	border: 0px solid yellow;
}

.MenuLeweLista::-webkit-scrollbar {
    width: 10px; /* Ustaw szerokość na 10px lub dowolną inną wartość */
}

.MenuLeweLista::-webkit-scrollbar-thumb {
    background-color: red; /* Kolor paska przewijania */
}
.MenuLeweLista::-webkit-scrollbar-track {
    background-color: black; /* Kolor tła paska przewijania */
}

.ulMenuLewe {
	list-style-type: none;
	margin-top: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 5px;
}

/* =========================================
   [1] WSPÓLNE DLA WSZYSTKICH
   ========================================= */
.liMenuLeweTytuly,
.liMenuLeweAkapit,
.liMenuLewePodAkapit,
.liMenuLeweKomentarze {
	list-style-type: none;
	border: 1px solid transparent;
	border-radius: 5px;
	color: #b38b5c;
}
/* =========================================
   [2] ROZBICIE NA INDYWIDUALNE - padding, margin, line-height
   ========================================= */

/* ===== TYTUŁY ===== */
.liMenuLeweTytuly {
	line-height: 23px;
	margin-left: 8px;
	margin-bottom: 3px;
	padding-left: 6px;
}
/* ===== AKAPITY ===== */
.liMenuLeweAkapit,
.liMenuLeweKomentarze {
	line-height: 17px;
	margin-left: 5px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
}
/* ===== PODAKAPITY ===== */
.liMenuLewePodAkapit {
	line-height: 16px;
	margin-left: 5px;
	margin-top: 2px;
	margin-bottom: 3px;
	margin-right: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 15px;
}
/* =========================================
   [3] STYLIZACJE DLA :hover oraz :active
   ========================================= */
.liMenuLeweTytuly:hover,
.liMenuLeweAkapit:hover,
.liMenuLewePodAkapit:hover,
.liMenuLeweKomentarze:hover,
.liMenuLeweTytuly:active,
.liMenuLeweAkapit:active,
.liMenuLewePodAkapit:active,
.liMenuLeweKomentarze:active {
	border: 1px solid grey;
	background-color: #202020;
	color: #edc18f;
}