// Copyright (c) 2014, 2026, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// WARNING: do not directly import this file, instead import the 
//          version in your base theme's directory, 
//          for example alta/widgets/_oj.alta.popup.scss
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

//-------------------------------------------------------------------------------------------------
// Creates a popup tail using a SVG data URL. The point $x1,$y1 and $x3,$y3 must align to the popup.
//-------------------------------------------------------------------------------------------------

@function oj-popup-tail-url($edge, $width, $height, $borderColor, $borderWidth, $fillColor, $x1, $y1, $x2, $y2, $x3, $y3) {
  @if function-exists(oj-popup-tail-url-delegate) {
    @return oj-popup-tail-url-delegate($edge, $width, $height, $borderColor, $borderWidth, $fillColor, $x1, $y1, $x2, $y2, $x3, $y3);
  } @else {
      @return oj-svg-url(
        "<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='#{$height}'><polygon points='#{$x1},#{$y1} #{$x2},#{$y2} #{$x3},#{$y3}' style='fill:#{$fillColor};stroke:#{$fillColor};stroke-width:1;fill-rule:evenodd;'/><g style='stroke:#{$borderColor};stroke-width:#{$borderWidth};'><line x1='#{$x1}' y1='#{$y1}' x2='#{$x2}' y2='#{$y2}'/><line x1='#{$x3}' y1='#{$y3}' x2='#{$x2}' y2='#{$y2}'/></g></svg>");
  }
}

@if $includePopupClasses != false {
  @include module-include-once("common.popup") {
    /* popup */
    /* --------------------------------------------------------------- */

    oj-popup {
      display: none;
    }

    /* defines the stacking context for the popup and its children */
    .oj-popup-layer {
      @extend .oj-component-layer;

        z-index: $popupZindex;

    }
    .oj-popup-layer.oj-focus-within {

        z-index: calc(#{$popupZindex} + 1);

    }
    .oj-popup-layer.oj-popup-tail-simple {

        z-index: $popupTailZindex;

    }
    .oj-popup-layer.oj-popup-tail-simple.oj-focus-within {

        z-index: calc(#{$popupTailZindex} + 1);

    }
    .oj-popup {
      @extend .oj-component-popup;

        border: $popupBorderWidth solid $popupBorderColor;
        @include oj-border-radius($popupBorderRadius);
        background-color: $popupBgColor;
        @include oj-box-shadow($popupBoxShadow);

      will-change: top, left;
    }
    .oj-popup:not(.oj-popup-tail-simple) {
      overflow: auto;
    }
    .oj-popup.oj-popup-tail-simple {

        @include oj-box-shadow($popupTailBoxShadow);
        border-width: $popupTailBorderWidth;
        border-color: $popupTailBorderColor;
        background-color: $popupTailBgcolor;

      will-change: top, left, bottom, right;
    }
    .oj-popup.oj-popup-no-chrome {
      border-width: 0;
      background-color: transparent;

        @include oj-box-shadow(none);
        @include oj-border-radius(0);

    }
    .oj-popup-content {

        padding: $panelPadding;

    }
    .oj-popup-no-chrome > .oj-popup-content {
      padding: 0;
    }
    // Disable the focus ring if the popup was open from a mouse gesture
    .oj-popup:not(.oj-focus-highlight):focus {
      outline:none;
    }
    
    .oj-popup.oj-focus-highlight {

        @include oj-browser-focus-outline-approximation($primaryTextColor);

    }
    
    .oj-popup-tail {
      position: absolute;
      pointer-events: none;
    }
    .oj-popup-tail.oj-popup-tail-simple {
      @extend .oj-component-icon;

        height: $popupTailSimpleHeight;
        width: $popupTailSimpleWidth;

      font-size: 0;
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top,
    .oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle,
    .oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom {

        left: calc(0px - #{$popupTailSimpleWidth});

    }
    .oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top,
    .oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle,
    .oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom {

        right: calc(0px - #{$popupTailSimpleWidth});

    }
    .oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top,
    .oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top {
      top: 0;
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom,
    .oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom {
      bottom: 0;
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle,
    .oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle {
      top: 50%;
    } 
    .oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top,
    .oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom {
      left: 50%;
    } 
    .oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top {
      @include oj-icon-content(
        $icon: oj-popup-tail-url('left-top', $popupTailSimpleWidth, $popupTailSimpleHeight, $popupTailBorderColor, $popupTailBorderWidthRawValue, $popupTailBgcolor, $popupTailSimpleWidthRawValue, $popupTailSimpleHeightRawValue, 0, 0, $popupTailSimpleWidthRawValue, round($popupTailSimpleHeightRawValue * 0.25))
      );
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle {
      @include oj-icon-content(
        $icon: oj-popup-tail-url('left-middle', $popupTailSimpleWidth, $popupTailSimpleHeight, $popupTailBorderColor, $popupTailBorderWidthRawValue, $popupTailBgcolor, $popupTailSimpleWidthRawValue, 0, 0, ($popupTailSimpleWidthRawValue / 2), $popupTailSimpleWidthRawValue, $popupTailSimpleHeightRawValue)
      );
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom {
      @include oj-icon-content(
        $icon: oj-popup-tail-url('left-bottom', $popupTailSimpleWidth, $popupTailSimpleHeight, $popupTailBorderColor, $popupTailBorderWidthRawValue, $popupTailBgcolor, $popupTailSimpleWidthRawValue, 0, 0, $popupTailSimpleHeightRawValue, $popupTailSimpleWidthRawValue, round($popupTailSimpleHeightRawValue * 0.75))
      );
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top {
      @include oj-icon-content(
        $icon: oj-popup-tail-url('right-top', $popupTailSimpleWidth, $popupTailSimpleHeight, $popupTailBorderColor, $popupTailBorderWidthRawValue, $popupTailBgcolor, 0, round($popupTailSimpleHeightRawValue * 0.25), $popupTailSimpleWidthRawValue, 0, 0, $popupTailSimpleHeightRawValue)
      );
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle {
      @include oj-icon-content(
        $icon: oj-popup-tail-url('right-middle', $popupTailSimpleWidth, $popupTailSimpleHeight, $popupTailBorderColor, $popupTailBorderWidthRawValue, $popupTailBgcolor, 0, 0, $popupTailSimpleWidthRawValue, ($popupTailSimpleHeightRawValue / 2), 0, $popupTailSimpleHeightRawValue)
      );
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom {
      @include oj-icon-content(
        $icon: oj-popup-tail-url('right-bottom', $popupTailSimpleWidth, $popupTailSimpleHeight, $popupTailBorderColor, $popupTailBorderWidthRawValue, $popupTailBgcolor, 0, 0, $popupTailSimpleWidthRawValue, $popupTailSimpleHeightRawValue, 0, round($popupTailSimpleHeightRawValue * .75))
      );
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top {

        top: calc(0px - #{$popupTailSimpleHeight});

      @include oj-icon-content(
        $icon: oj-popup-tail-url('center-top', $popupTailSimpleWidth, $popupTailSimpleHeight, $popupTailBorderColor, $popupTailBorderWidthRawValue, $popupTailBgcolor, 0, $popupTailSimpleHeightRawValue, ($popupTailSimpleWidthRawValue / 2), 0, $popupTailSimpleWidthRawValue, $popupTailSimpleHeightRawValue)
      );
    }
    .oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom {

        bottom: calc(0px - #{$popupTailSimpleHeight});
      
      @include oj-icon-content(
        $icon: oj-popup-tail-url('center-bottom', $popupTailSimpleWidth, $popupTailSimpleHeight, $popupTailBorderColor, $popupTailBorderWidthRawValue, $popupTailBgcolor, 0, 0, ($popupTailSimpleWidthRawValue / 2), $popupTailSimpleHeightRawValue, $popupTailSimpleWidthRawValue, 0)
      );
    }

    // IE11 override - needs a block display or blows out the svg image outside 
    // boundaries of the tail dom rect
    .oj-popup-tail.oj-popup-tail-simple.oj-left.oj-top:before,
    .oj-popup-tail.oj-popup-tail-simple.oj-left.oj-middle:before,
    .oj-popup-tail.oj-popup-tail-simple.oj-left.oj-bottom:before,
    .oj-popup-tail.oj-popup-tail-simple.oj-right.oj-top:before,
    .oj-popup-tail.oj-popup-tail-simple.oj-right.oj-middle:before,
    .oj-popup-tail.oj-popup-tail-simple.oj-right.oj-bottom:before,
    .oj-popup-tail.oj-popup-tail-simple.oj-center.oj-top:before,
    .oj-popup-tail.oj-popup-tail-simple.oj-center.oj-bottom:before {
      display: block;
    }
  }
}