@igo2/core 18.0.0-next.9 → 18.0.0

package/theming/prebuilt-themes/bluedq-theme.css

@@ -2672,6 +2672,16 @@ igo-directions-results mat-list-item.igo-steps:hover {
   background-color: #b4e5fb;
 }
 
+igo-directions-inputs .prefix-actions {
+  --mat-icon-button-touch-target-display: none;
+}
+igo-directions-inputs .prefix-actions .mat-mdc-icon-button.mat-mdc-button-base {
+  --mdc-icon-button-state-layer-size: 28px;
+  width: var(--mdc-icon-button-state-layer-size);
+  height: var(--mdc-icon-button-state-layer-size);
+  padding: 2px;
+}
+
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-shorcuts .igo-map-tooltip,
@@ -2745,6 +2755,14 @@ igo-layer-legend img:after {
   border-top-color: #095797;
 }
 
+igo-layer-legend {
+  --mat-form-field-container-height: 44px;
+  --mat-form-field-filled-label-display: none;
+  --mat-form-field-container-vertical-padding: 10px;
+  --mat-form-field-filled-with-label-container-padding-top: 10px;
+  --mat-form-field-filled-with-label-container-padding-bottom: 10px;
+}
+
 igo-layer-list-tool mat-form-field .mat-mdc-text-field-wrapper,
 igo-layer-list-tool mat-form-field .mat-mdc-form-field-focus-overlay {
   background-color: white !important;
@@ -2765,20 +2783,62 @@ igo-layer-list-tool .mat-mdc-icon-button.mat-mdc-button-base {
   padding: 8px;
 }
 
-igo-layer-item.igo-layer-item-focused > mat-list-item {
-  background-color: #b4e5fb;
-  color: white;
+igo-layer-item {
+  background-color: white;
 }
 igo-layer-item button.mat-default mat-icon {
   color: black;
 }
-igo-layer-item button mat-icon.disabled {
+igo-layer-item button.disabled mat-icon {
   color: rgba(0, 0, 0, 0.38);
 }
 igo-layer-item .unavailable-layer {
   background-color: #eeeeee;
 }
 
+igo-layer-group {
+  background-color: white;
+}
+igo-layer-group button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-group button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+igo-layer-list mat-tree-node.--selected igo-layer-group,
+igo-layer-list mat-tree-node.--selected igo-layer-item, igo-layer-list mat-tree-node.--dragged igo-layer-group,
+igo-layer-list mat-tree-node.--dragged igo-layer-item {
+  background-color: #b4e5fb;
+  color: black;
+}
+igo-layer-list mat-tree-node.--children-selected igo-layer-group,
+igo-layer-list mat-tree-node.--children-selected igo-layer-item {
+  background-color: rgb(218.7341772152, 242.4278481013, 253.0658227848);
+  color: black;
+}
+igo-layer-list mat-tree-node.--drag-hover::after {
+  border-color: #0d81df !important;
+}
+igo-layer-list mat-tree:not(.--dragging) mat-tree-node:hover::after {
+  border-color: #0d81df;
+}
+
+igo-layer-unavailable .unavailable-layer {
+  background-color: #eeeeee;
+}
+
+igo-layer-viewer .active-background {
+  background-color: #e1f5fd;
+}
+
+igo-layer-visibility-button button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-visibility-button button.out-of-range mat-icon, igo-layer-visibility-button button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+
 igo-map-browser div.ol-attribution > button {
   color: #095797;
   background-color: white;

package/theming/prebuilt-themes/bluegrey-theme.css

@@ -2672,6 +2672,16 @@ igo-directions-results mat-list-item.igo-steps:hover {
   background-color: #ff80ab;
 }
 
+igo-directions-inputs .prefix-actions {
+  --mat-icon-button-touch-target-display: none;
+}
+igo-directions-inputs .prefix-actions .mat-mdc-icon-button.mat-mdc-button-base {
+  --mdc-icon-button-state-layer-size: 28px;
+  width: var(--mdc-icon-button-state-layer-size);
+  height: var(--mdc-icon-button-state-layer-size);
+  padding: 2px;
+}
+
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-shorcuts .igo-map-tooltip,
@@ -2745,6 +2755,14 @@ igo-layer-legend img:after {
   border-top-color: #607d8b;
 }
 
+igo-layer-legend {
+  --mat-form-field-container-height: 44px;
+  --mat-form-field-filled-label-display: none;
+  --mat-form-field-container-vertical-padding: 10px;
+  --mat-form-field-filled-with-label-container-padding-top: 10px;
+  --mat-form-field-filled-with-label-container-padding-bottom: 10px;
+}
+
 igo-layer-list-tool mat-form-field .mat-mdc-text-field-wrapper,
 igo-layer-list-tool mat-form-field .mat-mdc-form-field-focus-overlay {
   background-color: white !important;
@@ -2765,20 +2783,62 @@ igo-layer-list-tool .mat-mdc-icon-button.mat-mdc-button-base {
   padding: 8px;
 }
 
-igo-layer-item.igo-layer-item-focused > mat-list-item {
-  background-color: #ff80ab;
-  color: white;
+igo-layer-item {
+  background-color: white;
 }
 igo-layer-item button.mat-default mat-icon {
   color: black;
 }
-igo-layer-item button mat-icon.disabled {
+igo-layer-item button.disabled mat-icon {
   color: rgba(0, 0, 0, 0.38);
 }
 igo-layer-item .unavailable-layer {
   background-color: #eeeeee;
 }
 
+igo-layer-group {
+  background-color: white;
+}
+igo-layer-group button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-group button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+igo-layer-list mat-tree-node.--selected igo-layer-group,
+igo-layer-list mat-tree-node.--selected igo-layer-item, igo-layer-list mat-tree-node.--dragged igo-layer-group,
+igo-layer-list mat-tree-node.--dragged igo-layer-item {
+  background-color: #ff80ab;
+  color: white;
+}
+igo-layer-list mat-tree-node.--children-selected igo-layer-group,
+igo-layer-list mat-tree-node.--children-selected igo-layer-item {
+  background-color: rgb(255, 168.8, 197.9858267717);
+  color: white;
+}
+igo-layer-list mat-tree-node.--drag-hover::after {
+  border-color: #ff4081 !important;
+}
+igo-layer-list mat-tree:not(.--dragging) mat-tree-node:hover::after {
+  border-color: #ff4081;
+}
+
+igo-layer-unavailable .unavailable-layer {
+  background-color: #eeeeee;
+}
+
+igo-layer-viewer .active-background {
+  background-color: #fce4ec;
+}
+
+igo-layer-visibility-button button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-visibility-button button.out-of-range mat-icon, igo-layer-visibility-button button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+
 igo-map-browser div.ol-attribution > button {
   color: #607d8b;
   background-color: white;

package/theming/prebuilt-themes/dark-theme.css

@@ -2672,6 +2672,16 @@ igo-directions-results mat-list-item.igo-steps:hover {
   background-color: #ff80ab;
 }
 
+igo-directions-inputs .prefix-actions {
+  --mat-icon-button-touch-target-display: none;
+}
+igo-directions-inputs .prefix-actions .mat-mdc-icon-button.mat-mdc-button-base {
+  --mdc-icon-button-state-layer-size: 28px;
+  width: var(--mdc-icon-button-state-layer-size);
+  height: var(--mdc-icon-button-state-layer-size);
+  padding: 2px;
+}
+
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-shorcuts .igo-map-tooltip,
@@ -2745,6 +2755,14 @@ igo-layer-legend img:after {
   border-top-color: #607d8b;
 }
 
+igo-layer-legend {
+  --mat-form-field-container-height: 44px;
+  --mat-form-field-filled-label-display: none;
+  --mat-form-field-container-vertical-padding: 10px;
+  --mat-form-field-filled-with-label-container-padding-top: 10px;
+  --mat-form-field-filled-with-label-container-padding-bottom: 10px;
+}
+
 igo-layer-list-tool mat-form-field .mat-mdc-text-field-wrapper,
 igo-layer-list-tool mat-form-field .mat-mdc-form-field-focus-overlay {
   background-color: white !important;
@@ -2765,20 +2783,62 @@ igo-layer-list-tool .mat-mdc-icon-button.mat-mdc-button-base {
   padding: 8px;
 }
 
-igo-layer-item.igo-layer-item-focused > mat-list-item {
-  background-color: #ff80ab;
-  color: white;
+igo-layer-item {
+  background-color: #424242;
 }
 igo-layer-item button.mat-default mat-icon {
   color: white;
 }
-igo-layer-item button mat-icon.disabled {
+igo-layer-item button.disabled mat-icon {
   color: rgba(255, 255, 255, 0.5);
 }
 igo-layer-item .unavailable-layer {
   background-color: rgba(255, 255, 255, 0.12);
 }
 
+igo-layer-group {
+  background-color: #424242;
+}
+igo-layer-group button.mat-default mat-icon {
+  color: white;
+}
+igo-layer-group button.disabled mat-icon {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+igo-layer-list mat-tree-node.--selected igo-layer-group,
+igo-layer-list mat-tree-node.--selected igo-layer-item, igo-layer-list mat-tree-node.--dragged igo-layer-group,
+igo-layer-list mat-tree-node.--dragged igo-layer-item {
+  background-color: #ff80ab;
+  color: white;
+}
+igo-layer-list mat-tree-node.--children-selected igo-layer-group,
+igo-layer-list mat-tree-node.--children-selected igo-layer-item {
+  background-color: rgb(255, 168.8, 197.9858267717);
+  color: white;
+}
+igo-layer-list mat-tree-node.--drag-hover::after {
+  border-color: #ff4081 !important;
+}
+igo-layer-list mat-tree:not(.--dragging) mat-tree-node:hover::after {
+  border-color: #ff4081;
+}
+
+igo-layer-unavailable .unavailable-layer {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+igo-layer-viewer .active-background {
+  background-color: #fce4ec;
+}
+
+igo-layer-visibility-button button.mat-default mat-icon {
+  color: white;
+}
+igo-layer-visibility-button button.out-of-range mat-icon, igo-layer-visibility-button button.disabled mat-icon {
+  color: rgba(255, 255, 255, 0.5);
+}
+
 igo-map-browser div.ol-attribution > button {
   color: white;
   background-color: #607d8b;

package/theming/prebuilt-themes/deeppurple-theme.css

@@ -2672,6 +2672,16 @@ igo-directions-results mat-list-item.igo-steps:hover {
   background-color: #ffe57f;
 }
 
+igo-directions-inputs .prefix-actions {
+  --mat-icon-button-touch-target-display: none;
+}
+igo-directions-inputs .prefix-actions .mat-mdc-icon-button.mat-mdc-button-base {
+  --mdc-icon-button-state-layer-size: 28px;
+  width: var(--mdc-icon-button-state-layer-size);
+  height: var(--mdc-icon-button-state-layer-size);
+  padding: 2px;
+}
+
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-shorcuts .igo-map-tooltip,
@@ -2745,6 +2755,14 @@ igo-layer-legend img:after {
   border-top-color: #673ab7;
 }
 
+igo-layer-legend {
+  --mat-form-field-container-height: 44px;
+  --mat-form-field-filled-label-display: none;
+  --mat-form-field-container-vertical-padding: 10px;
+  --mat-form-field-filled-with-label-container-padding-top: 10px;
+  --mat-form-field-filled-with-label-container-padding-bottom: 10px;
+}
+
 igo-layer-list-tool mat-form-field .mat-mdc-text-field-wrapper,
 igo-layer-list-tool mat-form-field .mat-mdc-form-field-focus-overlay {
   background-color: white !important;
@@ -2765,20 +2783,62 @@ igo-layer-list-tool .mat-mdc-icon-button.mat-mdc-button-base {
   padding: 8px;
 }
 
-igo-layer-item.igo-layer-item-focused > mat-list-item {
-  background-color: #ffe57f;
-  color: white;
+igo-layer-item {
+  background-color: white;
 }
 igo-layer-item button.mat-default mat-icon {
   color: black;
 }
-igo-layer-item button mat-icon.disabled {
+igo-layer-item button.disabled mat-icon {
   color: rgba(0, 0, 0, 0.38);
 }
 igo-layer-item .unavailable-layer {
   background-color: #eeeeee;
 }
 
+igo-layer-group {
+  background-color: white;
+}
+igo-layer-group button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-group button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+igo-layer-list mat-tree-node.--selected igo-layer-group,
+igo-layer-list mat-tree-node.--selected igo-layer-item, igo-layer-list mat-tree-node.--dragged igo-layer-group,
+igo-layer-list mat-tree-node.--dragged igo-layer-item {
+  background-color: #ffe57f;
+  color: rgba(0, 0, 0, 0.87);
+}
+igo-layer-list mat-tree-node.--children-selected igo-layer-group,
+igo-layer-list mat-tree-node.--children-selected igo-layer-item {
+  background-color: rgb(255, 237.2875, 167.8);
+  color: rgba(0, 0, 0, 0.87);
+}
+igo-layer-list mat-tree-node.--drag-hover::after {
+  border-color: #ffd740 !important;
+}
+igo-layer-list mat-tree:not(.--dragging) mat-tree-node:hover::after {
+  border-color: #ffd740;
+}
+
+igo-layer-unavailable .unavailable-layer {
+  background-color: #eeeeee;
+}
+
+igo-layer-viewer .active-background {
+  background-color: #fff8e1;
+}
+
+igo-layer-visibility-button button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-visibility-button button.out-of-range mat-icon, igo-layer-visibility-button button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+
 igo-map-browser div.ol-attribution > button {
   color: #673ab7;
   background-color: white;

package/theming/prebuilt-themes/indigo-theme.css

@@ -2672,6 +2672,16 @@ igo-directions-results mat-list-item.igo-steps:hover {
   background-color: #ff80ab;
 }
 
+igo-directions-inputs .prefix-actions {
+  --mat-icon-button-touch-target-display: none;
+}
+igo-directions-inputs .prefix-actions .mat-mdc-icon-button.mat-mdc-button-base {
+  --mdc-icon-button-state-layer-size: 28px;
+  width: var(--mdc-icon-button-state-layer-size);
+  height: var(--mdc-icon-button-state-layer-size);
+  padding: 2px;
+}
+
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-shorcuts .igo-map-tooltip,
@@ -2745,6 +2755,14 @@ igo-layer-legend img:after {
   border-top-color: #3f51b5;
 }
 
+igo-layer-legend {
+  --mat-form-field-container-height: 44px;
+  --mat-form-field-filled-label-display: none;
+  --mat-form-field-container-vertical-padding: 10px;
+  --mat-form-field-filled-with-label-container-padding-top: 10px;
+  --mat-form-field-filled-with-label-container-padding-bottom: 10px;
+}
+
 igo-layer-list-tool mat-form-field .mat-mdc-text-field-wrapper,
 igo-layer-list-tool mat-form-field .mat-mdc-form-field-focus-overlay {
   background-color: white !important;
@@ -2765,20 +2783,62 @@ igo-layer-list-tool .mat-mdc-icon-button.mat-mdc-button-base {
   padding: 8px;
 }
 
-igo-layer-item.igo-layer-item-focused > mat-list-item {
-  background-color: #ff80ab;
-  color: white;
+igo-layer-item {
+  background-color: white;
 }
 igo-layer-item button.mat-default mat-icon {
   color: black;
 }
-igo-layer-item button mat-icon.disabled {
+igo-layer-item button.disabled mat-icon {
   color: rgba(0, 0, 0, 0.38);
 }
 igo-layer-item .unavailable-layer {
   background-color: #eeeeee;
 }
 
+igo-layer-group {
+  background-color: white;
+}
+igo-layer-group button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-group button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+igo-layer-list mat-tree-node.--selected igo-layer-group,
+igo-layer-list mat-tree-node.--selected igo-layer-item, igo-layer-list mat-tree-node.--dragged igo-layer-group,
+igo-layer-list mat-tree-node.--dragged igo-layer-item {
+  background-color: #ff80ab;
+  color: white;
+}
+igo-layer-list mat-tree-node.--children-selected igo-layer-group,
+igo-layer-list mat-tree-node.--children-selected igo-layer-item {
+  background-color: rgb(255, 168.8, 197.9858267717);
+  color: white;
+}
+igo-layer-list mat-tree-node.--drag-hover::after {
+  border-color: #ff4081 !important;
+}
+igo-layer-list mat-tree:not(.--dragging) mat-tree-node:hover::after {
+  border-color: #ff4081;
+}
+
+igo-layer-unavailable .unavailable-layer {
+  background-color: #eeeeee;
+}
+
+igo-layer-viewer .active-background {
+  background-color: #fce4ec;
+}
+
+igo-layer-visibility-button button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-visibility-button button.out-of-range mat-icon, igo-layer-visibility-button button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+
 igo-map-browser div.ol-attribution > button {
   color: #3f51b5;
   background-color: white;

package/theming/prebuilt-themes/orange-theme.css

@@ -2672,6 +2672,16 @@ igo-directions-results mat-list-item.igo-steps:hover {
   background-color: #b3e5fc;
 }
 
+igo-directions-inputs .prefix-actions {
+  --mat-icon-button-touch-target-display: none;
+}
+igo-directions-inputs .prefix-actions .mat-mdc-icon-button.mat-mdc-button-base {
+  --mdc-icon-button-state-layer-size: 28px;
+  width: var(--mdc-icon-button-state-layer-size);
+  height: var(--mdc-icon-button-state-layer-size);
+  padding: 2px;
+}
+
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-shorcuts .igo-map-tooltip,
@@ -2745,6 +2755,14 @@ igo-layer-legend img:after {
   border-top-color: #ef6c00;
 }
 
+igo-layer-legend {
+  --mat-form-field-container-height: 44px;
+  --mat-form-field-filled-label-display: none;
+  --mat-form-field-container-vertical-padding: 10px;
+  --mat-form-field-filled-with-label-container-padding-top: 10px;
+  --mat-form-field-filled-with-label-container-padding-bottom: 10px;
+}
+
 igo-layer-list-tool mat-form-field .mat-mdc-text-field-wrapper,
 igo-layer-list-tool mat-form-field .mat-mdc-form-field-focus-overlay {
   background-color: white !important;
@@ -2765,20 +2783,62 @@ igo-layer-list-tool .mat-mdc-icon-button.mat-mdc-button-base {
   padding: 8px;
 }
 
-igo-layer-item.igo-layer-item-focused > mat-list-item {
-  background-color: #b3e5fc;
-  color: white;
+igo-layer-item {
+  background-color: white;
 }
 igo-layer-item button.mat-default mat-icon {
   color: black;
 }
-igo-layer-item button mat-icon.disabled {
+igo-layer-item button.disabled mat-icon {
   color: rgba(0, 0, 0, 0.38);
 }
 igo-layer-item .unavailable-layer {
   background-color: #eeeeee;
 }
 
+igo-layer-group {
+  background-color: white;
+}
+igo-layer-group button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-group button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+igo-layer-list mat-tree-node.--selected igo-layer-group,
+igo-layer-list mat-tree-node.--selected igo-layer-item, igo-layer-list mat-tree-node.--dragged igo-layer-group,
+igo-layer-list mat-tree-node.--dragged igo-layer-item {
+  background-color: #b3e5fc;
+  color: white;
+}
+igo-layer-list mat-tree-node.--children-selected igo-layer-group,
+igo-layer-list mat-tree-node.--children-selected igo-layer-item {
+  background-color: rgb(218.2506329114, 242.4278481013, 253.5493670886);
+  color: white;
+}
+igo-layer-list mat-tree-node.--drag-hover::after {
+  border-color: #039be5 !important;
+}
+igo-layer-list mat-tree:not(.--dragging) mat-tree-node:hover::after {
+  border-color: #039be5;
+}
+
+igo-layer-unavailable .unavailable-layer {
+  background-color: #eeeeee;
+}
+
+igo-layer-viewer .active-background {
+  background-color: #e1f5fe;
+}
+
+igo-layer-visibility-button button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-visibility-button button.out-of-range mat-icon, igo-layer-visibility-button button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+
 igo-map-browser div.ol-attribution > button {
   color: #ef6c00;
   background-color: white;

package/theming/prebuilt-themes/teal-theme.css

@@ -2672,6 +2672,16 @@ igo-directions-results mat-list-item.igo-steps:hover {
   background-color: #b2dfdb;
 }
 
+igo-directions-inputs .prefix-actions {
+  --mat-icon-button-touch-target-display: none;
+}
+igo-directions-inputs .prefix-actions .mat-mdc-icon-button.mat-mdc-button-base {
+  --mdc-icon-button-state-layer-size: 28px;
+  width: var(--mdc-icon-button-state-layer-size);
+  height: var(--mdc-icon-button-state-layer-size);
+  padding: 2px;
+}
+
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-popup-component .igo-map-tooltip,
 igo-draw-shorcuts .igo-map-tooltip,
@@ -2745,6 +2755,14 @@ igo-layer-legend img:after {
   border-top-color: #00897b;
 }
 
+igo-layer-legend {
+  --mat-form-field-container-height: 44px;
+  --mat-form-field-filled-label-display: none;
+  --mat-form-field-container-vertical-padding: 10px;
+  --mat-form-field-filled-with-label-container-padding-top: 10px;
+  --mat-form-field-filled-with-label-container-padding-bottom: 10px;
+}
+
 igo-layer-list-tool mat-form-field .mat-mdc-text-field-wrapper,
 igo-layer-list-tool mat-form-field .mat-mdc-form-field-focus-overlay {
   background-color: white !important;
@@ -2765,20 +2783,62 @@ igo-layer-list-tool .mat-mdc-icon-button.mat-mdc-button-base {
   padding: 8px;
 }
 
-igo-layer-item.igo-layer-item-focused > mat-list-item {
-  background-color: #b2dfdb;
-  color: white;
+igo-layer-item {
+  background-color: white;
 }
 igo-layer-item button.mat-default mat-icon {
   color: black;
 }
-igo-layer-item button mat-icon.disabled {
+igo-layer-item button.disabled mat-icon {
   color: rgba(0, 0, 0, 0.38);
 }
 igo-layer-item .unavailable-layer {
   background-color: #eeeeee;
 }
 
+igo-layer-group {
+  background-color: white;
+}
+igo-layer-group button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-group button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+igo-layer-list mat-tree-node.--selected igo-layer-group,
+igo-layer-list mat-tree-node.--selected igo-layer-item, igo-layer-list mat-tree-node.--dragged igo-layer-group,
+igo-layer-list mat-tree-node.--dragged igo-layer-item {
+  background-color: #b2dfdb;
+  color: rgba(0, 0, 0, 0.87);
+}
+igo-layer-list mat-tree-node.--children-selected igo-layer-group,
+igo-layer-list mat-tree-node.--children-selected igo-layer-item {
+  background-color: rgb(206.8220183486, 234.9779816514, 232.4752293578);
+  color: rgba(0, 0, 0, 0.87);
+}
+igo-layer-list mat-tree-node.--drag-hover::after {
+  border-color: #26a69a !important;
+}
+igo-layer-list mat-tree:not(.--dragging) mat-tree-node:hover::after {
+  border-color: #26a69a;
+}
+
+igo-layer-unavailable .unavailable-layer {
+  background-color: #eeeeee;
+}
+
+igo-layer-viewer .active-background {
+  background-color: #e0f2f1;
+}
+
+igo-layer-visibility-button button.mat-default mat-icon {
+  color: black;
+}
+igo-layer-visibility-button button.out-of-range mat-icon, igo-layer-visibility-button button.disabled mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+
 igo-map-browser div.ol-attribution > button {
   color: #00897b;
   background-color: white;