:root {
  --meterkastkaart-bg: var(--color-white);
  --meterkastkaart-text: var(--color-black);
  --meterkastkaart-border: var(--color-gray-40);
  --meterkastkaart-icon: url("");
}

[id*="storybook_wrapper"] {
  background-color: var(--color-gray-20);
}

[id*="storybook_wrapper"] .spr-incidents-shortview {
  inline-size: 100%;
  max-inline-size: 400px;
  margin-inline: auto;
}

.spr-incidents-shortview {
  padding: clamp(1.25rem, calc(1.077rem + 0.739vw), 1.875rem);
  background-color: var(--color-white);

  .spr-incidents-shortview__header {
    padding-block-end: clamp(1.25rem, calc(1.077rem + 0.739vw), 1.875rem);
    border-block-end: 0.0625rem solid var(--color-gray-light);
  }

  .spr-incidents-shortview__content {
    padding-block-end: clamp(1.25rem, calc(1.077rem + 0.739vw), 1.875rem);
  }

  .spr-incidents-shortview__readmore .spr-button {
    padding: 0;
    border-block-end: unset !important;
    padding-block: 0 var(--button-padding-block);
    min-inline-size: unset;

    &:hover {
      text-decoration: underline;
      color: var(--color-secondary-dark);
      text-decoration-thickness: var(--button-border-width);
      text-underline-offset: var(--base-underline-offset);
      /* border-block-end: var(--button-border-width) solid currentColor !important; */
    }
  }
}

.spr-most-recent-incidents {
  margin-block: clamp(1.5rem, calc(0.253rem + 5.322vw), 2rem) var(--padding-component);

  .site--is-pwa & {
    margin-block-start: 0;
  }

  .spr-most-recent-incidents__wrapper {
    padding-inline: var(--padding-inline-grid);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    @media screen and (min-width: 62rem) {
      flex-direction: row;
    }

    @media screen and (min-width: 120rem) {
      max-inline-size: var(--container-max-inline-size);
      margin-inline: auto;
      padding-inline: unset;
    }
  }

  .spr-most-recent-incidents__text {
    width: 100%;
    padding: 1rem;
    background-color: var(--color-primary-light);

    h4 {
      margin-block-end: 1rem;
      font-size: var(--font-size-h6);
      font-weight: var(--font-weight-extra-bold);
    }

    @media screen and (min-width: 62rem) {
      padding: calc(var(--padding-component-inline) / 2) var(--padding-component-inline);
    }
  }

  .spr-incidents-shortview,
  .view-incident-map.view-display-id-last-three {
    width: 100%;

    @media screen and (min-width: 62rem) {
      width: 50%;
      min-block-size: 35rem;
    }
  }

  .spr-incidents-shortview {
    order: 2;

    @media screen and (min-width: 62rem) {
      order: 1;
    }
  }

  .view-incident-map.view-display-id-last-three {
    order: 1;

    .view-content {
      aspect-ratio: 1;

      a {
        text-decoration: underline;
        color: var(--link-color);
        text-underline-offset: 0.25rem;
        text-decoration-thickness: 0.125rem;

        &:hover {
          color: var(--link-hover-color);
        }
      }

      @media screen and (min-width: 62rem) {
        display: block;
        order: 2;
        width: 100%;
        height: 100%;
        aspect-ratio: unset;
      }
    }

    #leaflet-map-view-incident-map-last-three {
      position: relative;
      aspect-ratio: 3 / 2;

      @media screen and (min-width: 62rem) {
        display: block;
        width: 100%;
        height: 100%;
        aspect-ratio: unset;
      }
    }

    .leaflet-map-pane {
      position: relative;
      aspect-ratio: 3 / 2;

      @media screen and (min-width: 62rem) {
        display: block;
        width: 100%;
        height: 100%;
        aspect-ratio: unset;
      }
    }

    @media screen and (min-width: 62rem) {
      order: 2;
    }
  }
}

/* Overrides for the PWA */

body.site--is-pwa {
  .spr-most-recent-incidents {
    .spr-incidents-shortview {
      order: 2;
      @media screen and (min-width: 62rem) {
        order: 1;
      }
    }

    .view-incident-map.view-display-id-last-three {
      order: 1;
      @media screen and (min-width: 62rem) {
        order: 2;
      }
    }
  }
}