// Copyright (c) 2014, 2023, 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";

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

        // This is to prevent the flash of unstyled content before the html becomes JET components.
        @if $initialVisibility == hidden {
          oj-list-view:not(.oj-complete) {
            visibility: hidden;
          }
        }

        /* Styling for the listview widget container */
        .oj-listview {
            display: block;
            position: relative;
            border-width: 1px 0;
            border-style: solid;
            box-sizing: border-box;

              @include oj-user-select-property (none);
              border-color: $collectionBorderColor;
              // min-height is 1 row to leave space for the no data message.
              min-height: $collectionRowHeight;

        }

        /* styling for the listview root element and group element */
        .oj-listview-element,
        .oj-listview-group {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }

        /* Styling to remove focus ring border on focusable elements */
        .oj-listview:focus,
        .oj-listview-element:focus,
        .oj-listview-expand-icon:focus,
        .oj-listview-expanding-icon:focus,
        .oj-listview-collapse-icon:focus,
        .oj-listview-group-item:focus,
        .oj-listview-item-element:focus,
        .oj-listview-cell-element:focus {
            outline: none;
        }

        /* styling to hide the gridline */
        .oj-listview.gridline-top-hidden {
            border-top-width: 0;
        }

        /* styling to hide the gridline */
        .oj-listview.gridline-bottom-hidden {
            border-bottom-width: 0;
        }

        /* Styling for the component div container element. */
        .oj-listview-container {
            overflow: auto;
        }

        /* to enable momentum scrolling on touch devices */
        .oj-listview-container-touch {
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }

        /* remove border top for the first group to prevent double border */
        .oj-listview-element > .oj-listview-item-element:first-child .oj-listview-group-item {
            border-top: 0;
        }

        /* remove border top for the first group or leaf item to prevent double border */
        .oj-listview-element > .oj-listview-item:first-child,
        .oj-listview:not(.oj-listview-card-layout) .oj-listview-group > .oj-listview-item:first-child,
        .oj-listview-element > .oj-listview-item-element:first-child .oj-listview-group-item {
            background-size: 0;
        }

        /* styling on each list item */
        /* note that background image is used for border because we need to ability to position the border.
           using linear-gradient allows us to customize the color of the border */
        .oj-listview-item {
            padding: $panelPadding;
            background-image: linear-gradient($collectionCellBorderColor, $collectionCellBorderColor);
            background-position: $listViewItemBorderPosition 0;

            background-size: 100% 1px;
            background-repeat: no-repeat;
            box-sizing: border-box;
            border-top:1px solid transparent;
        }

        /* styling to hide the gridline */
        .oj-listview-gridlines-hidden .oj-listview-item {
            background-size: 0;
        }

        /* set on item before add or remove animation */
        .oj-listview-item-add-remove-transition {
            overflow: hidden;
        }

        /* styling on list item element */
        .oj-listview-item-element {
            line-height: normal;
        }

        /* Styling on list item hover */
        .oj-listview-item.oj-hover,
        .oj-listview-card.oj-hover,
        .oj-listview-group-item.oj-hover {
            background-color: $collectionCellBgColorHover;
        }

        .oj-listview:not(.oj-listview-card-layout) .oj-listview-item.oj-hover,
        .oj-listview:not(.oj-listview-card-layout) .oj-listview-item.oj-hover + li.oj-listview-item {
            border-top: 1px solid $collectionCellBorderColorHover;
            background-size: 0;
        }

        /* Styling on list item selection */
        .oj-listview.oj-focus-ancestor .oj-listview-item.oj-selected,
        .oj-listview.oj-focus-ancestor .oj-listview-card.oj-selected,
        .oj-listview.oj-focus-ancestor .oj-listview-group-item.oj-selected {
            background-color: $collectionCellBgColorSelected;
        }

        .oj-listview.oj-focus-ancestor:not(.oj-listview-card-layout) .oj-listview-item.oj-selected,
        .oj-listview.oj-focus-ancestor:not(.oj-listview-card-layout) .oj-listview-item.oj-selected + li.oj-listview-item {
            border-top: 1px solid $collectionCellBorderColorSelected;
            background-size: 0;
        }

        /* Styling on list item inactive selection (when the root is not focus) */
        .oj-listview-item.oj-selected,
        .oj-listview-card.oj-selected,
        .oj-listview-group-item.oj-selected {
            background-color: $collectionCellBgColorSelectedInactive;
        }

        .oj-listview:not(.oj-listview-card-layout) .oj-listview-item.oj-selected,
        .oj-listview:not(.oj-listview-card-layout) .oj-listview-item.oj-selected + li.oj-listview-item {
            border-top: 1px solid $collectionCellBorderColorSelectedInactive;
            background-size: 0;
        }

        /* Styling on focused list or group item */
        .oj-listview-card.oj-focus-highlight,
        .oj-listview-item.oj-focus-highlight,
        .oj-listview-group-item.oj-focus-highlight {
            position: relative;
        }

        .oj-listview-card.oj-focus-highlight::after,
        .oj-listview-item.oj-focus-highlight::after,
        .oj-listview-group-item.oj-focus-highlight::after {
            content: "";
            position: absolute;
            pointer-events: none;
            top: 1px;
            width: calc(100% - 2px);
            height: calc(100% - 2px);
            @include oj-ltr() {
                left: 1px;
            }
            @include oj-rtl() {
                right: 1px;
            }

              @include oj-browser-focus-outline-approximation($primaryTextColor);

        }

        /* Styling on expand/collapse icon when it has focus highlight */
        .oj-listview-expanding-icon.oj-focus-highlight::before,
        .oj-listview-expand-icon.oj-focus-highlight::before,
        .oj-listview-collapse-icon.oj-focus-highlight::before {

            @include oj-browser-focus-outline-approximation($primaryTextColor);

        }

        /* Styling on focused list item */
        .oj-listview.oj-focus-ancestor:not(.oj-listview-card-layout) .oj-listview-item.oj-focus,
        .oj-listview.oj-focus-ancestor:not(.oj-listview-card-layout) .oj-listview-item.oj-focus + li.oj-listview-item {
            border-top: 1px solid $collectionCellBorderColorFocus;
            background-size: 0;
        }

        /* Styling for the list item elements in selected state when listview is in high contrast mode. */
        .oj-hicontrast .oj-listview-card.oj-selected,
        .oj-hicontrast .oj-listview-item.oj-selected,
        .oj-hicontrast .oj-listview-group-item.oj-selected {
            border-width: 1px 2px 2px 1px;
            border-style: solid;
            border-color: initial;
        }

        /* Styling for the list item elements in focus state when listview is in high contrast mode. */
        .oj-hicontrast .oj-listview-card.oj-focus-highlight,
        .oj-hicontrast .oj-listview-item.oj-focus-highlight,
        .oj-hicontrast .oj-listview-group-item.oj-focus-highlight {
            outline-width: 2px;
            outline-style: dotted;
            border-width: 0 1px 1px 0;
            border-style: dotted;
        }

        /* Styling addition for group items */
        .oj-listview-group-item {

            font-weight: $listViewHeaderFontWeight;
            color: $headerTextColor;
            padding: $panelPadding;
            border: 0 solid $headerBorderColor;
            border-width: $listViewHeaderBorderWidth;
            font-size: $listViewHeaderFontSize;
            background-color: $headerBgColor;
            opacity: $listViewHeaderOpacity;

            box-sizing: border-box;
            @include oj-rtl() {
                right: 0;
            }
        }

        .oj-listview-item-element.oj-expanded .oj-listview-group-item,
        .oj-listview-item-element.oj-collapsed .oj-listview-group-item {
            padding: 3px 0;
        }

        /* Styling for group items when it has no children or in collapsed state */
        .oj-listview-item-element.oj-collapsed .oj-listview-group-item,
        .oj-listview-group-item.oj-empty {

            border-width: $listViewHeaderBorderWidthCollapsed;

        }

        /* Styling for group item element that has focus */
        .oj-listview-group-item .oj-focus,
        .oj-listview-group-item .oj-selected {
            background-color: transparent;
            background-image: none;
        }

        /* Styling for group item element that is sticky */
        .oj-listview-group-item.oj-sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        /* Styling for group item element that is pinned when scrolled */
        .oj-listview-group-item.oj-pinned {
            position: absolute;
            z-index: 1;
        }

        /* expand and collapse animation */
        .oj-listview-collapsible-transition {
            overflow: hidden;
        }

        /* Styling on the status text, such as fetching data */
        .oj-listview-status-message {
            position: absolute;

            padding: $panelPadding;

            display: none;
        }

        /* Styling for the container of custom no data content */
        .oj-listview-no-data-container {
            width: 100%;
            height: 100%;
        }

        /* Styling for the empty list text */
        .oj-listview-no-data-message {

            padding: $panelPadding;
            background-color: $collectionCellBgColor;
            min-height: $fontSize;

        }

        /* Alignment for the expand and collapse icons */
        .oj-listview-expand-icon,
        .oj-listview-collapse-icon {
            padding: 9px;
        }

        /* Styling for the load icon while expanding */
        .oj-listview-expanding-icon {
            @extend .oj-fwk-icon-load;
            padding-top: 9px;
            padding-bottom: 9px;
            @include oj-rtl() {
                margin-right: 16px;
                margin-left: 9px;
            }
            @include oj-ltr() {
                margin-left: 16px;
                margin-right: 9px;
            }
        }

        /* Styling for item when display mode is card */
        .oj-listview-card {
            margin-top: oj-shorthand-property-value-top($listViewCardMargin);
            @include oj-rtl() {
                margin-left: oj-shorthand-property-value-top($listViewCardMargin);
            }
            @include oj-ltr() {
                margin-right: oj-shorthand-property-value-top($listViewCardMargin);
            }
        }

        /* Styling for group item when display mode is card */
        .oj-listview-card-group {
            display: flex;
            flex-wrap: wrap;
            list-style-type: none;
            padding: 0 0 oj-shorthand-property-value-top($listViewCardMargin) 0;
        }

        /* Styling for group content when listview is filling the entire width and display mode is card */
        .oj-listview.oj-listview-full-width > .oj-listview-element > li > .oj-listview-card-group,
        .oj-listview.oj-full-width > .oj-listview-element > li > .oj-listview-card-group {
            @include oj-rtl() {
                padding-left: oj-shorthand-property-value-left($listViewCardMargin);
                padding-right: oj-shorthand-property-value-right($listViewCardMargin);
            }
            @include oj-ltr() {
                padding-right: oj-shorthand-property-value-left($listViewCardMargin);
                padding-left: oj-shorthand-property-value-right($listViewCardMargin);
            }
        }        

        /* Styling for group item when card layout is used */
        .oj-listview-card-layout .oj-listview-group {
            display: flex;
            flex-wrap: wrap;

            margin-bottom: oj-shorthand-property-value-top($listViewCardMargin);

        }

        /* Styling for item when card layout is used */
        .oj-listview-card-layout li.oj-listview-item {

            width: $listViewCardWidth;
            height: $listViewCardHeight;
            border: 1px solid $panelBorderColor;
            border-radius: $panelBorderRadius;
            margin-top: oj-shorthand-property-value-top($listViewCardMargin);
            margin-bottom: oj-shorthand-property-value-bottom($listViewCardMargin);
            @include oj-rtl() {
                margin-right: oj-shorthand-property-value-left($listViewCardMargin);
                margin-left: oj-shorthand-property-value-right($listViewCardMargin);
            }
            @include oj-ltr() {
                margin-left: oj-shorthand-property-value-left($listViewCardMargin);
                margin-right: oj-shorthand-property-value-right($listViewCardMargin);
            }

            background-size: 0;
            box-sizing: border-box;
        }

        /* Styling for group content when listview is filling the entire width and card layout is used */
        /* for now, first level group header or no group headers only */
        .oj-listview.oj-listview-full-width.oj-listview-card-layout > .oj-listview-element > li > .oj-listview-group,
        .oj-listview.oj-full-width.oj-listview-card-layout > .oj-listview-element > li > .oj-listview-group,
        .oj-listview.oj-listview-full-width > .oj-listview-card-layout > li > .oj-listview-group,
        .oj-listview.oj-full-width > .oj-listview-card-layout > li > .oj-listview-group {

            @include oj-rtl() {
                margin-left: oj-shorthand-property-value-left($listViewCardMargin);
                margin-right: oj-shorthand-property-value-right($listViewCardMargin);
            }
            @include oj-ltr() {
                margin-right: oj-shorthand-property-value-left($listViewCardMargin);
                margin-left: oj-shorthand-property-value-right($listViewCardMargin);
            }

        }

        /* Styling for group header when listview is filling the entire width */
        /* for now, first level group header only */
        .oj-listview.oj-listview-full-width > .oj-listview-element > li > .oj-listview-group-item,
        .oj-listview.oj-full-width > .oj-listview-element > li > .oj-listview-group-item {
            border-left-style: none;
            border-right-style: none;
        }

        /* Styling for the drill icon */
        .oj-listview-drill-icon {
            @extend .oj-fwk-icon;
            width: 16px;
            height: 16px;
            color: $listViewDrillIconColor;
        }

        /* Styling for the drill icon when item has focus */
        .oj-listview.oj-focus-ancestor .oj-listview-item.oj-focus .oj-listview-drill-icon {

            color: $iconColorActive;

        }

        /* Styling for the drill icon when item is selected */
        .oj-listview.oj-focus-ancestor .oj-listview-item.oj-selected .oj-listview-drill-icon {

            color: $iconColorSelected;

        }

        /* Styling for the drill icon when hover over an item */
        .oj-listview-item.oj-hover .oj-listview-drill-icon {

            color: $iconColorHover;

        }

        /* Styling for the container of the activity indicator for high watermark scrolling */
        .oj-listview-card-layout li.oj-listview-loading-icon-container {
            width: 100%;
            border-style: none;
        }

        /* Styling for the activity indicator for high watermark scrolling */
        .oj-listview-loading-icon {
            display: block;
            width: 40px;
            height: 40px;
            margin: auto;
            @include oj-icon-content(
                $icon: oj-image-url("spinner_full.gif"),
                $lowResProportion: 0.25
            );
        }

        /* Styling for the affordance icon */
        .oj-listview-drag-handle {
            @extend .oj-fwk-icon;
            @extend .oj-fwk-icon-move-handle;
            cursor: move;
        }

        /* Styling for the affordance icon when card layout is used */
        .oj-listview-card .oj-listview-drag-handle,
        .oj-listview-card-layout .oj-listview-drag-handle {
            @extend .oj-fwk-icon-drag;
            background-image: none;
            width: auto;
            height: auto;
            font-size: 16px;
        }

        /* Styling for the drag image */
        .oj-listview-drag-image {
            background-color: transparent;
            position: absolute;
            top: -10000px;
            border: 1px solid transparent;
        }

        /* Styling for hiding the original item being dragged */
        .oj-listview-drag-item {
            display: none;
        }

        /* Styling item that is draggable (no affordance) */
        .oj-listview-item.oj-draggable {
            cursor: move;
        }

        /* Styling for the item that is being moved using drag */
        .oj-listview-item.oj-drag {

            box-shadow: $largeBoxShadow;
            border-top: 1px solid $collectionCellDragImageBorderColor;
            border-bottom: 1px solid $collectionCellDragImageBorderColor;

        }

        /* Styling all drop targets in the list */
        .oj-listview-item.oj-drop {
            background-color: transparent;
        }

        /* Styling for group item and on empty list as drop targets in the list */
        .oj-listview-group-item.oj-drop,
        .oj-listview-empty-text.oj-drop {
            background-color: $dropTarget1Color;
        }

        /* Styling on drag source when dnd with another component */
        .oj-listview-drag-source
        {
            opacity: 0.3;
        }

        /* Styling on drop target when dnd with another component */
        .oj-listview-drop-target
        {
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: $dropTargetLineColor;
        }

        /* Styling on drop target above the first item */
        .oj-listview-first-drop-target
        {
            position: absolute;
            width: 100%;
            height: 10px;
            background-color: transparent;
        }

        /* Styling for an item that is cut during a context menu cut operation */
        .oj-listview-cut {
            opacity: 0.8;
        }

        /* Styling for the placeholder item for the last item gridline */
        .oj-listview-gridline-placeholder {
            background-image: linear-gradient($collectionCellBorderColor, $collectionCellBorderColor);
            background-position: $listViewItemBorderPosition 0;
            background-size: 100% 1px;
            background-repeat: no-repeat;
            height: 1px;
        }

    }
}