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

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
    .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: .5;
  
      @if $enable-transitions {
        transition: opacity var(--transition);
      }
      
      &:hover,
      &:active,
      &:focus {
        opacity: 1;
      }
    }
  }

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

// Utilities
.modal-is-open {
  overflow: hidden;
  pointer-events: none;

  body > *:not(dialog) {
    filter: blur(0.1875rem);
  }

  dialog {
    pointer-events: auto;
  }
}

// Animations
@if $enable-transitions {
  $animation-duration: .2s;
  
  .modal-is-opening,
  .modal-is-closing {
    
    body > *:not(dialog),
    dialog,
    dialog > article {
      animation-duration: $animation-duration;
      animation-fill-mode: both;  
    }

    body > *:not(dialog) {
      animation-name: blurIn;
    }

    dialog {
      animation-name: fadeIn;
  
      > article {
        animation-name: slideInDown;
      }
    }
  }

  .modal-is-closing {
    body > *:not(dialog),
    dialog,
    dialog > article {
      animation-direction: reverse;
    }
  }

  @keyframes blurIn {
    from {
      filter: blur(0);
    }
    to {
      filter: blur(0.1875rem);
    }
  }

  @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;
    }
  }
}