// Copyright (c) 2014, 2023, 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.message.scss
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

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

@if $includeMessageClasses != false {
  @include module-include-once("common.message") {
    
    oj-message:not(.oj-complete) {
      visibility: hidden;
    }
    .oj-message-container {
      width:100%;
      display: inline-flex;
      flex-direction: column;
    }
    
    .oj-message-header {
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      min-height: $messageHeaderHeight; 
    }
    
    .oj-message-leading-header {
      align-items: center;
      display: inline-flex;
    }
    
    .oj-message-trailing-header {
      align-items: center;
      display:inline-flex;
    }
    
    .oj-message-custom-icon {
      width: 20px;
      height: 20px;
    }
    
    .oj-message-category {

        color: $messageCategoryTextColor;
        font-size: $messageCategoryFontSize;
        font-weight: $messageCategoryFontWeight;


      // category text is expected to be single word, but it could be long, like "CONFIRMATION"
      //  which could end up overlapping the timestamp in small screens, eg. small iphones.
      //  Allow most lenient wrapping between two adjacent letters to prevent this.
      word-break: break-all;
    }
    
    .oj-message-category h1 {
      // Supress general h1 overrides, and use what is in oj-message-category
      color: inherit;
      font-size: inherit;
      font-weight: inherit;
      
      // Supress the undesirable 8px margin and 2px bottom padding in generic h1
      margin: 0px;
      padding: 0px;
    }
    
    .oj-message-body {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      align-items: flex-start;
    }
    
    // Inline component messages also share this class
    .oj-message-summary {

        font-weight: $messageSummaryFontWeight;
        color: $messageSummaryTextColor;
        font-size: $messageSummaryFontSize;
        line-height: $messageSummaryLineHeight;


      // usually a multi word text, set wrap at word ends
      word-wrap: break-word;
    }
    
    // Inline component messages also share this class
    .oj-message-detail {

        color: $messageDetailTextColor;
        font-size: $messageDetailFontSize;
        line-height: $messageDetailLineHeight;


      // usually a multi word text, set wrap at word ends
      word-wrap: break-word;
      width: 100%;
    }
    
    .oj-message-timestamp {

        color: $messageTimeTextColor;
        font-size: $messageTimeFontSize;
        @include oj-bidi-property($property: 'text-align', $startOrEnd: end);

      flex-grow: 9;
      
      // in worst case let it wrap at word ends so as to not overlap with category text
      word-wrap: break-word;
    }
    
    .oj-message-close {

        @include oj-bidi-property($property: 'float', $startOrEnd: end);
        display: $messageCloseIconDisplay;

    }
    
    .oj-message-auto-timeout-close {
     
        display: $messageAutoTimeoutCloseIconDisplay;

    }
    
    // button adds bottom margin of 4px, we dont want that when inside message
    .oj-message-close .oj-button {
      margin-bottom: 0;
    }
    
    // Theme defaults for properties
    //------------------------------

    $messageDefaults: ();

    @if ($messageAutoTimeoutOptionDefault != null) {
        $messageDefaults: map-merge($messageDefaults, (autoTimeout: $messageAutoTimeoutOptionDefault));
    }

    .oj-message-option-defaults {
        font-family: oj-json-from-map($messageDefaults);
    }
  }
}