@import '../../themes/default/modules/popup.variables';

@if $use-popup {
  /*******************************
  //@-        Popup
  *******************************/

  .ui.popup {
    display: none;
    position: absolute;
    top: 0;
    right: 0;

    /* Fixes content being squished when inline (moz only) */
    min-width: min-content;
    z-index: $popup-z-index;

    border: $popup-border;
    line-height: $line-height;
    max-width: $popup-max-width;
    background: $popup-background;

    padding: $popup-vertical-padding $popup-horizontal-padding;
    font-weight: $popup-font-weight;
    font-style: $popup-font-style;
    color: $popup-color;

    border-radius: $popup-border-radius;
    box-shadow: $popup-box-shadow;
  }
  .ui.popup > .header {
    padding: 0;

    font-family: $header-font;
    font-size: $popup-header-font-size;
    line-height: $popup-header-line-height;
    font-weight: $popup-header-font-weight;
  }
  .ui.popup > .header + .content {
    padding-top: $popup-header-distance;
  }

  .ui.popup:before {
    position: absolute;
    content: '';
    width: $popup-arrow-size;
    height: $popup-arrow-size;

    background: $popup-arrow-background;
    transform: rotate(45deg);

    z-index: $popup-arrow-z-index;
    box-shadow: $popup-arrow-box-shadow;
  }

  /*******************************
              Types
  *******************************/

  /*--------------
      Tooltip
  ---------------*/

  /* Content */
  [data-tooltip] {
    position: relative;
  }

  /* Arrow */
  [data-tooltip]:before {
    pointer-events: none;
    position: absolute;
    content: '';
    font-size: $medium;
    width: $popup-arrow-size;
    height: $popup-arrow-size;

    background: $popup-tooltip-arrow-background;
    transform: rotate(45deg);

    z-index: $popup-arrow-z-index;
    box-shadow: $popup-tooltip-arrow-box-shadow;
  }

  /* Popup */
  [data-tooltip]:after {
    pointer-events: none;
    content: attr(data-tooltip);
    position: absolute;
    text-transform: none;
    text-align: left;
    white-space: nowrap;

    font-size: $popup-tooltip-font-size;

    border: $popup-tooltip-border;
    line-height: $popup-tooltip-line-height;
    max-width: $popup-tooltip-max-width;
    background: $popup-tooltip-background;

    padding: $popup-tooltip-padding;
    font-weight: $popup-tooltip-font-weight;
    font-style: $popup-tooltip-font-style;
    color: $popup-tooltip-color;

    border-radius: $popup-tooltip-border-radius;
    box-shadow: $popup-tooltip-box-shadow;
    z-index: $popup-tooltip-z-index;
  }

  /* Default Position (Top Center) */
  [data-tooltip]:not([data-position]):before {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 50%;
    background: $popup-tooltip-arrow-bottom-background;
    margin-left: $popup-tooltip-arrow-horizontal-offset;
    margin-bottom: -$popup-tooltip-arrow-vertical-offset;
  }
  [data-tooltip]:not([data-position]):after {
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: $popup-tooltip-distance-away;
  }

  /* Animation */
  [data-tooltip]:before,
  [data-tooltip]:after {
    pointer-events: none;
    visibility: hidden;
  }
  [data-tooltip]:before {
    opacity: 0;
    transform: rotate(45deg) scale(0) !important;
    transform-origin: center top;
    transition:
      all $popup-tooltip-duration $popup-tooltip-easing
    ;
  }
  [data-tooltip]:after {
    opacity: 1;
    transform-origin: center bottom;
    transition:
      all $popup-tooltip-duration $popup-tooltip-easing
    ;
  }
  [data-tooltip]:hover:before,
  [data-tooltip]:hover:after {
    visibility: visible;
    pointer-events: auto;
  }
  [data-tooltip]:hover:before {
    transform: rotate(45deg) scale(1) !important;
    opacity: 1;
  }

  /* Animation Position */
  [data-tooltip]:after,
  [data-tooltip][data-position="top center"]:after,
  [data-tooltip][data-position="bottom center"]:after {
    transform: translateX(-50%) scale(0) !important;
  }
  [data-tooltip]:hover:after,
  [data-tooltip][data-position="bottom center"]:hover:after {
    transform: translateX(-50%) scale(1) !important;
  }
  [data-tooltip][data-position="left center"]:after,
  [data-tooltip][data-position="right center"]:after {
    transform: translateY(-50%) scale(0) !important;
  }
  [data-tooltip][data-position="left center"]:hover:after,
  [data-tooltip][data-position="right center"]:hover:after {
    transform: translateY(-50%) scale(1) !important;
  }
  [data-tooltip][data-position="top left"]:after,
  [data-tooltip][data-position="top right"]:after,
  [data-tooltip][data-position="bottom left"]:after,
  [data-tooltip][data-position="bottom right"]:after {
    transform: scale(0) !important;
  }
  [data-tooltip][data-position="top left"]:hover:after,
  [data-tooltip][data-position="top right"]:hover:after,
  [data-tooltip][data-position="bottom left"]:hover:after,
  [data-tooltip][data-position="bottom right"]:hover:after {
    transform: scale(1) !important;
  }


  /*--------------
      Inverted
  ---------------*/

  /* Arrow */
  [data-tooltip][data-inverted]:before {
    box-shadow: none !important;
  }

  /* Arrow Position */
  [data-tooltip][data-inverted]:before {
    background: $popup-inverted-arrow-bottom-background;
  }

  /* Popup  */
  [data-tooltip][data-inverted]:after {
    background: $popup-tooltip-inverted-background;
    color: $popup-tooltip-inverted-color;
    border: $popup-tooltip-inverted-border;
    box-shadow: $popup-tooltip-inverted-box-shadow;
  }
  [data-tooltip][data-inverted]:after .header {
    background: $popup-tooltip-inverted-header-background;
    color: $popup-tooltip-inverted-header-color;
  }

  /*--------------
      Position
  ---------------*/

  /* Top Center */
  [data-position="top center"][data-tooltip]:after {
    top: auto;
    right: auto;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: $popup-tooltip-distance-away;
  }
  [data-position="top center"][data-tooltip]:before {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 50%;
    background: $popup-tooltip-arrow-top-background;
    margin-left: $popup-tooltip-arrow-horizontal-offset;
    margin-bottom: -$popup-tooltip-arrow-vertical-offset;
  }

  /* Top Left */
  [data-position="top left"][data-tooltip]:after {
    top: auto;
    right: auto;
    left: 0;
    bottom: 100%;
    margin-bottom: $popup-tooltip-distance-away;
  }
  [data-position="top left"][data-tooltip]:before {
    top: auto;
    right: auto;
    bottom: 100%;
    left: $popup-arrow-distance-from-edge;
    margin-left: $popup-tooltip-arrow-horizontal-offset;
    margin-bottom: -$popup-tooltip-arrow-vertical-offset;
  }

  /* Top Right */
  [data-position="top right"][data-tooltip]:after {
    top: auto;
    left: auto;
    right: 0;
    bottom: 100%;
    margin-bottom: $popup-tooltip-distance-away;
  }
  [data-position="top right"][data-tooltip]:before {
    top: auto;
    left: auto;
    bottom: 100%;
    right: $popup-arrow-distance-from-edge;
    margin-left: $popup-tooltip-arrow-horizontal-offset;
    margin-bottom: -$popup-tooltip-arrow-vertical-offset;
  }


  /* Bottom Center */
  [data-position="bottom center"][data-tooltip]:after {
    bottom: auto;
    right: auto;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: $popup-tooltip-distance-away;
  }
  [data-position="bottom center"][data-tooltip]:before {
    bottom: auto;
    right: auto;
    top: 100%;
    left: 50%;
    margin-left: $popup-tooltip-arrow-horizontal-offset;
    margin-top: -$popup-tooltip-arrow-vertical-offset;
  }

  /* Bottom Left */
  [data-position="bottom left"][data-tooltip]:after {
    left: 0;
    top: 100%;
    margin-top: $popup-tooltip-distance-away;
  }
  [data-position="bottom left"][data-tooltip]:before {
    bottom: auto;
    right: auto;
    top: 100%;
    left: $popup-arrow-distance-from-edge;
    margin-left: $popup-tooltip-arrow-horizontal-offset;
    margin-top: -$popup-tooltip-arrow-vertical-offset;
  }

  /* Bottom Right */
  [data-position="bottom right"][data-tooltip]:after {
    right: 0;
    top: 100%;
    margin-top: $popup-tooltip-distance-away;
  }
  [data-position="bottom right"][data-tooltip]:before {
    bottom: auto;
    left: auto;
    top: 100%;
    right: $popup-arrow-distance-from-edge;
    margin-left: $popup-tooltip-arrow-vertical-offset;
    margin-top: -$popup-tooltip-arrow-horizontal-offset;
  }

  /* Left Center */
  [data-position="left center"][data-tooltip]:after {
    right: 100%;
    top: 50%;
    margin-right: $popup-tooltip-distance-away;
    transform: translateY(-50%);
  }
  [data-position="left center"][data-tooltip]:before {
    right: 100%;
    top: 50%;
    margin-top: $popup-tooltip-arrow-vertical-offset;
    margin-right: $popup-tooltip-arrow-horizontal-offset;
  }

  /* Right Center */
  [data-position="right center"][data-tooltip]:after {
    left: 100%;
    top: 50%;
    margin-left: $popup-tooltip-distance-away;
    transform: translateY(-50%);
  }
  [data-position="right center"][data-tooltip]:before {
    left: 100%;
    top: 50%;
    margin-top: $popup-tooltip-arrow-horizontal-offset;
    margin-left: -$popup-tooltip-arrow-vertical-offset;
  }

  /* Arrow */
  [data-position~="bottom"][data-tooltip]:before {
    background: $popup-arrow-top-background;
    box-shadow: $popup-bottom-arrow-box-shadow;
  }
  [data-position="left center"][data-tooltip]:before {
    background: $popup-arrow-center-background;
    box-shadow: $popup-left-arrow-box-shadow;
  }
  [data-position="right center"][data-tooltip]:before {
    background: $popup-arrow-center-background;
    box-shadow: $popup-right-arrow-box-shadow;
  }
  [data-position~="top"][data-tooltip]:before {
    background: $popup-arrow-bottom-background;
  }

  /* Inverted Arrow Color */
  [data-inverted][data-position~="bottom"][data-tooltip]:before {
    background: $popup-inverted-arrow-top-background;
    box-shadow: $popup-bottom-arrow-box-shadow;
  }
  [data-inverted][data-position="left center"][data-tooltip]:before {
    background: $popup-inverted-arrow-center-background;
    box-shadow: $popup-left-arrow-box-shadow;
  }
  [data-inverted][data-position="right center"][data-tooltip]:before {
    background: $popup-inverted-arrow-center-background;
    box-shadow: $popup-right-arrow-box-shadow;
  }
  [data-inverted][data-position~="top"][data-tooltip]:before {
    background: $popup-inverted-arrow-bottom-background;
  }

  [data-position~="bottom"][data-tooltip]:before {
    transform-origin: center bottom;
  }
  [data-position~="bottom"][data-tooltip]:after {
    transform-origin: center top;
  }
  [data-position="left center"][data-tooltip]:before {
    transform-origin: top center;
  }
  [data-position="left center"][data-tooltip]:after {
    transform-origin: right center;
  }
  [data-position="right center"][data-tooltip]:before {
    transform-origin: right center;
  }
  [data-position="right center"][data-tooltip]:after {
    transform-origin: left center;
  }

  /*--------------
      Size
  ---------------*/

  [data-tooltip][data-variation~="mini"]:before,
  [data-tooltip][data-variation~="mini"]:after {
    font-size: $mini;
  }
  [data-tooltip][data-variation~="tiny"]:before,
  [data-tooltip][data-variation~="tiny"]:after {
    font-size: $tiny;
  }
  [data-tooltip][data-variation~="small"]:before,
  [data-tooltip][data-variation~="small"]:after {
    font-size: $small;
  }
  [data-tooltip][data-variation~="medium"]:before,
  [data-tooltip][data-variation~="medium"]:after {
    font-size: $medium;
  }
  [data-tooltip][data-variation~="large"]:before,
  [data-tooltip][data-variation~="large"]:after {
    font-size: $large;
  }
  [data-tooltip][data-variation~="huge"]:before,
  [data-tooltip][data-variation~="huge"]:after {
    font-size: $huge;
  }

  /*--------------
      Basic
  ---------------*/
  [data-tooltip][data-variation~="basic"]:before {
    display: none;
  }

  /*--------------
      Spacing
  ---------------*/

  .ui.popup {
    margin: 0;
  }

  /* Extending from Top */
  .ui.top.popup {
    margin: 0 0 $popup-distance-away;
  }
  .ui.top.left.popup {
    transform-origin: left bottom;
  }
  .ui.top.center.popup {
    transform-origin: center bottom;
  }
  .ui.top.right.popup {
    transform-origin: right bottom;
  }

  /* Extending from Vertical Center */
  .ui.left.center.popup {
    margin: 0 $popup-distance-away 0 0;
    transform-origin: right 50%;
  }
  .ui.right.center.popup {
    margin: 0 0 0 $popup-distance-away;
    transform-origin: left 50%;
  }

  /* Extending from Bottom */
  .ui.bottom.popup {
    margin: $popup-distance-away 0 0;
  }
  .ui.bottom.left.popup {
    transform-origin: left top;
  }
  .ui.bottom.center.popup {
    transform-origin: center top;
  }
  .ui.bottom.right.popup {
    transform-origin: right top;
  }

  /*--------------
      Pointer
  ---------------*/

  /*--- Below ---*/
  .ui.bottom.center.popup:before {
    margin-left: $popup-arrow-offset;
    top: $popup-arrow-offset;
    left: 50%;
    right: auto;
    bottom: auto;
    box-shadow: $popup-bottom-arrow-box-shadow;
  }

  .ui.bottom.left.popup {
    margin-left: $popup-box-arrow-offset;
  }
  /*rtl:rename*/
  .ui.bottom.left.popup:before {
    top: $popup-arrow-offset;
    left: $popup-arrow-distance-from-edge;
    right: auto;
    bottom: auto;
    margin-left: 0;
    box-shadow: $popup-bottom-arrow-box-shadow;
  }

  .ui.bottom.right.popup {
    margin-right: $popup-box-arrow-offset;
  }
  /*rtl:rename*/
  .ui.bottom.right.popup:before {
    top: $popup-arrow-offset;
    right: $popup-arrow-distance-from-edge;
    bottom: auto;
    left: auto;
    margin-left: 0;
    box-shadow: $popup-bottom-arrow-box-shadow;
  }

  /*--- Above ---*/
  .ui.top.center.popup:before {
    top: auto;
    right: auto;
    bottom: $popup-arrow-offset;
    left: 50%;
    margin-left: $popup-arrow-offset;
  }
  .ui.top.left.popup {
    margin-left: $popup-box-arrow-offset;
  }
  /*rtl:rename*/
  .ui.top.left.popup:before {
    bottom: $popup-arrow-offset;
    left: $popup-arrow-distance-from-edge;
    top: auto;
    right: auto;
    margin-left: 0;
  }
  .ui.top.right.popup {
    margin-right: $popup-box-arrow-offset;
  }
  /*rtl:rename*/
  .ui.top.right.popup:before {
    bottom: $popup-arrow-offset;
    right: $popup-arrow-distance-from-edge;
    top: auto;
    left: auto;
    margin-left: 0;
  }

  /*--- Left Center ---*/
  /*rtl:rename*/
  .ui.left.center.popup:before {
    top: 50%;
    right: $popup-arrow-offset;
    bottom: auto;
    left: auto;
    margin-top: $popup-arrow-offset;
    box-shadow: $popup-left-arrow-box-shadow;
  }

  /*--- Right Center  ---*/
  /*rtl:rename*/
  .ui.right.center.popup:before {
    top: 50%;
    left: $popup-arrow-offset;
    bottom: auto;
    right: auto;
    margin-top: $popup-arrow-offset;
    box-shadow: $popup-right-arrow-box-shadow;
  }

  /* Arrow Color By Location */
  .ui.bottom.popup:before {
    background: $popup-arrow-top-background;
  }
  .ui.right.center.popup:before,
  .ui.left.center.popup:before {
    background: $popup-arrow-center-background;
  }
  .ui.top.popup:before {
    background: $popup-arrow-bottom-background;
  }

  /* Inverted Arrow Color */
  .ui.inverted.bottom.popup:before {
    background: $popup-inverted-arrow-top-background;
  }
  .ui.inverted.right.center.popup:before,
  .ui.inverted.left.center.popup:before {
    background: $popup-inverted-arrow-center-background;
  }
  .ui.inverted.top.popup:before {
    background: $popup-inverted-arrow-bottom-background;
  }


  /*******************************
              Coupling
  *******************************/

  /* Immediate Nested Grid */
  .ui.popup > .ui.grid:not(.padded) {
    width: $popup-nested-grid-width;
    margin: $popup-nested-grid-margin;
  }

  /*******************************
              States
  *******************************/

  .ui.loading.popup {
    display: block;
    visibility: hidden;
    z-index: $popup-loading-z-index;
  }

  .ui.animating.popup,
  .ui.visible.popup {
    display: block;
  }

  .ui.visible.popup {
    transform: translateZ(0);
    backface-visibility: hidden;
  }


  /*******************************
              Variations
  *******************************/

  /*--------------
      Basic
  ---------------*/

  .ui.basic.popup:before {
    display: none;
  }


  /*--------------
      Wide
  ---------------*/

  .ui.wide.popup {
    max-width: $popup-wide-width;
  }
  .ui[class*="very wide"].popup {
    max-width: $popup-very-wide-width;
  }

  @media only screen and (max-width: $largest-mobile-screen) {
    .ui.wide.popup,
    .ui[class*="very wide"].popup {
      max-width: $popup-max-width;
    }
  }


  /*--------------
      Fluid
  ---------------*/

  .ui.fluid.popup {
    width: 100%;
    max-width: none;
  }


  @if($use-popup-variation-inverted) {
    /*--------------
        Colors
    ---------------*/

    /* Inverted colors  */
    .ui.inverted.popup {
      background: $popup-inverted-background;
      color: $popup-inverted-color;
      border: $popup-inverted-border;
      box-shadow: $popup-inverted-box-shadow;
    }
    .ui.inverted.popup .header {
      background-color: $popup-inverted-header-background;
      color: $popup-inverted-header-color;
    }
    .ui.inverted.popup:before {
      background-color: $popup-inverted-arrow-color;
      box-shadow: none !important;
    }
  }

  /*--------------
      Flowing
  ---------------*/

  .ui.flowing.popup {
    max-width: none;
  }


  /*--------------
      Sizes
  ---------------*/

  .ui.mini.popup {
    font-size: $mini;
  }
  .ui.tiny.popup {
    font-size: $tiny;
  }
  .ui.small.popup {
    font-size: $small;
  }
  .ui.popup {
    font-size: $medium;
  }
  .ui.large.popup {
    font-size: $large;
  }
  .ui.huge.popup {
    font-size: $huge;
  }
}

@import '../../themes/default/modules/popup.style';