/* root is in another file
:root {
    --p1: calc(1rem / 2);
    --p-half: calc(var(--p1) / 2);
    --p2: calc(var(--p1) * 2);
    --p3: calc(var(--p1) * 3);
    --p4: calc(var(--p1) * 4);

    --icon: 1rem;
    --icon2: calc(var(--icon) * 2);

    --shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    --shadow-reverse: 0 -4px 4px 0 rgba(0, 0, 0, 0.25);
    --shadow-border: 1px solid #d9d9d9;
    --border-radius: var(--p1);

    --card-inner-size: 300px;
    --sidebar-desktop-width: 28rem;

    --white: #ffffff;
    --black: #000000;
    --grey: #808080;
    --light-grey: #d9d9d9;
    --shadow-border: 1px solid var(--light-grey);
} */

/***** MARKERS *****/

.marker {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  width: var(--icon2);
  height: var(--icon2);

  background-color: orange;
  border-radius: calc(var(--icon2) / 2);
  padding: 0;
  margin: 0;
}

.marker * {
  display: block;

  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  align-content: center;
  text-align: center;
}

.marker.beach.closed {
  background-color: #ffb300;
}

.marker.beach.open {
  background-color: #4caf50;
}

.marker.wastewater {
  background-color: brown;
  color: white;
}

.marker.h2s {
  background-color: #ffb300;
}

.marker.odor {
  background-color: #06b0f0;
}

/***** POPUPS *****/

.mapboxgl-popup .mapboxgl-popup-content .mapboxgl-popup-close-button {
  display: none;
}

.mapbox-tooltip {
  max-width: unset !important;
}

.mapbox-tooltip .mapboxgl-popup-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--p1);
  padding-top: var(--p2);
  padding-bottom: var(--p2);
  padding-left: var(--p3);
  padding-right: var(--p3);

  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  border: var(--shadow-border);

  max-width: 30vw;

  font-size: 1rem;
}

.tooltip {
  width: 100%;
  max-width: 30vw;
}

.tooltip-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: left;
  gap: var(--p1);
}

.tooltip-header span {
  width: 100%;
}

.tooltip-header i {
  display: inline-flex;
  width: var(--icon);
  height: var(--icon);
}

.tooltip-line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--p1);
}

.tooltip-footer {
  color: var(--grey);
  font-size: 0.75rem;
}

@media (max-width: 768px) {
  .tooltip {
    max-width: 80vw;
  }

  .mapbox-tooltip .mapboxgl-popup-content {
    max-width: 80vw;
  }
}

/* Tooltips with "label: value" format */
.tooltip-line.tooltip-table span:first-child {
  color: var(--grey);
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .tooltip-line.tooltip-table span:first-child {
    display: none;
  }
}

/* Beach tooltip */
.mapbox-tooltip.beach-tooltip .tooltip-header span:nth-child(3) {
  display: block;
  width: 100%;
  color: var(--grey);
  font-size: 0.75rem;
  margin-left: calc(var(--icon) + var(--p1));
}

.tooltip-line.beach-status {
  justify-content: left;
}

.beach-status-since {
  margin-left: calc(var(--icon) + var(--p1));
}

.beach-status-note {
  margin-top: var(--p1);
  margin-left: calc(var(--icon) + var(--p1));
}

.beach-status-since span {
  color: var(--grey);
  font-size: 0.75rem;
}

.beach-tooltip .tooltip-header > div i {
  margin-right: var(--p-half);
}

/* Complaint tooltip */
.complaint-tooltip .tooltip-line span {
  /* margin-left: calc(var(--icon) + var(--p1)); */
}

/* Hydrogen sulfide tooltip */
.h2s-tooltip .tooltip-line span.labelled-indicator {
  display: flex;
  flex-direction: row;
  gap: var(--p1);
  align-items: center;
  justify-content: right;
}