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

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

@import "oj.common.formlayout.mixins"; 

@if $includeFormLayoutElementClasses != false {
  @include module-include-once("common.formlayout.element") {
    // default custom element to block
    oj-form-layout {
      display: block;
    }
    
    @include common-formlayout-selectors();

    // Generate the style classes for oj-form-layout custom element component.
    // Currently, we only have the common cases, but in the future, we may add
    // oj-form-layout element specific selectors here.


      @include oj-form-layout-common($selectorPrefix: "oj-formlayout");

    // These should only affect the oj-form-layout element, and not old style css based form layouts
    oj-form-layout > .oj-form {
      padding-left: $formLayoutHorizontalMargin;
      padding-right: $formLayoutHorizontalMargin;
      column-gap: $formLayoutColumnGutter;
    }
    
    
    // When labels are inline, we shouldn't ever wrap as it produces difficult
    // to understand layouts.
    .oj-formlayout-labels-inline > .oj-form > .oj-flex  {
      flex-wrap: nowrap;
    }

    // Nested form layout need some horizontal margin/column gutter love as well
    // Get rid of the horizontal marging/column gutter on the parent form layout
    .oj-form-layout > .oj-form > .oj-flex > .oj-formlayout-nested-formlayout > .oj-form-layout > .oj-form,
    .oj-form-layout > .oj-form.oj-formlayout-form-across > .oj-flex > .oj-formlayout-no-label-flex-item.oj-formlayout-nested-formlayout.oj-flex-item {
      padding-left: 0px;
      padding-right: 0px;
    }


    .oj-formlayout-column-gutter {
      flex-grow: 0;
      flex-shrink: 1;
      flex-basis: $formLayoutColumnGutter;
    }

    // oj-label-value doesn't need the row divider margin, as it isn't a true row, so remove the padding
    .oj-label-value.oj-form > .oj-flex {
      padding-top: 0;
    }

    // When the components are placed inside a oj-lable-value, it adds a margin from the flex selector.
    // Form layout always adds a margin for its own flex children. This was causing
    // double margin for label-value.
    // Also, nested oj-form-layout has a similar issue
    .oj-form.oj-label-value > .oj-flex > .oj-flex-item:nth-child(even),
    .oj-form.oj-label-value > .oj-flex > .oj-flex-item:last-child,
    .oj-form > .oj-flex > .oj-flex-item.oj-formlayout-nested-formlayout:nth-child(even),
    .oj-form > .oj-flex > .oj-flex-item.oj-formlayout-nested-formlayout:last-child {
        margin: 0;
    }

    $formLayoutDefaultOptions: ();

    @if ($formLayoutLabelEdgeDefault != null) {
        $formLayoutDefaultOptions: map-merge($formLayoutDefaultOptions, (labelEdge: $formLayoutLabelEdgeDefault));
    }
    @if ($formLayoutColspanWrapDefault != null) {
      $formLayoutDefaultOptions: map-merge($formLayoutDefaultOptions, (colspanWrap: $formLayoutColspanWrapDefault));
    }
    @if ($formLayoutDirectionDefault != null){
      $formLayoutDefaultOptions: map-merge($formLayoutDefaultOptions, ( "direction": $formLayoutDirectionDefault));
    }

    // using the oj-form-layout-option-defaults to pass the column gap
    $formLayoutDefaultOptions: map-merge($formLayoutDefaultOptions, ("columnGap": $formLayoutColumnGutter));

    .oj-form-layout-option-defaults {
        font-family: oj-json-from-map($formLayoutDefaultOptions);
    }
  }

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