// 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 theme's directory,
//          for example alta/widgets/_oj.alta.grid.scss
// !!!

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




//-------------------------------------------------------------------------------------------------
// generate flex classes that belong inside of media queries
//-------------------------------------------------------------------------------------------------
@mixin oj-flex-responsive($selectorPrefix,
                          $generateJustify:   true,
                          $generateAlign:     true,
                          $generateOrdering:  true,
                          $generateVertical:  true,
                          $generateChildFlex: true,
                          $generateFlexWrap:  true) {



  @if ($generateChildFlex) {

    .#{$selectorPrefix}-flex-items-0 > .oj-flex-item,
    .#{$selectorPrefix}-flex-0 {
      flex: 0;
    }

    .#{$selectorPrefix}-flex-items-1 > .oj-flex-item,
    .#{$selectorPrefix}-flex-1 {
      flex: 1;
    }

    .#{$selectorPrefix}-flex-items-initial > .oj-flex-item,
    .#{$selectorPrefix}-flex-initial {
      flex: 0 1 auto;
    }
  }


  @if ($generateOrdering)
  {
    @for $i from 0 through 5 {
      .#{$selectorPrefix}-order-#{$i} {
        order: $i;
      }
    }
  }

  @if ($generateJustify) {
    .#{$selectorPrefix}-justify-content-flex-start {
      justify-content: flex-start;
    }

    .#{$selectorPrefix}-justify-content-flex-end {
      justify-content: flex-end;
    }

    .#{$selectorPrefix}-justify-content-center {
      justify-content: center;
    }

    .#{$selectorPrefix}-justify-content-space-between {
      justify-content: space-between;
    }

    .#{$selectorPrefix}-justify-content-space-around {
      justify-content: space-around;
    }
  }


  @if ($generateAlign) {
    //can be placed on flex container
    .#{$selectorPrefix}-align-items-center {
      align-items: center;
    }

    .#{$selectorPrefix}-align-items-baseline {
      align-items: baseline;
    }

    .#{$selectorPrefix}-align-items-flex-start {
      align-items: flex-start;
    }

    .#{$selectorPrefix}-align-items-flex-end {
      align-items: flex-end;
    }



    // can be placed on flex items
    .#{$selectorPrefix}-align-self-center {
      align-self: center;
    }

    .#{$selectorPrefix}-align-self-flex-start {
      align-self: flex-start;
    }

    .#{$selectorPrefix}-align-self-flex-end {
      align-self: flex-end;
    }
  }


  @if ($generateVertical) {
    .#{$selectorPrefix}-flex-direction-column {
      flex-direction: column;
    }
  }

  @if ($generateFlexWrap) {
    .#{$selectorPrefix}-flex-wrap-nowrap {
      flex-wrap: nowrap;
    }
  }

}

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

    /* Grid HTML Classes */
    .oj-flex {
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;

    }

    .oj-flex-item {
      flex: auto;
      box-sizing: border-box;
    }

    // we want people to have a way to change from oj-row/oj-col
    // to use oj-flex/oj-flex-item using search and replace.
    // However one of the problems we had is while oj-flex-item has no default width
    // the default width of oj-col was 100%.
    // Because the default width of oj-col was 100% in many cases our demos
    // left off adding <code>oj-sm-12</code>. So in order to help
    // folks transition we're adding the class 'deprecated-col-default-width',
    // this will allow them to search and
    // replace 'oj-col' with 'oj-flex-item deprecated-col-default-width',
    // which should get them up and running. Then they can go through
    // their files and remove 'deprecated-col-default-width' in favor of oj-sm-12 if they
    // don't already have a small size set.
    .deprecated-col-default-width {
      flex: 0 1 100%;
      // max-width is required to work around an IE11 bug where the padding is
      // not getting included in the flex-basis percentage even though
      // box-sizing: border-box is set
      max-width: 100%;
      // these classes are sometimes used in non-flex cases, for example
      // in the off canvas responsive patterns, so set the
      // width as well
      width: 100%;
    }

    %oj-flex-bar-base {
      position: relative;
    }

    %oj-flex-bar-base,
    .oj-flex-bar-start,
    .oj-flex-bar-middle,
    .oj-flex-bar-end,
    .oj-flex-bar-center-absolute {
      box-sizing: border-box;
      display: flex;
    }

    .oj-flex-bar {
      @extend %oj-flex-bar-base;
    }

    .oj-flex-bar-middle {
      flex: auto;
    }

    .oj-flex-bar-end {

      @include oj-ltr() {
        margin-left: auto;
      }

      @include oj-rtl() {
        margin-right: auto;
      }
    }

    .oj-flex-bar-center-absolute {
      align-items: center;
      justify-content: center;
      position:absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      top: 0;
    }



    .oj-flex-items-pad > .oj-flex > .oj-flex-item,
    .oj-flex.oj-flex-items-pad > .oj-flex-item {

        padding-left: $spacingMedium;
        padding-right: $spacingMedium;

    }

    // nested
    .oj-flex-items-pad > .oj-flex > .oj-flex-item > .oj-flex,
    .oj-flex.oj-flex-items-pad > .oj-flex-item > .oj-flex {

        margin-left: calc(0px - #{$spacingMedium});
        margin-right: calc(0px - #{$spacingMedium});
      
    }


    @if $responsiveQuerySmallUp and $responsiveQuerySmallUp != none {
      @media #{$responsiveQuerySmallUp} {
        // generateOrdering is false because we're mobile first, so
        // in theory the ordering matches small dom order and then you move
        // things around on bigger screens
        @include oj-flex-responsive($selectorPrefix: "oj-sm",
                                    $generateOrdering: false);
      }
    }

    @if $responsiveQueryMediumUp and $responsiveQueryMediumUp != none {
      @media  #{$responsiveQueryMediumUp} {
        @include oj-flex-responsive($selectorPrefix: "oj-md");
      }
    }

    @if $responsiveQueryLargeUp and $responsiveQueryLargeUp != none {
      @media  #{$responsiveQueryLargeUp} {
        @include oj-flex-responsive($selectorPrefix: "oj-lg");

      }
    }

    @if $responsiveQueryXlargeUp and $responsiveQueryXlargeUp != none {
      @media  #{$responsiveQueryXlargeUp} {
        @include oj-flex-responsive($selectorPrefix: "oj-xl");

      }
    }

    @if $responsiveQueryXXlargeUp and $responsiveQueryXXlargeUp != none {
      @media  #{$responsiveQueryXXlargeUp} {
        @include oj-flex-responsive($selectorPrefix: "oj-xxl");

      }
    }


    @if $responsiveQueryPrint and $responsiveQueryPrint != none {
      @media  #{$responsiveQueryPrint} {
        @include oj-flex-responsive($selectorPrefix: "oj-print");
      }
    }


    //ONLY
    @if $responsiveQuerySmallOnly and $responsiveQuerySmallOnly != none {
      @media #{$responsiveQuerySmallOnly} {
        @include oj-flex-responsive($selectorPrefix:    "oj-sm-only",
                                    $generateOrdering:  false);
      }
    }

    @if $responsiveQueryMediumOnly and $responsiveQueryMediumOnly != none {
      @media #{$responsiveQueryMediumOnly} {
        // only generate centering classes
        @include oj-flex-responsive($selectorPrefix:    "oj-md-only",
                                    $generateOrdering:  false);
      }
    }

    @if $responsiveQueryLargeOnly and $responsiveQueryLargeOnly != none {
      @media #{$responsiveQueryLargeOnly} {
        @include oj-flex-responsive($selectorPrefix:    "oj-lg-only",
                                    $generateOrdering:  false);
      }
    }

    @if $responsiveQueryXlargeOnly and $responsiveQueryXlargeOnly != none {
      @media #{$responsiveQueryXlargeOnly} {
        @include oj-flex-responsive($selectorPrefix:    "oj-xl-only",
                                    $generateOrdering:  false);
      }
    }

  }
}