html.dark {
  --esri-theme: dark;
}

html.dark .esri-view,
html.dark .esri-widget,
html.dark .esri-ui,
html.dark .esri-popup {
  color-scheme: dark;
  filter: invert(1) hue-rotate(180deg);
}

.esri-ui {
  z-index: 50;
}

html:not(.dark) {
  --esri-theme: light;
}

[dir="rtl"] .esri-sketch-pad.esri-sketch--vertical,
[dir="rtl"] .esri-ui-top-right .esri-sketch-pad.esri-sketch--vertical,
[dir="rtl"] .esri-ui-bottom-right .esri-sketch-pad.esri-sketch--vertical,
[dir="rtl"] .esri-ui-bottom-left .esri-sketch-pad.esri-sketch--vertical {
  right: auto;
  left: 0;
}

/* critters:disable */
@supports (view-transition-name: auto) {
  .esri-tooltip::view-transition-old(tooltip-content),
  .esri-tooltip::view-transition-new(tooltip-content) {
    animation-duration: 0.3s;
  }
}

.esri-feature-table vaadin-grid::part(body-cell),
.esri-feature-table vaadin-grid::part(header-cell) {
  padding: 0.5rem;
}

.esri-feature-table vaadin-grid::part(body-cell.invalid),
.esri-feature-table vaadin-grid::part(header-cell.invalid) {
  background-color: rgba(255, 0, 0, 0.1);
}

.esri-feature-table vaadin-grid::part(header-cell.direction) {
  cursor: pointer;
}

.esri-feature-table vaadin-grid::part(body-cell.highlight) {
  background-color: rgba(0, 255, 0, 0.1);
}