.modal__title {
  font-size: var(--heading--font-size);
  color: var(--heading--color, var(--body--color, inherit));
  line-height: var(--heading--line-height, 1);
  font-weight: var(--heading--font-weight);
  text-transform: var(--heading--text-transform);
  transition: var(--heading--transition, all 200ms ease-in-out);
  margin-top: var(--heading--margin-top);
  margin-bottom: var(--heading--margin-bottom);
}

.modal__title {
  --heading--font-size: var(--h2--font-size, clamp(1.5625rem, 1.26953125rem + 1.6276041667vw, 2.44140625rem));
  --heading--font-weight: var(--h2--font-weight);
}

.modal {
  background-color: var(--bg-color);
  padding: 1.953125rem;
  container-type: inline-size;
  height: var(--modal--height, auto);
  left: var(--modal--left, 0);
  max-height: var(--modal--max-height, none);
  overflow-y: var(--modal--overflow, auto);
  position: var(--modal--position, fixed);
  top: var(--modal--top, var(--drupal-displace-offset-top, 0));
  transition: all 250ms ease-out allow-discrete;
  width: var(--modal--width, auto);
  container-type: inline-size;
  border: 1px solid var(--highlight-color);
}
[data-site-mode=at-work] .modal {
  box-shadow: 0 3px 6px rgba(128, 216, 206, 0.16), 0 3px 6px rgba(128, 216, 206, 0.23);
}
[data-site-mode=at-play] .modal {
  box-shadow: 0 3px 6px rgba(246, 50, 89, 0.16), 0 3px 6px rgba(246, 50, 89, 0.23);
}
.modal__titlebar {
  display: flex;
  padding-bottom: 1.5625rem;
}
.modal__close {
  aspect-ratio: 1/1;
  position: relative;
  margin-left: auto;
}
.modal__close::after, .modal__close::before {
  border-top: 2px var(--button--color) solid;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  rotate: var(--modal-close--rotation, 45deg);
  top: 50%;
  transition: all 200ms ease-in-out;
  translate: 0 -50%;
}
.modal__close::after {
  --modal-close--rotation: -45deg;
}
.modal__close:focus-visible::before, .modal__close:hover::before {
  --modal-close--rotation: 0deg;
}
.modal__close:focus-visible::after, .modal__close:hover::after {
  --modal-close--rotation: 0deg;
}
.modal--ajax {
  --modal--left: 50%;
  --modal--max-height: calc(95dvh - var(--drupal-displace-offset-top, 0px));
  --modal--top: calc(50% + var(--drupal-displace-offset-top, 0px) * 0.5);
  --modal--width: 90%;
  translate: -50% -50%;
  z-index: 103;
}
@media (width > 56rem) {
  .modal--ajax {
    --modal--width: 900px;
  }
}
.modal ~ .ui-widget-overlay {
  background: color-mix(in srgb, var(--bg-color), transparent 60%);
}
