picocss/scss/components/_modal.scss

/**
 * Modal (<dialog>)
 */

dialog {
  position: fixed;
  width: inherit;
  min-width: 100%;
  height: inherit;
  min-height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--modal-overlay-background-color);
  padding: var(--spacing);
  border: none;

  article {
    @if map-get($breakpoints, "sm") {
      @media (min-width: map-get($breakpoints, "sm")) {
        max-width: map-get($viewports, "sm");
      }
    }

    @if map-get($breakpoints, "md") {
      @media (min-width: map-get($breakpoints, "md")) {
        max-width: map-get($viewports, "md");
      }
    }

    > footer {
      text-align: right;

      [role="button"]:not(:first-of-type) {
        margin-left: calc(var(--spacing) * 0.5);
      }
    }
  }

  &:not([open]) {
    display: none;
  }

  .close {
    display: block;
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    background-image: var(--icon-close);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1rem auto;
    opacity: .5;
    margin-bottom: var(--typography-spacing-vertical);
    margin-right: -0.5rem;
    margin-top: -0.5rem;

    @if $enable-transitions {
      transition: opacity var(--transition);
    }
    
    &:hover,
    &:active,
    &:focus {
      opacity: 1;
    }
  }
}

.dialog-is-open {
  pointer-events: none;
  overflow: hidden;
  
  .container {
    filter: blur(0.125rem);
  }

  dialog {
    pointer-events: auto;
  }
}