@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* Definicje zmiennych CSS */
:root {
    --primary-color: #2c3e50;
    --secondary-color: #ecf0f1;
    --accent-color: #3498db;
    --text-color: #34495e;
    --border-radius: 8px;
    --transition-speed: 0.3s;
}

/* Stylizacja przycisku przełączania warstw w Leaflet z dodatkiem layers tree */
.leaflet-control-layers-toggle.leaflet-layerstree-named-toggle {
    margin: 2px 5px;
    width: auto;
    height: auto;
    background-image: none;
    background-color: var(--accent-color);
    color: var(--secondary-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color var(--transition-speed);
}

.leaflet-control-layers-toggle.leaflet-layerstree-named-toggle:hover {
    background-color: var(--primary-color);
}

/* Lista warstw w kontrolce Leaflet */
.leaflet-control-layers-list{
    font: 11px / 1.7 "Ubuntu", Arial, Helvetica, sans-serif;
    color: var(--text-color);
}

/* Stylizacja wejścia w nagłówku drzewa warstw */
.leaflet-layerstree-header input{
    margin-left: 0px;
}

/* Stylizacja wskaźnika w nagłówku drzewa warstw */
.leaflet-layerstree-header-pointer {
    cursor: pointer;
}

/* Stylizacja etykiety w nagłówku drzewa warstw */
.leaflet-layerstree-header label {
    display: inline-block;
    cursor: pointer;
    transition: color var(--transition-speed);
}

.leaflet-layerstree-header label:hover {
    color: var(--accent-color);
}

/* Nazwa nagłówka drzewa warstw */
.leaflet-layerstree-header-name {
    padding-left: 2px;
}

/* Stylizacja dzieci drzewa warstw */
.leaflet-layerstree-children {
    padding-left: 20px;
    border-left: 1px solid var(--secondary-color);
}

/* Stylizacja dzieci drzewa warstw bez wewnętrznego odstępu */
.leaflet-layerstree-children-nopad {
    padding-left: 0px;
}

/* Ukrywanie elementów drzewa warstw */
.leaflet-layerstree-hide {
    display: none;
}

/* Elementy drzewa warstw, które nigdy się nie pokazują */
.leaflet-layerstree-nevershow {
    display: none;
}

/* Stylizacja elementu do rozszerzania/zamykania drzewa warstw */
.leaflet-layerstree-expand-collapse {
    cursor: pointer;
    transition: transform var(--transition-speed);
}

.leaflet-layerstree-expand-collapse:hover {
    transform: rotate(90deg);
}