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

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

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

  oj-list-item-layout {
    display: block;
  }

  .oj-listitemlayout-grid {
    display: grid;
    grid-template-areas: "selector leading textslots extra" ".... .... quaternary navigation";
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: $panelPadding $panelPadding;
    min-height: $collectionRowHeight;
    box-sizing: border-box;
  }

  .oj-listitemlayout-padding-off > .oj-listitemlayout-grid {
    padding: 0;
  }

  .oj-listitemlayout-selector {
    grid-area: selector;
    align-self: center;
    margin: -0.875rem;
  }

  .oj-listitemlayout-leading {
    grid-area: leading;
    align-self: center;
    display: flex;
  }

  .oj-listitemlayout-textslots {
    grid-area: textslots;
    align-self: center;
  }

  .oj-listitemlayout-extra {
    grid-area: extra;
    display: grid;
    grid-template-areas: "metadata trailing action";
    align-self:center;
    align-items: center;
  }

  .oj-listitemlayout-metadata {
    grid-area: metadata;
  }

  .oj-listitemlayout-trailing {
    grid-area: trailing;
  }

  .oj-listitemlayout-action {
    grid-area: action;
    margin-top: calc(-1 * #{$panelPadding});
    margin-bottom: calc(-1 * #{$panelPadding});
  }

  .oj-listitemlayout-quaternary {
    grid-area: quaternary;
    justify-self: start;
    padding-top: 0.75rem;
  }

  .oj-listitemlayout-navigation {
    grid-area: navigation;
    justify-self: end;
    padding-top: 0.75rem;
  }

  .oj-listitemlayout-start-padding {
    padding-inline-start: 1rem;
  }

  .oj-listitemlayout-horizontal-padding {
    @include oj-ltr() {
      padding-left: $panelPadding;
    }
    @include oj-rtl() {
      padding-right: $panelPadding;
    }
  }

  .oj-listitemlayout-tertiary {
    padding-top: 0.125rem;
  }
}