pico/scss/components/_modal.scss

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

:root {
  --scrollbar-width: 0px;
}

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

  // Content
  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');
      }
    }

    > header,
    > footer {
      padding: calc(var(--block-spacing-vertical) * 0.5)
        var(--block-spacing-horizontal);
    }

    > header {
      .close {
        margin: 0;
        margin-left: var(--spacing);
        float: right;
      }
    }

    > footer {
      text-align: right;

      [role='button'] {
        margin-bottom: 0;

        &:not(:first-of-type) {
          margin-left: calc(var(--spacing) * 0.5);
        }
      }
    }

    p {
      &:last-of-type {
        margin: 0;
      }
    }

    // Close icon
    @if $enable-classes {
      .close {
        display: block;
        width: 1rem;
        height: 1rem;
        margin-top: calc(var(--block-spacing-vertical) * -0.5);
        margin-bottom: var(--typography-spacing-vertical);
        margin-left: auto;
        background-image: var(--icon-close);
        background-position: center;
        background-size: auto 1rem;
        background-repeat: no-repeat;
        opacity: 0.5;

        @if $enable-transitions {
          transition: opacity var(--transition);
        }

        &:hover,
        &:active,
        &:focus {
          opacity: 1;
        }
      }
    }
  }

  // Closed state
  &:not([open]),
  &[open='false'] {
    display: none;
  }
}

// Utilities
@if $enable-classes {
  .modal-is-open {
    padding-right: var(--scrollbar-width, 0px);
    overflow: hidden;
    pointer-events: none;

    dialog {
      pointer-events: auto;
    }
  }
}

// Animations
@if ($enable-classes and $enable-transitions) {
  $animation-duration: 0.2s;

  .modal-is-opening,
  .modal-is-closing {
    dialog,
    dialog > article {
      animation-duration: $animation-duration;
      animation-timing-function: ease-in-out;
      animation-fill-mode: both;
    }

    dialog {
      animation-duration: ($animation-duration * 4);
      animation-name: fadeIn;

      > article {
        animation-delay: $animation-duration;
        animation-name: slideInDown;
      }
    }
  }

  .modal-is-closing {
    dialog,
    dialog > article {
      animation-delay: 0s;
      animation-direction: reverse;
    }
  }

  @keyframes fadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: var(--modal-overlay-background-color);
    }
  }

  @keyframes slideInDown {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}