@mixin force-scroll-fullscreen-modal {
  //NOTE: the element cannot be static, otherwise scroll won't be foreced

  //create a 1px overflow on the element, so that it will always have scroll, no matter it's height
  &::after {
    content: "";
    display: block;
    position: absolute;
    background-color: color("background");
    height: 1px;
    bottom: -1px;
    left: 0;
    right: 0;
  }
  //and set the element to scroll, so that it will not scroll the page behind the modal view.
  overflow-y: auto;
  overscroll-behavior: none;

  @include breakpoint("medium", $require-low-height: true) {
    &::after {
      content: none;
    }
  }
}