//
// Very basic modal container
//
// Import this as:
// .nypl-basic-modal-container {
//    @include basic-modal;
//    }

#closeModal {
  display: none;
}

#filterButton {
  display: none;
}

#cancelFiltering {
  display: none;
}

#popup-no-js:target {
  display: block;
  opacity: 1;
  visibility: visible;
}

@mixin basic-modal {

  &.inactive {
    display: none;
    opacity: 0;
    visibility: hidden;
  }

  &.no-js {
    display: none;
    opacity: 0;
    visibility: hidden;
  }

  &.no-js:target,
  &.active {
    display: block;
    opacity: 1;
    visibility: visible;

    .nypl-modal-underlay {
      background: transparentize($nypl-white, 0.2);
      bottom: 0;
      left: 0;
      position: fixed;
      right: 0;
      top: 0;
      z-index: 1000;
    }


    $shadow: 0 0.125rem 0.5rem 0.25rem transparentize($nypl-gray-brown, 0.75);

    .nypl-modal-content {
      @include box-shadow($shadow);
      background: darken($nypl-white, 0.2);
      bottom: 0;
      display: block;
      left: 0;
      height: 100%;
      overflow: scroll;
      position: fixed;
      right: 0;
      top: 0;
      width: 100%;
      z-index: 1001;
      -webkit-overflow-scrolling: none;

      h3 {
        margin-bottom: 0;
        margin-left: ($general-margin * 3.125);

        @include media($xtrasmall-breakpoint) {
          margin-left: $general-margin;
        }
      }
    } // /.nypl-modal-content

    .nypl-x-close-button {
      display: block;
      right: 3%;
      height: 3rem;
      padding: 0;
      position: absolute;
      top: ($general-margin * 0.75);
      width: 5rem;
      z-index: 2001;

      @include media($xtrasmall-breakpoint) {
        right: 5%;
        width: 1.75rem;

        span {
          @include screenreader-only;
        }
      }
    }
  } // /.active
} // /.basic-modal