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

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

@if $includeAppLayoutHybridClasses != false {
  @include module-include-once("common.applayout.hybrid") {

    // BODY CLASSES
    /* Class used to suppress copy/paste and context menus for hybrid mobile apps */
    .oj-hybrid {

      // suppress copy/paste and iOS mag lens

        @include oj-user-select-property(none);


      // Turn off context menu popups
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }
    .oj-hybrid input,
    .oj-hybrid textarea {
        @include oj-user-select-property(text);

    }

    // PADDING
    .oj-hybrid-padding {

        padding: $appLayoutHybridPadding;        

    }
    .oj-hybrid-padding-vertical {

        padding-top: $appLayoutHybridPadding;
        padding-bottom: $appLayoutHybridPadding;

    }
    .oj-hybrid-padding-horizontal {

        padding-left: $appLayoutHybridPadding;
        padding-right: $appLayoutHybridPadding;  

    }
    .oj-hybrid-padding-top {

        padding-top: $appLayoutHybridPadding;

    }
    .oj-hybrid-padding-bottom {

        padding-bottom: $appLayoutHybridPadding;

    }
    .oj-hybrid-padding-start {
      @include oj-ltr() {

          padding-left: $appLayoutHybridPadding;

      }
      @include oj-rtl() {

          padding-right: $appLayoutHybridPadding;

      }
    }
    .oj-hybrid-padding-end {
      @include oj-ltr() {

          padding-right: $appLayoutHybridPadding;

      }
      @include oj-rtl() {

          padding-left: $appLayoutHybridPadding;

      }
    }

    // OFFCANVAS
    .oj-hybrid-applayout-offcanvas {

        width: $appLayoutOffcanvasWidth;
        max-width: $appLayoutOffcanvasMaxWidth;
        background-color: $appLayoutHybridOffcanvasBgColor;
        color: $contrastTextColor;
        @include oj-box-shadow(3px 2px 7px unquote('hsla(#{$boxShadowHsl},0.5)'));

      box-sizing: border-box;
    }

     // iOS safe area padding/margin for offcanvas
    .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-offcanvas {
      padding-top: 0px;
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
    }
    .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-offcanvas .oj-navigationlist-item-element {
      @include oj-ltr() {
        margin-left: 0px;
        margin-left: constant(safe-area-inset-left);
        margin-left: env(safe-area-inset-left);
      }
      @include oj-rtl() {
        margin-right: 0px;
        margin-right: constant(safe-area-inset-right);
        margin-right: env(safe-area-inset-right);
      }
    }

    // PAGE
    .oj-hybrid-applayout-page {
      min-height: 100vh;

        background-color: $bodyBgColor;        

    }

    // HEADER
    .oj-hybrid-applayout-header {
      @extend %oj-flex-bar-base;
      @extend .oj-sm-align-items-center;

        @include oj-box-shadow($appLayoutHybridHeaderBoxShadow);
        @if $appLayoutHybridHeaderBorderColor != null {
          border-bottom: $appLayoutHybridHeaderBorderBottomWidth solid $appLayoutHybridHeaderBorderColor;

        background-color: $appLayoutHybridHeaderBgColor;
        padding: 0 $appLayoutHybridPadding 0 $appLayoutHybridPadding;
      }

    }
    .oj-hybrid-applayout-header::before {
      // To workaround IE11 min-height and flex bug
      content: "";
      display: inline-block;

        min-height: $appLayoutHybridHeaderMinHeight;        

      visibility: hidden;
    }
    .oj-hybrid-applayout-header > .oj-flex-bar-start {
      // add padding to the end side of the start box
      @extend .oj-hybrid-padding-end;
    }
    .oj-hybrid-applayout-header-title {


        font-weight: $appLayoutHybridHeaderTitleFontWeight;
        font-size: $appLayoutHybridHeaderTitleFontSize;
        color: $appLayoutHybridHeaderTextColor;

      padding: 0;
      margin: 0;
    }
    /* Use instead of oj-hybrid-applayout-header when a top fixed bar is present
       so we can correctly style the header border */
    .oj-hybrid-applayout-header-no-border {
      @extend .oj-hybrid-applayout-header;
      border-style: none;

        @include oj-box-shadow(none);

    }
    .oj-hybrid-applayout-header .oj-button,
    .oj-hybrid-applayout-header .oj-button-button {
      // for vertical alignment of header elements
      margin-bottom: 0;
    }
    .oj-hybrid-applayout-header .oj-flex-bar-start > .oj-button:first-child {
      // negative margins so we can align button image with content padding
      @include oj-ltr() {

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

      }
      @include oj-rtl() {

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

      }
    }
    .oj-hybrid-applayout-header .oj-flex-bar-end > .oj-button:last-child {
      // negative margins so we can align button image with content padding
      @include oj-ltr() {

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

      }
      @include oj-rtl() {

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

      }
    }
    /* Class used to position the application header and title for iOS hybrid
       applications where the status bar is overlaid in the WebView.
       This class has no effect on other platforms. */
    .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-header {
      // iOS safe area padding for header  
      padding-top: 20px;
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);

        min-height: calc(#{$appLayoutHybridHeaderMinHeight} + 20px);        

    }
    // iOS safe area margin for header
    .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-header .oj-hybrid-applayout-header-title {
      margin-top: 20px;
      margin-top: constant(safe-area-inset-top);
      margin-top: env(safe-area-inset-top);
    }

    // CONTENT
    .oj-hybrid-applayout-content {
      // marker class used for adding top and bottom margins
    }
    // iOS safe area padding for content
    .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-hybrid-applayout-page .oj-hybrid-applayout-content {
      padding-left: 0px;
      padding-left: constant(safe-area-inset-left);
      padding-left: env(safe-area-inset-left);
      padding-right: 0px;
      padding-right: constant(safe-area-inset-right);
      padding-right: env(safe-area-inset-right);
    }

    // FOOTER
    .oj-hybrid-applayout-footer {

        min-height: $appLayoutHybridFooterMinHeight;
        @if $appLayoutHybridFooterBorderColor != null {
          border-top: $appLayoutHybridFooterBorderTopWidth solid $appLayoutHybridFooterBorderColor;
        }
        background-color: $appLayoutHybridFooterBgColor;

    }
    // FOOTER TOOLBAR
    .oj-hybrid-applayout-toolbar-stretch {
      @extend %oj-flex-bar-base;
    }
    .oj-hybrid-applayout-toolbar-stretch oj-button
    {
      // Need to use display: flex on the <oj-button> so that the <button> inside stretches
      display: flex;
    }
    .oj-hybrid-applayout-toolbar-stretch .oj-button,
    .oj-hybrid-applayout-toolbar-stretch .oj-button-button
    {
      flex: 1 1 auto;
      // height: 100% isn't working, but explicitly setting to a px value works

        min-height: $appLayoutHybridFooterMinHeight;        

      box-sizing: border-box;
      margin: 0;
    }

    // NAV BAR
    .oj-hybrid-applayout-navbar-page,
    .oj-hybrid-applayout-navbar-app {

        background-color: $appLayoutHybridHeaderBgColor;        

    }
    .oj-applayout-fixed-top .oj-hybrid-applayout-navbar-page,
    .oj-applayout-fixed-top .oj-hybrid-applayout-navbar-app {

        @include oj-box-shadow($appLayoutHybridHeaderBoxShadow);
        @if $appLayoutHybridHeaderBorderColor != null {
          border-bottom: 1px solid $appLayoutHybridHeaderBorderColor;
        }

    }
    .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-page,
    .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-app {

        @include oj-box-shadow($appLayoutHybridNavBarBoxShadow);
        @if $appLayoutHybridFooterBorderColor != null {
          border-top: 1px solid $appLayoutHybridFooterBorderColor;
        }

    }
    // iOS safe area padding for footer
    .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-applayout-fixed-bottom .oj-hybrid-applayout-footer,
    .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-page,
    .oj-hybrid.oj-platform-ios.oj-platform-cordova.oj-hybrid-statusbar-spacer .oj-applayout-fixed-bottom .oj-hybrid-applayout-navbar-app {
      padding-bottom: 0px;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }


    // BACK ARROW
    .oj-hybrid-applayout-header-icon-back {
      @extend .oj-fwk-icon-back;
    }


    // DEPRECATED
    /* Deprecated. Use oj-hybrid-applayout-navbar-fixed-bottom or oj-hybrid-applayout-navbar-fixed-top nav bar instead. */
    .oj-hybrid-applayout-navbar {
      @extend .oj-hybrid-applayout-navbar-fixed-bottom;
    }
    .oj-hybrid-applayout-navbar-fixed-top {
      @extend .oj-applayout-fixed-top;
      @extend .oj-hybrid-applayout-navbar-page;
    }
    .oj-hybrid-applayout-navbar-fixed-bottom {
      @extend .oj-applayout-fixed-bottom;
      @extend .oj-hybrid-applayout-navbar-app;
    }
    /* Deprecated. Use oj-hybrid-applayout-header or oj-hybrid-applayout-header-no-border to style the header instead. */
    .oj-hybrid-applayout-navbar-non-fixed {}

  }
}