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

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


@if $includeConveyorBeltClasses != false {
  @include module-include-once("common.conveyorbelt") {
    
    /* conveyorbelt */
    /* --------------------------------------------------------------- */
    
    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-conveyor-belt:not(.oj-complete) {
        visibility: hidden;
      }      
    }
    
    oj-conveyor-belt {
        display: block;
    }
    
    .oj-conveyorbelt {
        position: relative;
    }
    
    .oj-conveyorbelt,
    .oj-conveyorbelt-overflow-container,
    .oj-conveyorbelt-content-container {
        display: flex;
        align-items: center;
    }

    .oj-conveyorbelt-content-container,
    .oj-conveyorbelt-overflow-container {
        height: 100%
    }

    .oj-conveyorbelt.oj-conveyorbelt-vertical .oj-conveyorbelt-content-container {
        height: auto
    }
    
    //oj-conveyorbelt-vertical is applied to the root element when the
    //conveyor orientation is vertical
    .oj-conveyorbelt.oj-conveyorbelt-vertical {
        display: inline-flex;
    }
    
    .oj-conveyorbelt.oj-conveyorbelt-vertical,
    .oj-conveyorbelt.oj-conveyorbelt-vertical > .oj-conveyorbelt-overflow-container,
    .oj-conveyorbelt.oj-conveyorbelt-vertical > .oj-conveyorbelt-overflow-container > .oj-conveyorbelt-content-container {
        flex-direction: column;
    }
    
    //applied to the container around the content container in the conveyor
    .oj-conveyorbelt-overflow-container {
        overflow: hidden;
        flex: 1 1 auto;
    }
    
    //applied to the container around the items in the conveyor
    .oj-conveyorbelt-content-container {
        //need to specify position:relative so that we can add a resize listener to this element
        //(which adds its own absolutely positioned child elements)
        position: relative;
        //when a navList is wrapped by a conveyorBelt, allow the navList to
        //grow so that its items can grow, like a navList not wrapped by a 
        //conveyorBelt
        flex: 1 0 auto;
    }
    
    //applied to each item in the conveyor
    .oj-conveyorbelt-item {
        flex: 0 0 auto;
    }
    
    //when a navList is wrapped by a conveyorBelt, allow the navList to
    //grow so that its items can grow, like a navList not wrapped by a 
    //conveyorBelt
    .oj-conveyorbelt-item.oj-navigationlist,
    .oj-conveyorbelt-item.oj-tabbar {
        flex: 1 0 auto;
    }
    
    /* overflow indicators */
    .oj-conveyorbelt-overflow-indicator {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;

          width: $conveyorBeltOverflowIndicatorHeight;
          height: $conveyorBeltOverflowIndicatorHeight;
          //FIX BUG 19571727: specify line-height to be same as height so that
          //arrows appear vertically centered regardless of font size
          line-height: $conveyorBeltOverflowIndicatorHeight;
          cursor: $buttonCursor;
          @include oj-border-radius($buttonBorderRadius);
          


        text-align: center;
        border: 1px solid;
        flex: 0 0 auto;
        position: relative;
    }

    .oj-conveyorbelt-overflow-indicator.oj-default {
        border-color: transparent;
    }

    .oj-conveyorbelt-overflow-indicator.oj-hover {

        //from .oj-button.oj-hover
        background-color: $buttonHalfChromeBgColorHover;
        @include oj-background-image($buttonBgImageHover);
        border-color: $buttonHalfChromeBorderColorHover;


    }

    //active should trump hover
    .oj-conveyorbelt-overflow-indicator.oj-active,
    .oj-conveyorbelt-overflow-indicator.oj-active.oj-hover {

        //from .oj-button.oj-active
        background-color: $buttonHalfChromeBgColorActive;
        @include oj-background-image($buttonBgImageActive);
        border-color: $buttonHalfChromeBorderColorActive;
        opacity: $buttonHalfChromeOpacityActive;


    }

    
    /* overflow icons */
    .oj-conveyorbelt-overflow-indicator .oj-conveyorbelt-overflow-icon {
        // make sure that the cursor is uniform across the whole overflow indicator 
        cursor: inherit;
        //FIX BUG 19571727: align the icon vertically; add margin on bottom to
        //center it better than vertical-align by itself
        vertical-align: middle;
        margin-bottom: 3px;
    }
    
    .oj-conveyorbelt-overflow-indicator.oj-default .oj-conveyorbelt-overflow-icon {

        color: $buttonHalfChromeIconColor;        

    }

    .oj-conveyorbelt-overflow-indicator.oj-hover .oj-conveyorbelt-overflow-icon {

        //from .oj-button.oj-hover .oj-button-icon
        color: $buttonHalfChromeIconColorHover;

    }

    //active should trump hover
    .oj-conveyorbelt-overflow-indicator.oj-active .oj-conveyorbelt-overflow-icon,
    .oj-conveyorbelt-overflow-indicator.oj-active.oj-hover .oj-conveyorbelt-overflow-icon {
     
        //from .oj-button.oj-active .oj-button-icon
        color: $buttonHalfChromeIconColorActive;

    }


    // icons
    //------------------------------------------

    .oj-conveyorbelt-overflow-icon.oj-start {
        @extend .oj-fwk-icon-caret-start;
    }
    .oj-conveyorbelt-overflow-icon.oj-end {
        @extend .oj-fwk-icon-caret-end;
    }
    .oj-conveyorbelt-overflow-icon.oj-top {
        @extend .oj-fwk-icon-caret-n;
    }
    .oj-conveyorbelt-overflow-icon.oj-bottom {
        @extend .oj-fwk-icon-caret-s;
    }

  }
}