: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-meterkastkaart {
  inline-size: 100%;
  max-inline-size: 340px;
  margin-inline: auto;
}

.spr-meterkastkaart {
  margin-block-end: clamp(1.5rem, calc(0.876rem + 2.661vw), 3.75rem);
  padding: clamp(1.5rem, calc(1.396rem + 0.443vw), 1.875rem);
  color: var(--meterkastkaart-text);
  background-color: var(--meterkastkaart-bg);
}

.spr-meterkastkaart.spr-meterkastkaart--dark {
  --meterkastkaart-bg: var(--color-black);
  --meterkastkaart-text: var(--color-white);
  --meterkastkaart-border: var(--color-gray-80);
}

.spr-meterkastkaart.spr-meterkastkaart--is-sticky {
  @media screen and (min-width: 62rem) {
    position: sticky;
    top: 9.5rem;
  }
}

.spr-meterkastkaart.spr-meterkastkaart--is-sticky:has(~ .spr-meterkastkaart) {
  position: relative;
  top: unset;
}

.spr-meterkastkaart.spr-meterkastkaart--is-sticky ~ .spr-meterkastkaart {
  position: relative;
  top: unset;
}

.spr-meterkastkaart__header {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 1rem;

  .spr-meterkastkaart__icon {
    img,
    svg {
      inline-size: 3rem;
      block-size: 3rem;
      display: block;

      @media screen and (min-width: 62rem) {
        inline-size: 5rem;
        block-size: 5rem;
      }
    }
  }

  @media screen and (min-width: 62rem) {
    align-items: flex-end;
    margin-inline-end: 1.25rem;
  }
}

.spr-meterkastkaart__content {
  font-size: 1rem;
  line-height: 150%;

  h4,
  h5,
  h6 {
    margin-block-end: 1rem;
  }

  a {
    color: currentColor;
  }

  ul {
    list-style-type: none;
    border-block-start: 0.0625rem solid var(--meterkastkaart-border);
    margin-inline: 0;
    padding-inline: 0;

    li {
      padding: 0.5rem 0;
      padding-left: 2.5rem;
      border-block-end: 0.0625rem solid var(--meterkastkaart-border);
      background: transparent var(--meterkastkaart-icon) no-repeat left 0.875rem;
      background-size: 1.5rem;
      min-block-size: 3.125rem;
    }
  }

  ul:last-child {
    margin-block-end: 0;

    li:last-child {
      padding-block-end: 0;
      border-block-end: unset;
    }
  }
}