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

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

    /* toolbar*/
    /* --------------------------------------------------------------- */
            
    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-toolbar:not(.oj-complete) {
        visibility: hidden;
      }      
    }

    .oj-toolbar {

        // Buttonset having display inline-flex introduces strange white spaces above and below when placed in toolbar
        // Change toolbar to have flex display to fix this
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        padding: 0.250em 0; //as per spec padding is only needed on top and bottom
        border-style: solid;

          border-color: $toolbarBorderColor;
          border-width: $toolbarBorderWidth;
          @include oj-border-radius($mediumBorderRadius);
          background-color: $toolbarBgColor;          
        
    }    

    // override button margins
    .oj-toolbar .oj-button {
        margin-bottom: 0; //override hardcoded 4px in ojbutton
    }

    // spec says 4px spacing between non-separator elements in toolbar
    .oj-toolbar > .oj-button:not(:first-child), 
    .oj-toolbar > .oj-buttonset:not(:first-child)
    {   
      @include oj-ltr() {    
      margin-left : 0.125rem;
      }
      @include oj-rtl()
      {
        margin-right : 0.125rem;
      }  
    }
    .oj-toolbar > .oj-button:not(:last-child),   
    .oj-toolbar > .oj-buttonset:not(:last-child)
     {
      @include oj-ltr() {
       margin-right: 0.125rem;
      }
      @include oj-rtl()
      {
        margin-left : 0.125rem;
      }

     }
     .oj-toolbar .oj-buttonset-multi.oj-button-outlined-chrome:not(.oj-buttonset-width-auto):not(.oj-buttonset-width-equal){
      width: initial;
     }  
    

    /* Apps can apply this class to a span to get a toolbar separator.  
     * To make it accessible, the span should also have 
     * role="separator" aria-orientation="vertical".
     * Separators should be placed around any buttonsets in the toolbar, and 
     * anywhere else in the toolbar that a separator is desirable.
     */
    .oj-toolbar-separator {

        border-left: solid 1px $toolbarBorderColor; 
        height: 1.833em; // spec says 22px
        display:inline-block;
        vertical-align:middle;

        // spec says padding left/right 6px. Since element to the left of the
        // separator has margin-right of 4px (see above), only need 2px of 
        // margin-left for the separator. 
        // Has to be margin, not padding, since the border is the separator.
        margin: 0 .25rem;
      
    }

    /* To layout multiple toolbars, an element with .oj-toolbars can contain 1 or more elements 
       each having .oj-toolbar-row, which can each contain 1 or more JET Toolbars 
       (which have the oj-toolbar class). */

    .oj-toolbars {
        border-style: solid;
        border-color: $toolbarBorderColor;
        border-width: $toolbarBorderWidth;
        @include oj-border-radius($mediumBorderRadius);
        background-color: $toolbarBgColor;
      }

    .oj-toolbar-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
     }

    // when a toolbar is inside a toolbar row the toolbar row will do the chroming, if any
    .oj-toolbar-row .oj-toolbar {
      display: flex;
      background-color: transparent;
      border: 0;
    }

    // inside a toolbar row put a vertical separator (border) between two adjacent toolbars
    .oj-toolbar-row .oj-toolbar + .oj-toolbar {

        @include oj-border-radius(0);
        @include oj-ltr()
        {
          border-left: 1px solid $toolbarBorderColor;
          // Since the "toolbar divider" is a 1px border of second toolbar container,
          // the margin-left is the spacing on the left side of the divider,
          // and the padding-left is the spacing on the right side of the divider.
          margin-left: 0.5em; // 6px as per spec
          padding-left: 0.5em; // 6px as per spec
        }
        @include oj-rtl()
        {
          border-right: 1px solid $toolbarBorderColor;
          margin-right:  0.5em; // 6px as per spec
          padding-right: 0.5em; // 6px as per spec
        }        

    }

    // put a horizontal separator between two toolbar rows
    .oj-toolbar-row + .oj-toolbar-row {

        border-top: 1px solid $toolbarBorderColor;        

    }

    
    /* Apps can apply this class if a top toolbar border is desired */
    .oj-toolbar-top-border {
        border-top-width: 1px;

          @include oj-border-radius(0);

    }

    /* Apps can apply this class if a bottom toolbar border is desired */
    .oj-toolbar-bottom-border {
        border-bottom-width: 1px;

          @include oj-border-radius(0);

    }
  }
}