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

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

@if $includeMessagingClasses != false {
  @include module-include-once("common.messaging") {

    /* messaging */
    /* --------------------------------------------------------------- */

    /* styles the root of the popup component that wraps all messaging content */
    
    /* wraps all messaging content that displays inside popup. */
    .oj-messaging-popup-container {
      max-width: 320px; 
    }
    
    /* separator inside popup container */
    .oj-messaging-popup-container hr {
      margin-top: 20px;
      margin-bottom: 10px;
    }

    /* prevent messaging content from overflowing the container */
    .oj-messaging-inline-container {
      overflow: hidden;
    }

     /* wraps all messaging content that displays inline */
    .oj-messaging-inline-container .oj-message {
      padding: 10px;
      border-style: solid;
      border-width: 0 1px 1px 1px;


       
         margin-top: $messageComponentInlineMarginTop;
         border-top-width: $messageComponentInlineBorderTopWidth;
         border-radius:$messageComponentInlineBorderRadius;

    }
    
   .oj-checkboxset .oj-messaging-inline-container .oj-message:first-child,
   .oj-radioset .oj-messaging-inline-container .oj-message:first-child {

      // if theme doesn't have a border around the radioset/checkboxset, it needs to 
      // detach even if the border-radius is 0.
      @if(($radioCheckboxSetBorderColor == null or $radioCheckboxSetBorderColor == transparent)) {

          margin-top: 5px;
          border-top-width: 1px;

      }
      @else
        {
          margin-top: 0;
          border-top-width: 0;
        }
     

   }

    // For these components it needs a top border regardless of border radius.
    .oj-switch .oj-messaging-inline-container .oj-message:first-child,
    .oj-slider .oj-messaging-inline-container .oj-message:first-child {
      border-top-width: 1px;
    }
    
    // switch and slider always needs room between the component and the inline message.
    .oj-switch .oj-messaging-inline-container .oj-message:first-child,
    .oj-slider .oj-messaging-inline-container .oj-message:first-child {
      margin-top: 5px;
    }  
    
    // the vertical slider's thumb is positioned into the message container, so we need extra margin
    .oj-slider-vertical .oj-messaging-inline-container .oj-message:first-child {
      margin-top: 18px;
    }

    // red box
    .oj-messaging-inline-container .oj-message.oj-message-error {

        background-color: $messageComponentInlineBgColorError;
        border-color: $messageComponentInlineBorderColorError;        

    }

    // gold box
    .oj-messaging-inline-container .oj-message.oj-message-warning {

        background-color: $messageComponentInlineBgColorWarning;
        border-color: $messageComponentInlineBorderColorWarning;

    }    

    // blue box
    .oj-messaging-inline-container .oj-message.oj-message-info {

        background-color: $messageComponentInlineBgColorInfo;
        border-color: $messageComponentInlineBorderColorInfo;

    }

    // green box
    .oj-messaging-inline-container .oj-message.oj-message-confirmation {

        background-color: $messageComponentInlineBgColorConfirmation;
        border-color: $messageComponentInlineBorderColorConfirmation;
      }


    /** 
     * wraps a message block that includes the icon and content inline-blocks
     * 1. prevent wrapping the content inline-block.  
     */
    
    .oj-message {
      display: flex;
    
        @include oj-bidi-property($property: 'text-align', $startOrEnd: start);

      white-space: nowrap; /* 1 */
    }

    /* from second to last message blocks inside popup container */
    .oj-messaging-popup-container .oj-message:nth-of-type(n+2) {
      padding-top:20px;
    }

    /* 
     * wraps the message summary and detail parts 
     */
    .oj-message-content {
      display: inline-block;
    }

    /**
     * message summary text 
     * 1. allow summary text to wrap normally.
     */
    
    .oj-message-content .oj-message-summary {
      white-space: normal;
      vertical-align: top;
      @include oj-ltr() {
        padding: 0 0 0 10px;
      }
      @include oj-rtl() { 
        padding: 0 10px 0 0; 
      } 
    }
    
    /** 
     * message detail text 
     * 1. allow detail text to wrap normally.
     */
    .oj-message-content .oj-message-detail { 
      white-space: normal;
      @include oj-ltr() {
        padding: 7px 0 0 10px;
      }
      @include oj-rtl() { 
        padding: 7px 10px 0 0; 
      }
      word-break: break-word;
    }
    
    /**
     * wraps all hints
     */
    .oj-form-control-hints {
    }    
    
    /**
     * for hint types - validator, converter
     */
    .oj-form-control-hint-converter,
    .oj-form-control-hint-validator {
      
    }
    
    /**
     * for hint title 
     * 1. if title isn't the first hint add padding to the top. 
     */
    .oj-form-control-hint-title:not(:first-child) {
      padding-top: 20px; /* 1 */
    }

    //------------------------------------------
    // icons. 
    //------------------------------------------

    // use flex: 0 0 auto (which is the same as flex:none) 
    // so that the icon doesn't get cut off or stretch. It's
    // a fixed size - the width set on the icon.
    .oj-message-status-icon {
      flex: 0 0 auto;
      position: relative;
    }
    .oj-message-status-icon:before {
      width: 20px; /* Needed for old versions of IE11 */
    }

    .oj-message-status-icon.oj-message-error-icon {
      @extend .oj-fwk-icon-status-error;
    }

    .oj-message-status-icon.oj-message-warning-icon {
      @extend .oj-fwk-icon-status-warning;
    }

    .oj-message-status-icon.oj-message-info-icon {
      @extend .oj-fwk-icon-status-info;
    }

    .oj-message-status-icon.oj-message-confirmation-icon {
      @extend .oj-fwk-icon-status-confirmation;
    }
    
    // Note window animation defaults
    //----------------------------------
    // The defaults is specified as json in a font-family style so that it can
    // be retrieved in JS with oj.ThemeUtils.parseJSONFromFontFamily  
    
    $noteWindowAnimationDefaults: ();
 
    @if ($popupTailOpenAnimation) {
      $noteWindowAnimationDefaults: map-merge($noteWindowAnimationDefaults, (open: $popupTailOpenAnimation));
    }
 
    @if ($popupTailCloseAnimation) {
      $noteWindowAnimationDefaults: map-merge($noteWindowAnimationDefaults, (close: $popupTailCloseAnimation));
    }

    $noteWindowDefaultOptions: ();
 
    @if ($noteWindowAnimationDefaults) {
      $noteWindowDefaultOptions: map-merge($noteWindowDefaultOptions, (animation: $noteWindowAnimationDefaults));
    }

    @if ($formControlMessageSummaryOptionDefault != null) {
      $noteWindowDefaultOptions: map-merge($noteWindowDefaultOptions, (messageSummaryOptionDefault: $formControlMessageSummaryOptionDefault));
    }

    .oj-messaging-popup-option-defaults {
      font-family: oj-json-from-map($noteWindowDefaultOptions);
    }

    // Inline messaging animation defaults
    //-------------------------------------
    // The defaults is specified as json in a font-family style so that it can
    // be retrieved in JS with oj.ThemeUtils.parseJSONFromFontFamily  
    
    $messageInlineAnimationDefaults: ();
 
    @if ($messageComponentInlineOpenAnimation) {
      $messageInlineAnimationDefaults: map-merge($messageInlineAnimationDefaults, (open: $messageComponentInlineOpenAnimation));
    }
 
    @if ($messageComponentInlineCloseAnimation) {
      $messageInlineAnimationDefaults: map-merge($messageInlineAnimationDefaults, (close: $messageComponentInlineCloseAnimation));
    }

    $messageInlineDefaultOptions: ();
 
    @if ($messageInlineAnimationDefaults) {
      $messageInlineDefaultOptions: map-merge($messageInlineDefaultOptions, (animation: $messageInlineAnimationDefaults));
    }

    // this is used for the form components inline messaging for Alta. See InlineMessagingStrategy.
    .oj-messaging-inline-option-defaults {
      font-family: oj-json-from-map($messageInlineDefaultOptions);
    }

  }
}