//
// NYPL Search Results Filter Modal
// TODO: Too much quick and dirty in here... needs clean up / refactoring
// TODO: Separate the Modality of this from the specific useage of this particular filtering

@mixin popup {

  &.inactive {
    display: none;
  }

  &.no-js-active,
  &.active {
    background: transparentize($nypl-white, 0.2);
    display: block;
    height: 100%;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2101;

    .nypl-popup-filter-menu {
      $shadow: 0 0.125rem 0.5rem 0.25rem transparentize($nypl-gray-brown, 0.75);
      @include box-shadow($shadow);
      background: $nypl-white;
      border-bottom: $general-border-width solid $nypl-light-gray;
      left: 0;
      //position: absolute;
      top: 0;
      width: 100%;


      @include media($xtrasmall-breakpoint) {
        padding-top: ($general-padding * 1.5);
      }

      .nypl-parent-fieldset {
        border: 0;
        margin: 0;
        padding-left: 0;
        padding-right: 0;

        // TODO: Explore a more elegant way of handling this:
        > legend:first-child {
          display: block;
          margin-left: ($general-margin * 3.125);
          width: 100%;

          @include media($xtrasmall-breakpoint) {
            margin-left: ($general-margin * 1.25);
          }

          h3 {
            margin-bottom: 0;
            // padding-left: ($general-padding * 2);
            // padding-top: $general-padding;

            @include media($xtrasmall-breakpoint) {
              padding-left: 0;
            }

            &:focus {
              outline-color: $focus-color;
              outline-style: solid;
              outline-width: $focus-width;
              padding: ($general-padding / 2) 0;
          } // /.:focus
        } // /h3
      } // / > legend:first-child

        .nypl-inner-fieldset:nth-child(4) {
          border: 0;
        }
      }


//
// Here we have rules to layout the inner fieldsets...
// TODO: build a better mixin to handle these kinds of nested fielsets w/ easier ease.
//
      .nypl-inner-fieldset {
        border: 0;
        border-bottom: ($general-border-width * 0.25) solid lighten($nypl-gray-cool, 15%);
        padding: 0 $general-padding 0 ($general-padding * 3.125);

        @include media($xtrasmall-breakpoint) {
          padding-left: ($general-padding * 1.25);
        }

        legend {
          font-size: 1.125rem;
          margin-top: 0.75rem;
        }

        // where we have columns needed:
        .nypl-generic-checkbox.nypl-generic-columns {

          @include generic-columns(3);
          max-width: 45rem;

          @include media($xtrasmall-breakpoint) {
            @include generic-columns(2);

          }
        }
      } // /.nypl-inner-fieldset

//
// This handles just the date fiels set since it needs special attention
//
      .nypl-inner-fieldset-date {
        padding-bottom: ($general-padding * 1.125);
      }

//
// Here we abuse the nicely crafted name field...
//
      .nypl-name-field {
        margin: 0;

        div {
          float: left;
          margin-right: ($general-padding * 1.125);
          width: 25%;

          @include media($xtrasmall-breakpoint) {
            width: 85%;
          }
        }
      }  // /.nypl-name-field


//
// Buttons for this context need all kinds of overriding and such...
// TODO: do a better job of this too...
//
      .nypl-filter-button-container {
        //background: $nypl-light-gray;
        border-top: ($general-border-width * 0.25) solid lighten($nypl-gray-cool, 15%);
        height: 3.5rem;
        padding: $general-padding 0 0 ($general-padding * 2);

        @include media($xtrasmall-breakpoint) {
          height: 6.5rem;
          padding-left: ($general-padding * 1.125);
        }
      } // /.nypl-filter-button-container

      .nypl-control-buttons {
        @include media($mobile-breakpoint) {
          height: 2.5rem;
          width: 20.5rem;
        }

        @include media($xtrasmall-breakpoint) {
          height: 5.5rem;
          width: 9.5rem;
        }
      }

      .nypl-filter-button {
        @include basic-button-icon(
        // $background-color: $nypl-red,
        // $border-color: $nypl-red,
        // $text-color: $nypl-white
        );
        @include media($xtrasmall-breakpoint) {
          display: block;
          float: left;
          margin: 0 ($general-margin * 0.5) $general-margin;
          position: relative;

          &:nth-child(2) {
            margin-right: 0;
          }
        }
        // .nypl-icon {
        //   background: $nypl-red;
        //   fill: $nypl-white;
        //   position: relative;
        //   top: 0.125rem;
        // }
      } // /.nypl-filter-button

      .nypl-x-close-button {
        display: block;
        // float: right;
        position: relative;
        margin-left: calc(93% - 5rem);
        // margin-right: $general-margin;
        // bottom: 43rem;
        top: -43rem;

        // @include media($mobile-breakpoint) {
        //   bottom: 43.5rem;
        // }

        @include media($xtrasmall-breakpoint) {
          // bottom: 51.75rem;
          // right: 1.25rem;

          span {
            @include screenreader-only;
          }
        }
      } // /.nypl-x-close-button
    }

    // .nypl-popup-filter-overlay {
    //   //background: transparentize($nypl-white, 0);
    //   bottom: 0;
    //   left: 0;
    //   position: fixed;
    //   right: 0;
    //   top: 0;
    //   z-index: 2100;
    // }
  } // /.active
} // /@mixin popup