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

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

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

    /*
     * applied to the outer most element of the offcanvas
     */
    .oj-offcanvas-outer-wrapper {
      overflow-x: hidden;
      overflow-y: hidden;
      position: relative;
      width: 100%;
      box-sizing: border-box;
    }

    /*
     * applied to the inner wrapper of the offcanvas in push mode
     */
    .oj-offcanvas-inner-wrapper,
    .oj-offcanvas-inner-push-wrapper {
      position: relative;
      height: 100%;
    }

    /*
     * only applied to the page level offcanvas
     */
    .oj-offcanvas-page > .oj-offcanvas-open {
      position: fixed;
    }

    /*
     * only applied to the outer wrapper of page level offcanvas
     */
    .oj-offcanvas-outer-wrapper.oj-offcanvas-page {
      overflow-y: visible;
    }

    /*
     * Transition selector is only applied while the offcanvas is activating.
     * In push mode, it's applied to the inner wrapper of the offcanvas.
     * In overlay mode, it's applied to the offcanvas element.
     */
    .oj-offcanvas-transition {

        transition: transform $animationDurationMedium;
        @include oj-backface-visibility-property (hidden);

      transition-timing-function: ease-in-out;
    }

    /*
     * applied to the outer wrapper when displayMode = pin
     */
    .oj-offcanvas-outer-wrapper.oj-offcanvas-pin {
      display: flex;
      flex-wrap: nowrap;
    }

    .oj-offcanvas-pin .oj-offcanvas-start {
      position: relative;
    }

    /*
     * Pin transition selector is only applied to the offcanvas in the pin mode.
     */
    .oj-offcanvas-pin-transition {
       min-width: 0;

         transition: min-width $animationDurationMedium;
         @include oj-backface-visibility-property (hidden);

       transition-timing-function: ease-in-out;
    }

    // common to all edges
    %oj-offcanvas-edge {
      position: absolute;
      box-sizing: border-box;
      border-radius: 0;

      //don't allow user tab into the offcanvas when it's closed.
      display: none;
    }

    // common to start/end
    %oj-offcanvas-start-end {
      height: 100%;
      bottom: 0;
      overflow-x: hidden;
      overflow-y: auto;
    }


    // common to top/bottom
    %oj-offcanvas-top-bottom {
      width: 100%;
      left: 0;
      right: 0;
      overflow-x: auto;
      overflow-y: hidden;
    }

    /*
     * applied to the offcanvas on the start edge
     */
    .oj-offcanvas-start {
      @extend %oj-offcanvas-edge;
      @extend %oj-offcanvas-start-end;
      top: 0;

      @include oj-ltr() {
        transform: translate3d(-100%, 0, 0);
        left: 0;
        border-width: 0 1px 0 0;
      }
      @include oj-rtl() {
        transform: translate3d(100%, 0, 0);
        right: 0;
        border-width: 0 0 0 1px;
      }
    }

    /*
     * applied to the offcanvas on the end edge
     */
    .oj-offcanvas-end {
      @extend %oj-offcanvas-edge;
      @extend %oj-offcanvas-start-end;
      @include oj-ltr() {
        right: 0;
        transform: translate3d(100%, 0, 0);
        border-width: 0 0 0 1px;
      }
      @include oj-rtl() {
        left: 0;
        transform: translate3d(-100%, 0, 0);
        border-width: 0 1px 0 0;
      }
    }


    /*
     * applied to the offcanvas on the top edge
     */
    .oj-offcanvas-top {
      @extend %oj-offcanvas-edge;
      @extend %oj-offcanvas-top-bottom;
      border-width: 0 0 1px;
      top: 0;
      transform: translate3d(0, -100%, 0);
    }

    /*
     * applied to the offcanvas on the bottom edge
     */
    .oj-offcanvas-bottom {
      @extend %oj-offcanvas-edge;
      @extend %oj-offcanvas-top-bottom;
      border-width: 1px 0 0 0;
      bottom: 0;
      transform: translate3d(0, 100%, 0);
    }

    /*
     * applied to the offcanvas when it is open
     */
    .oj-offcanvas-start.oj-offcanvas-open,
    .oj-offcanvas-end.oj-offcanvas-open,
    .oj-offcanvas-top.oj-offcanvas-open,
    .oj-offcanvas-bottom.oj-offcanvas-open {
      display: block;
      z-index: $offcanvasZindex;
    }

    /* 
     * Suppress focus ring
     */
    .oj-offcanvas-start:not(.oj-focus-highlight):focus,
    .oj-offcanvas-end:not(.oj-focus-highlight):focus,
    .oj-offcanvas-top:not(.oj-focus-highlight):focus,
    .oj-offcanvas-bottom:not(.oj-focus-highlight):focus {
      outline: none;
    }

    /*
     * Overlay: start and end offcanvases shift
     */
    .oj-offcanvas-outer-wrapper.oj-offcanvas-shift-start > .oj-offcanvas-overlay,
    .oj-offcanvas-outer-wrapper.oj-offcanvas-shift-end > .oj-offcanvas-overlay,
    .oj-offcanvas-outer-wrapper.oj-offcanvas-shift-start > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay,
    .oj-offcanvas-outer-wrapper.oj-offcanvas-shift-end > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay {
      transform: translate3d(0%, 0, 0);
    }

    /*
     * Overlay: top and bottom offcanvases shift
     */
    .oj-offcanvas-outer-wrapper.oj-offcanvas-shift-down > .oj-offcanvas-overlay,
    .oj-offcanvas-outer-wrapper.oj-offcanvas-shift-up > .oj-offcanvas-overlay,
    .oj-offcanvas-outer-wrapper.oj-offcanvas-shift-down > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay,
    .oj-offcanvas-outer-wrapper.oj-offcanvas-shift-up > .oj-offcanvas-inner-wrapper > .oj-offcanvas-overlay {
      transform: translate3d(0, 0%, 0);
    }

    /*
     * Applied to the glass pane of modal offcanvas
     */
    .oj-offcanvas-glasspane {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

        background: $overlayBgColor;

      opacity: 0;

      transition: opacity 0.5s;
      transition-timing-function: ease-in-out;
      z-index: $offcanvasZindex;
    }

    /*
     * glass pane opacity after animation
     */
    .oj-offcanvas-glasspane-dim {
      opacity: 0.4;
    }


    /*
     * applied to the overlay offcanvas when it is open
     */
    
       .oj-offcanvas-start.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
         @include oj-ltr() {
           @include oj-box-shadow(3px 0px 3px 0 unquote('hsla(0, 0%, 0%, 0.10)'));
         }
         @include oj-rtl() {
           @include oj-box-shadow(-3px 0px 3px 0 unquote('hsla(0, 0%, 0%, 0.10)'));
         }
       }
       .oj-offcanvas-end.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
         @include oj-ltr() {
           @include oj-box-shadow(-3px 0px 3px 0 unquote('hsla(0, 0%, 0%, 0.10)'));
         }
         @include oj-rtl() {
           @include oj-box-shadow(3px 0px 3px 0 unquote('hsla(0, 0%, 0%, 0.10)'));
         }
       }
       .oj-offcanvas-top.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
         @include oj-box-shadow(0px 3px 3px 0 unquote('hsla(0, 0%, 0%, 0.10)'));
       }
       .oj-offcanvas-bottom.oj-offcanvas-overlay.oj-offcanvas-open.oj-offcanvas-overlay-shadow {
         @include oj-box-shadow(0px -3px 3px 0 unquote('hsla(0, 0%, 0%, 0.10)'));
       }

  }
}