// 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.dialog.scss
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

@import "../../utilities/oj.utilities";

@if $includeDialogClasses != false {
  @include module-include-once("common.dialog") {
    /* dialog */
    /* --------------------------------------------------------------- */
    
    oj-dialog {
      display: none;
    }

    .oj-dialog-container {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      width: 100%;
      height: 100%;
      max-height: inherit;
    }
    
    /* defines the stacking context of the dialog and for it's children '**/
    .oj-dialog-layer {
      @extend .oj-component-layer;

        z-index: $dialogZindex;
      
    }

    .oj-dialog-layer.oj-focus-within {

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

    }

    .oj-dialog {
      @extend .oj-component-popup;
      width: 300px;
      min-width: 200px;
      height: auto;
      // note: min-height overrides height auto, so do not 
      //       specify min-height in combination with height:auto
      box-sizing: border-box;
        @include oj-box-shadow($dialogBoxShadow);
        background: $dialogBgColor;
        border: $dialogBorderWidth solid $dialogBorderColor;
        border-radius: $dialogBorderRadius;

    }

    // resizable oj-dialog should have absolute position
    .oj-dialog.oj-resizable {
      position: absolute;
    }

    .oj-dialog-header {
      border-width: 0 0 1px 0;
      border-style: solid;
      position: relative;
      // Use flex to align elements in the header (title and close icon)
      display: flex;
      justify-content: space-between;

        // the height of any bottom padding put on here plus the height of the close icon
        // would make the header too tall. Therefore the bottom padding is put on the title,
        // see the bottom margin in .oj-dialog-title
        padding: $dialogHeaderPadding;
        background-color: $dialogHeaderBgColor;
        @include oj-background-image($dialogHeaderBgImage);
        border-bottom-color: $dialogHeaderBorderColor;
        font-size: $dialogHeaderFontSize;
        color: $dialogHeaderTextColor;
        font-weight: $headerFontWeight;
        // The min-height provides a more consistent vertical centering of the header when the title font size varies due to browser-dependent font sizing differences.
        min-height: $buttonSmallHeight;

    }

    .oj-draggable .oj-dialog-header,
    .oj-draggable .oj-dialog-title { 
      cursor: move; 
    }

    @if $dialogCloseIconPosition == top or $dialogCloseIconPosition == center {
      // Vertically align the body with the close icon. 
      // Adjust margins so the the close button is positioned at the end of the dialog
      // Adjust horizontal padding so that a centered title does not collide with the close icon.

       .oj-dialog-header-close-wrapper { 
          $dialogPaddingSide: oj-shorthand-property-value-left($dialogHeaderPadding);
          @include oj-ltr() {
            margin-right: calc(0rem - #{$dialogPaddingSide});
          }
          @include oj-rtl() {    
            margin-left: calc(0rem - #{$dialogPaddingSide});
          }
        }
      }


    @if $dialogCloseIconPosition == top {
      // Adjust margins so the the close button is vertically positioned
      // in the top of the dialog header.
      // The class oj-dialog-header-close is asserted on the header div when there is a close button present.
      // We use this to adjust title padding when we have a close button

        .oj-dialog-header-close .oj-dialog-title {
          padding-top: calc(#{$buttonHeight} - #{oj-shorthand-property-value-top($dialogHeaderPadding)});
        }   
       .oj-dialog-header-close-wrapper { 
          margin-top: calc(0rem - #{oj-shorthand-property-value-top($dialogHeaderPadding)});
        }

    } @else if $dialogCloseIconPosition == center {
      // adjust margins so the the close button is vertically positioned
      // in the center of the dialog header.

       .oj-dialog-header-close-wrapper {
          margin-bottom: calc(0rem - #{oj-shorthand-property-value-top($dialogHeaderPadding)});
        }

    }

    .oj-dialog-title {
      overflow: hidden;
      cursor: default;


        @include oj-user-select-property(none);

      // vertically center-align the title within the header
      align-self: center;
      font-size: inherit;
      font-weight: inherit;
      margin:0;
      padding:0;
    }

    // The 'center' setting will center the dialog header text.
    // To achieve a centered title for dialogs that have
    // a close icon, we pad the side that does not have a close icon.
    @if $dialogHeaderTextAlign == center {
     .oj-dialog-header {
        justify-content: center;
        text-align: center;
      }   

      // For the header flex layout with a centered title, we realize the proper layout
      // by setting margin-left:auto when the header also has a close button.
      .oj-dialog-header-close .oj-dialog-title {
        margin-left:auto;
      }
      html:not([dir="rtl"]) .oj-dialog-header-close .oj-dialog-title {

          padding-left: calc(#{$dialogFooterButtonHeight} - #{oj-shorthand-property-value-left($dialogBodyPadding)});

      }
      html[dir="rtl"] .oj-dialog-header-close .oj-dialog-title {

          padding-right: calc(#{$dialogFooterButtonHeight} - #{oj-shorthand-property-value-left($dialogBodyPadding)});

        margin-right:auto;
      }
      html:not([dir="rtl"]) .oj-dialog-header-close-wrapper {
        margin-left:auto;
      }
    }

    // Padding between the dialog title and the close icon
    .oj-dialog-header-close .oj-dialog-title {
      @include oj-ltr() {
         padding-right: .2rem;
      }
      @include oj-rtl() {    
         padding-left: .2rem;
      }
    }

    .oj-dialog-content > p:last-child {
       margin-bottom: 0;
    }

    .oj-dialog-content {
       overflow: auto;
       position: relative;
       // enable momentum based scrolling for touch devices
       -webkit-overflow-scrolling: touch;
       // configure the dialog content to grow and shrink on resize
       flex: 1 1 auto;
    }

    .oj-dialog-body-wrapper {
      height: 100%;
    }
  
    .oj-dialog-body { 
      position: relative; 
      overflow: auto;   
      box-sizing: border-box;

      padding: $dialogBodyPadding;
      text-align: $dialogBodyTextAlign;

    }

   // optional footer separator
   //------------------------------------------
    .oj-dialog-footer-separator {

        border-top: 1px solid $dialogFooterDividerColor;

    }

    .oj-dialog-footer {
      display: flex;
      justify-content: flex-end;
      // Configure the footer content to be fixed height on resize.
      flex: 0 0 auto;

        padding: $dialogFooterPadding;

      @include oj-ltr() {
         text-align: right;
      }
      @include oj-rtl() {    
         text-align: left;
      }
    }

    .oj-dialog-footer > .oj-button,
    .oj-dialog-footer > .oj-button > .oj-button-button {

        height: $dialogFooterButtonHeight;
        font-weight: $dialogFooterButtonFontWeight;
        margin-left: $spacingSmall; // creates horizontal space between footer buttons

    }

    @if $dialogFooterIntegrateButtons == true {
      //
      // With this setting, buttons are integrated (spread) across the entire footer.
      // In addition:
      //   - there is a dividing line above the footer
      //   - there are dividing lines between the buttons
      //   - the first and last buttons have rounded corners
      // 
      .oj-dialog-footer > .oj-button,
      .oj-dialog-footer > .oj-button.oj-active,
      .oj-dialog-footer > .oj-button.oj-active.oj-focus,
      .oj-dialog-footer > .oj-button > .oj-button-button {
        margin: 0;
        flex:1;
      }

      html:not([dir="rtl"]) .oj-dialog-footer > .oj-button:not(:first-child),
      html:not([dir="rtl"]) .oj-dialog-footer > .oj-button.oj-active:not(:first-child),
      html:not([dir="rtl"]) .oj-dialog-footer > .oj-button.oj-active.oj-focus:not(:first-child),
      html:not([dir="rtl"]) .oj-dialog-footer > .oj-button:not(:first-child) > .oj-button-button,
      html[dir="rtl"] .oj-dialog-footer > .oj-button:not(:last-child),
      html[dir="rtl"] .oj-dialog-footer > .oj-button.oj-active:not(:last-child),
      html[dir="rtl"] .oj-dialog-footer > .oj-button.oj-active.oj-focus:not(:last-child),
      html[dir="rtl"] .oj-dialog-footer > .oj-button:not(:last-child) > .oj-button-button {

          border-color: transparent transparent transparent $dialogFooterDividerColor;

      }

      .oj-dialog-footer {

          border-top: 1px solid $dialogFooterDividerColor;

      }



        // Define radius of the first button
        .oj-dialog-footer > .oj-button:first-child {
          @include oj-ltr() {
            border-left-color: transparent;
            @include oj-border-radius(0 0 0 $dialogBorderRadius);
          }
          @include oj-rtl() {
            border-right-color: transparent;
            @include oj-border-radius(0 0 $dialogBorderRadius 0);
          }
        }

        // Define radius of the last button
        .oj-dialog-footer > .oj-button:last-child {
          @include oj-ltr() {
            @include oj-border-radius(0 0 $dialogBorderRadius 0);
          }
          @include oj-rtl() {
            @include oj-border-radius(0 0 0 $dialogBorderRadius);
          }
        }

    }

    // Disable Chrome's automatic blue outline on the dialog container,
    // the close wrapper, and the close icon.
    .oj-dialog:focus, .oj-dialog-header-close-wrapper:focus {
      outline:none;
    }

    // The oj-focus-highlight class applies focus styling that may not be desirable
    // when the focus results from pointer interaction (touch or mouse), but which is
    // needed for accessibility when the focus occurs by a non-pointer mechanism, for
    // example keyboard or initial page load. See also the $focusHighlightPolicy variable,
    // which controls when this class is set.
    // Apply this to the dialog container and the close wrapper.
   .oj-dialog.oj-focus-highlight,
   .oj-dialog-header-close-wrapper.oj-focus-highlight {

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

    }

    // 
    // In order to support the proper stacking context for animated nested dialogs,
    // we use the following selector to set the z-index of the animating dialog to
    // the top of the stack. Note that the dialog component adds the oj-animate-open
    // class when a dialog is animating during dialog open.
    // 
   .oj-dialog-layer.oj-focus-within,
   .oj-dialog-layer.oj-animate-open {

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

   }

  // icons
  //------------------------------------------

    // DIALOG animation defaults
    //----------------------------------
    $dialogAnimationDefaults: ();
 
    @if ($dialogOpenAnimation) {
      $dialogAnimationDefaults: map-merge($dialogAnimationDefaults, (open: $dialogOpenAnimation));
    }
 
    @if ($dialogCloseAnimation) {
      $dialogAnimationDefaults: map-merge($dialogAnimationDefaults, (close: $dialogCloseAnimation));
    }
    
    // option defaults
    //----------------------------------
    $dialogDefaultOptions: ();
 
    @if ($dialogAnimationDefaults) {
      $dialogDefaultOptions: map-merge($dialogDefaultOptions, (animation: $dialogAnimationDefaults));
    }

    @if ($dialogResizeBehaviorOptionDefault) {
      $dialogDefaultOptions: map-merge($dialogDefaultOptions, (resizeBehavior: $dialogResizeBehaviorOptionDefault));
    }
 
    @if ($dialogCancelBehaviorOptionDefault) {
      $dialogDefaultOptions: map-merge($dialogDefaultOptions, (cancelBehavior: $dialogCancelBehaviorOptionDefault));
    }
    
    @if ($dialogDragAffordanceOptionDefault) {
      $dialogDefaultOptions: map-merge($dialogDefaultOptions, (dragAffordance: $dialogDragAffordanceOptionDefault));
    }

    // component default options selector 
    .oj-dialog-option-defaults {
      font-family: oj-json-from-map($dialogDefaultOptions);
    }

  }
}