.jrb-speedbump {
  --_button-bg: black;
  --_button-bg-hover: grey;
  --_button-text: white;
  --_button-text-hover: white;
  --_bg: white;
  --_heading: black;
  --_body: black;
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: none;
  visibility: hidden;
  width: 100vw;
  height: 100vh;
}

.jrb-speedbump[data-state="open"] {
  display: block;
  visibility: visible;
}

.jrb-speedbump__overlay {
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 0.25);
}

.jrb-speedbump__content {
  position: absolute;
  inset: 0;
  width: min(800px, 80%);
  height: fit-content;
  padding: 2rem;
  margin: auto;
  box-shadow:rgba(37, 38, 39, 0.03) 0px -2px 5px 0px,
  rgba(37, 38, 39, 0.04) 0px 1px 1px -2px,
  rgba(37, 38, 39, 0.04) 0px 2px 2px -2px,
  rgba(37, 38, 39, 0.05) 0px 5px 5px -2px,
  rgba(37, 38, 39, 0.06) 0px 9px 9px -2px,
  rgba(37, 38, 39, 0.07) 0px 16px 16px -2px;
  border: none;
  border-radius: 0.5rem;
  background-color: var(--_bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: jrbSpeedbumpFadeIn 100ms linear forwards;
}

.jrb-speedbump__heading {
  margin-block: 0.5em;
  color: var(--_heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.jrb-speedbump__close {
  position: absolute;
  display: grid;
  place-content: center;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 100vw;
  background-color: var(--_button-bg);
  color: var(--_button-text);
  font-size: 1.25rem;
  cursor: pointer;
}

.jrb-speedbump .button {
  background-color: var(--_button-bg);
  color: var(--_button-text);
}

.jrb-speedbump__close:is(:hover, :focus-visible),
.jrb-speedbump .button:is(:hover, :focus-visible) {
  background-color: var(--_button-bg-hover);
  color: var(--_button-text-hover);
}

.jrb-speedbump p:last-of-type {
  margin: 0;
}

@keyframes jrbSpeedbumpFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}