@charset "UTF-8";
/* POPOUT */

/* A popout (or popover) is a view that appears above other content onscreen when you click a control or view.
   For example, an information button may display extra information in a popout when you click on it.
   Typically, a popout includes an arrow pointing to the location from which it emerged.

   Both popout and popup 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 etc.).

   A popout is invisible at first, but can be activated via {popout}-opener:hover or .is-active status.
*/

@popout-backgroundColor:#fff;
@popout-arrowColor: #f2f2f2;
@popout-minWidth: 250px;
@popout-maxWidth: @pageWidth/2.5;
@popout-borderRadius: @defaultBorderRadius;

.genericPopout(
  @self: popout;
  @backgroundColor: @popout-backgroundColor;
  @arrow: true;
  @arrowColor: @popout-arrowColor;
  @minWidth: @popout-minWidth;
  @maxWidth: @popout-maxWidth;
  @borderRadius: @popout-borderRadius;
  ) {
  opacity: 0;
  position: absolute;
  transition: all .3s ease;
  pointer-events: none;
  .boxShadow(2, #000);
  min-width: @minWidth;
  max-width: @maxWidth;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  .border-radius(@borderRadius);
  &:before {
    content: '';
    display: block;
    z-index: -1;
    width: ~'calc(100% + 40px)';
    height: ~'calc(100% + 40px)';
    position: absolute;
    left: -20px;
    top: -20px;
  }
  .mq-min(@breakMedium, {
    width: auto;
  });

  // Anchor location from which the popout emerges
  &-anchor {
    position: relative;
    width: fit-content;
    align-self: stretch;
    display: flex;

    &:before {
      position: absolute;
      transition: all .3s ease;
      display: inline-block;
      width: 0;
      height: 0;
      color: @arrowColor;
      pointer-events: none;
      border: 10px solid transparent;
      filter: drop-shadow(1px 1px 0px #aaa);
      .zIndex('overlay', 2);
    }
  }
  // The popout will only show on hover or focus, if the opener class is provided!
  // Otherwise the .is-active class is needed to activate the popout.
  &-anchor&-opener:hover:before,
  &-anchor.is-active:before {
    content: "";
  }
  &-opener:hover > &,
  .is-active > & {
    .zIndex('overlay', 1);
    opacity: 1;
    pointer-events: auto;
  }

  // Positioning of the popout
  &--s,
  &--se,
  &--sw {
    .@{self} {
      bottom:0;
    }
    &:before {
      bottom: 0;
      right: 50%;
      margin-right: -10px;
      margin-bottom: -13px;
      border-bottom-color: @arrowColor;
      filter: drop-shadow(0px -1px 0px #aaa);
    }
  }
  &--s & {
    transform: translate(-50%, ~'calc(100% + 12px)');
    left: 50%;
  }
  &--se & {
    transform: translate(0, ~'calc(100% + 12px)');
    left: 0;
  }
  &--sw & {
    transform: translate(0, ~'calc(100% + 12px)');
    right: 0;
  }


  &--n,
  &--ne,
  &--nw {
    & .@{self} {
      transform: translate(-50%, ~'calc(-100% - 12px)');
      top: 0;
    }
    &:before {
      right: 50%;
      top: 0;
      margin-right: -10px;
      margin-top: -13px;
      border-top-color: @arrowColor;
      filter: drop-shadow(0px 1px 0px #aaa);
    }
  }
  &--n & {
    left: 50%;
  }
  &--ne & {
    left: 100%;
  }
  &--nw & {
    left: 0;
  }

  &--w,
  &--e {
    & .@{self} {
      top: 50%;
      transform: translate(0, -50%);
    }
  }
  &--e,
  &--en,
  &--es {
    & .@{self} {
      right: 0;
    }
    &.@{self}-opener:hover .@{self},
    &.is-active .@{self} {
      transform: translate(~'calc(100% + 12px)', -50%);
    }
    &:before {
      top: 50%;
      right: -13px;
      bottom: 50%;
      margin-top: -10px;
      border-right-color: @arrowColor;
      filter: drop-shadow(-1px 0px 0px #aaa);
    }
  }
  &--w,
  &--wn,
  &--ws {
    & .@{self} {
      left: 0;
    }
    &.@{self}-opener:hover .@{self},
    &.is-active .@{self} {
      transform: translate(~'calc(-100% - 12px)', -50%);
    }
    &:before {
      top: 50%;
      bottom: 50%;
      left: -13px;
      margin-top: -10px;
      border-left-color: @arrowColor;
      filter: drop-shadow(1px 0px 0px #aaa);
    }
  }

  &--wn,
  &--en {
    & .@{self} {
      top: 0;
    }
  }
  &--es,
  &--ws {
    & .@{self} {
      top: 100%;
    }
  }
}


