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

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

@if $includeWaterfallLayoutClasses != false {
  @include module-include-once("common.waterfalllayout") {
    
    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-waterfall-layout:not(.oj-complete) {
        visibility: hidden;
      }
    }

    /* styling on the root */
    oj-waterfall-layout {
      display: block;
      position: relative;
      overflow: auto;
    }

    /* styling to remove focus ring border on waterfall layout */
    .oj-waterfall-layout:focus {
      outline: none; 
    }

    /* styling applied to item where the sole purpose is to determine its position only */
    .oj-waterfalllayout-position-only {
      position: absolute;
      visibility: hidden;
    }

    /* styling on each item */
    .oj-waterfalllayout-item {
      position: absolute;
      visibility: hidden;
    }

    /* suppress focus ring on item */
    .oj-waterfalllayout-item-suppress-focus {
      outline: none;
    }

    /* Styling for skeleton card */
    .oj-waterfalllayout-skeleton {
      position: absolute;
      width: 330px;
      height: 396px;
      border: 1px solid $panelBorderColor;
      border-radius: $panelBorderRadius;
      box-sizing: border-box;
      padding: $panelPadding;
    }

    /* Styling for skeleton card content */
    .oj-waterfalllayout-skeleton-content {
      width: 100%;
      height: 100%;
    }
  }
}