// 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/

//-------------------------------------------------------------------------------------------------
// generate layout utility classes, usually these belong inside of media queries
//
//
// $selectorPrefix:    name of class prefix to use, i.e. "oj-sm" will generate
//                     .oj-sm-hide, .oj-sm-float-end, etc.
// $generateHide:         generate hide classes like .oj-sm-hide
// $generateTextAlignEnd: generate text align end classes like .oj-sm-text-align-end
// $generateFloatStart:   generate float end classes like .oj-sm-float-end
// $generateFloatEnd:     generate float start classes like .oj-sm-float-start
//-------------------------------------------------------------------------------------------------
@mixin oj-layout-helpers-responsive($selectorPrefix,
                                    $generateHide:                  $responsiveGenerateHide,
                                    $generateTextAlignEnd:          $responsiveGenerateTextAlignEnd,
                                    $generateFloatEnd:              $responsiveGenerateFloatEnd,
                                    $generateFloatStart:            $responsiveGenerateFloatStart,
                                    $generateSpacing:               $responsiveGenerateSpacing)
{
  @if $generateHide {
    .#{$selectorPrefix}-hide { display:none; }
  }

  @if $generateSpacing {
    .#{$selectorPrefix}-margin-0 {
      @include oj-ltr() {
      margin: 0 !important;
      }
      @include oj-rtl() {
        margin: 0 !important;
        }
    }

    .#{$selectorPrefix}-margin-0-horizontal{
      @include oj-ltr() {
      margin-left: 0 !important;
      margin-right: 0 !important;
      }
      @include oj-rtl() {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
    }

    .#{$selectorPrefix}-margin-0-vertical {    
      @include oj-ltr() {
      margin-top: 0 !important;
      margin-bottom: 0 !important; }
      @include oj-rtl() {
        margin-top: 0 !important;
        margin-bottom: 0 !important; }
      }        

    .#{$selectorPrefix}-margin-0-top {   
      @include oj-ltr() {  
     margin-top: 0 !important; }
     @include oj-rtl() {  
      margin-top: 0 !important; }

    }

    .#{$selectorPrefix}-margin-0-bottom {   
      @include oj-ltr() {  
      margin-bottom: 0 !important; }
      @include oj-rtl() {  
        margin-bottom: 0 !important; }

    }

    .#{$selectorPrefix}-margin-0-start {
      @include oj-ltr() {
        margin-left: 0 !important;
      }
      @include oj-rtl() {
        margin-right: 0!important;
      }

    }

    .#{$selectorPrefix}-margin-0-end { 
      @include oj-ltr() {
        margin-right: 0 !important;
      }
      @include oj-rtl() {
        margin-left: 0 !important;
      }

       }

    .#{$selectorPrefix}-padding-0 {
      @include oj-ltr() {
      padding: 0 !important;
      }
      @include oj-rtl() {
        padding: 0 !important;
        }

    }

    .#{$selectorPrefix}-padding-0-horizontal {
      @include oj-ltr() {
      padding-left: 0 !important;
      padding-right: 0 !important;
      }
      @include oj-rtl() {
        padding-left: 0 !important;
        padding-right: 0 !important;
        }
    }

    .#{$selectorPrefix}-padding-0-vertical { 
      @include oj-ltr() {       
        padding-top: 0 !important;
        padding-bottom: 0 !important; }
      @include oj-rtl() {       
        padding-top: 0 !important;
        padding-bottom: 0 !important; }

      }

    .#{$selectorPrefix}-padding-0-top {  
      @include oj-ltr() {     
        padding-top: 0 !important; }  
      @include oj-rtl() {     
          padding-top: 0 !important; }  
      }        

    .#{$selectorPrefix}-padding-0-bottom {  
      @include oj-ltr() {      
        padding-bottom: 0 !important;   }    
      @include oj-rtl() {      
        padding-bottom: 0 !important;   }    
    }

    .#{$selectorPrefix}-padding-0-start {
      @include oj-ltr() {
        padding-left: 0 !important;
      }
      @include oj-rtl() {
        padding-right: 0!important;
      }
    }
    .#{$selectorPrefix}-padding-0-end { 
      @include oj-ltr() {
        padding-right: 0 !important;
      }
      @include oj-rtl() {
        padding-left: 0 !important;
      }
    }
    @for  $i from 1 through 12 {
      $spacing: $i * $spacingSmall;

      .#{$selectorPrefix}-margin-#{$i}x {
        @include oj-ltr() {
        margin: $spacing !important; } 
        @include oj-rtl() {
          margin: $spacing !important; } 
      }

      .#{$selectorPrefix}-margin-#{$i}x-horizontal {
        @include oj-ltr() {
        margin-left: $spacing !important;
        margin-right: $spacing !important;
        }
        @include oj-rtl() {
          margin-left: $spacing !important;
          margin-right: $spacing !important;
          }
      }

      .#{$selectorPrefix}-margin-#{$i}x-vertical { 
        @include oj-ltr() {           
          margin-top: $spacing !important;
          margin-bottom: $spacing !important;
        } 
        @include oj-rtl() {           
          margin-top: $spacing !important;
          margin-bottom: $spacing !important;
        }     
      }  
     

      .#{$selectorPrefix}-margin-#{$i}x-top {     
        margin-top: $spacing !important; }       

      .#{$selectorPrefix}-margin-#{$i}x-bottom {       
        margin-bottom: $spacing !important; }      

      .#{$selectorPrefix}-margin-#{$i}x-start {
        @include oj-ltr() {
          margin-left: $spacing !important;
        }
        @include oj-rtl() {
          margin-right: $spacing !important;
        }
      }

      .#{$selectorPrefix}-margin-#{$i}x-end {
        @include oj-ltr() {
          margin-right: $spacing !important;
        }
        @include oj-rtl() {
          margin-left: $spacing !important;
        }
      }

      .#{$selectorPrefix}-padding-#{$i}x {
        @include oj-ltr() {
        padding: $spacing !important; }
        @include oj-rtl() {
          padding: $spacing !important; }

      }

      .#{$selectorPrefix}-padding-#{$i}x-horizontal {
        @include oj-ltr() {
        padding-left: $spacing !important;
        padding-right: $spacing !important;
        }
        @include oj-rtl() {
          padding-left: $spacing !important;
          padding-right: $spacing !important;
          }
      }

      .#{$selectorPrefix}-padding-#{$i}x-vertical {   
        @include oj-ltr() { 
        padding-top: $spacing !important;
        padding-bottom: $spacing !important;  }
        @include oj-rtl() { 
        padding-top: $spacing !important;
        padding-bottom: $spacing !important;  }

      }

      .#{$selectorPrefix}-padding-#{$i}x-top {     
        @include oj-ltr() { 
        padding-top: $spacing !important; } 
        @include oj-rtl() { 
          padding-top: $spacing !important; }     
      }

      .#{$selectorPrefix}-padding-#{$i}x-bottom {  
        @include oj-ltr() {      
        padding-bottom: $spacing !important; }  
        @include oj-rtl() {      
          padding-bottom: $spacing !important; }  
      }   
        
        
      .#{$selectorPrefix}-padding-#{$i}x-start {
        @include oj-ltr() {
          padding-left: $spacing !important;
        }
        @include oj-rtl() {
          padding-right: $spacing !important;
        }
      }

      .#{$selectorPrefix}-padding-#{$i}x-end {
        @include oj-ltr() {
          padding-right: $spacing !important;
        }
        @include oj-rtl() {
          padding-left: $spacing !important;
        }
      }
    }
  }

  
  .#{$selectorPrefix}-width-1\/2 {
    width: 50%  !important;
  }
  
  .#{$selectorPrefix}-width-1\/3 {
    width: 33.333333%  !important;
  }
  
  .#{$selectorPrefix}-width-2\/3 {
    width: 66.666667%  !important;
  }
  
  .#{$selectorPrefix}-width-1\/4 {
    width: 25%  !important;
  }
  
  .#{$selectorPrefix}-width-3\/4 {
    width: 75%  !important;
  }
  
  .#{$selectorPrefix}-width-1\/5 {
    width: 20%  !important;
  }
  
  .#{$selectorPrefix}-width-2\/5 {
    width: 40%  !important;
  }
  
  .#{$selectorPrefix}-width-3\/5 {
    width: 60%  !important;
  }
  
  .#{$selectorPrefix}-width-4\/5 {
    width: 80%  !important;
  }

  .#{$selectorPrefix}-width-full {
    width: 100%  !important;
  }

  @if $generateTextAlignEnd {
    .#{$selectorPrefix}-text-align-end {
      @include oj-bidi-property(
                 $property: "text-align",
                 $startOrEnd: end);
    }
  }

  @if $generateFloatEnd {
    .#{$selectorPrefix}-float-end {
      @include oj-bidi-property(
                 $property: "float",
                 $startOrEnd: end);
    }
  }

  @if $generateFloatStart {
    .#{$selectorPrefix}-float-start {
      @include oj-bidi-property(
                 $property: "float",
                 $startOrEnd: start);
    }
  }

}