@charset "UTF-8";
/* POPUP and OVERLAY */

/* A popup (or dialog) is a window that elicits a response from the user.
   Many dialogs let people provide several responses at once.
   A popup can contain any type of content:
   - As an alert it provides important information about an error condition
    or warns the user about a potentially hazardous situation or consequence.
   - As a modal or panel it may provide additional information related to the active document or selection,
    controls concerning a task or a list of possible options to choose from.

   Both popup and popout need additional DOM structures and styling â€” e.g. boxes, frames, lists and buttons.
   They just provide a basic container that can be positioned with several modifiers (--n, --e, --s, --w, --local etc.).

   A popup is invisible at first, but can be activated via .is-active status.
   It appears above other content onscreen and can hide/block it with an overlay.
*/

@popup-width: 33%;
@popup-maxWidth: @pageWidth/2;
@popup-outerSpace: @outerSpace;
@popup-borderRadius: @defaultBorderRadius;
@popup-overlayColor: @clearColor;

.genericPopup(
  @width: @popup-width;
  @maxWidth: @popup-maxWidth;
  @outerSpace: @popup-outerSpace;
  @borderRadius: @popup-borderRadius;
  @overlayColor: @popup-overlayColor;
  ){
  opacity: 0;
  position: fixed;
  transition: all .3s ease;
  .zIndex('background',-1);
  pointer-events: none;
  width: 90%;
  max-height: ~"calc(100vh - "2 * @outerSpace~")";
  transform: translateX(-50%);
  left:50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .border-radius(@borderRadius);
  .boxShadow(2, #000);
  // A local popup that positions absolute to the surrounding container.
  &&--local {
    position: absolute;
    max-height: 95%;
    .boxShadow(1, #000);
  }

  &.is-active {
    .zIndex('overlay', 1);
    opacity: 1;
    pointer-events: auto;
  }

  // An overlay to hide the rest of the page.
  &-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    background:fadeout(@overlayColor,100%);
    transition: all .3s ease;
    .zIndex('background',-1);

  }
  &.is-active ~ &-overlay,
  &-overlay.is-active {
    pointer-events: auto;
    opacity: 1;
    background:fadeout(@overlayColor,40%);
    .zIndex('overlay',0)
  }

  .mq-min(@breakMedium, {
    max-width: @maxWidth;
    width: @width;
    &--wide {
      width: 75%;
    }
  });

  // Positioning of the popup
  &--center {
    top: 40%;
    transform: translate(-50%, ~"calc(-100% - "@outerSpace + 5px~")");
    bottom: inherit;
    &.is-active {
      transform: translate(-50%, -40%);
    }
  }

  &--s,
  &--se,
  &--sw {
    bottom: @outerSpace;
    transform: translate(0, ~"calc(100% + "@outerSpace + 5px~")");
    top: inherit;
  }
  &--s {
    transform: translate(-50%, ~"calc(100% + "@outerSpace + 5px~")");
    &.is-active {
      transform: translate(-50%, 0);
    }
  }
  &--se {
    right: @outerSpace;
    left: inherit;
    &.is-active {
      transform: none;
    }
  }
  &--sw {
    left: @outerSpace;
    &.is-active {
      transform: none;
    }
  }

  &--n,
  &--ne,
  &--nw {
    top: @outerSpace;
    transform: translate(0, ~"calc(-100% - "@outerSpace + 5px~")");
    bottom: inherit;
  }

  &--n {
    transform: translate(-50%, ~"calc(-100% - "@outerSpace + 5px~")");
    &.is-active {
      transform: translate(-50%, 0);
    }
  }
  &--ne {
    right: @outerSpace;
    left: inherit;
    &.is-active {
      transform: none;
    }
  }
  &--nw {
    left: @outerSpace;
    &.is-active {
      transform: none;
    }
  }

  &--w,
  &--e {
    top: 50%;
    bottom: inherit;
    &.is-active {
      transform: translate(0, -50%);
    }
  }
  &--e {
    right: @outerSpace;
    transform: translate(~"calc(100% + "@outerSpace + 5px~")", -50%);
    left: inherit;
  }
  &--w {
    left: @outerSpace;
    transform: translate(~"calc(-100% - "@outerSpace + 5px~")", -50%);
  }
}
