// Copyright (C) 2025 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@import "../theme";

$border-1: 1px solid var(--pf-color-border);
$border-2: 1px solid var(--pf-color-border-secondary);
$border-3: 2px solid var(--pf-color-border);

.pf-grid-header-cell {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  white-space: nowrap;

  &__main-content {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

  &__title {
    display: flex;
    align-items: baseline;
    overflow: hidden;
  }

  &__title-wrapper {
    flex-shrink: 1; // The title should shrink if necessary to avoid overflow.
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0.3em 0.5em;
  }

  &__sub-content {
    padding: 0.3em 0.5em;
  }

  .pf-visible-on-hover {
    display: none;

    &.pf-active {
      display: block;
    }
  }

  &:hover {
    .pf-visible-on-hover {
      display: block;
    }
  }
}

.pf-grid-cell {
  align-items: baseline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &--padded {
    padding: 0.3em 0.5em;
  }

  &--align-right {
    text-align: right;
  }

  &--align-center {
    text-align: center;
  }

  &--nullish {
    font-style: italic;
    color: var(--pf-color-text-muted);
    text-align: center;
  }

  &--hint {
    color: var(--pf-color-text-hint);
  }

  &[active] {
    background: color_active(transparent);
  }

  &--wrap {
    white-space: normal;
  }
}

.pf-grid {
  font-family: var(--pf-font-compact);
  font-size: 14px;
  overflow: auto;
  align-items: flex-start;
  isolation: isolate; // Improves layerization performance.

  // If fill height is set, the grid should fill the height of its parent, and
  // the table content should scroll, otherwise it takes the height of the table
  // content.
  &--fill-height {
    height: 100%;
  }

  &__header {
    display: flex;
    flex-direction: column;
    background: var(--pf-color-background);
    border-bottom: $border-1;
    min-width: max-content;
    position: sticky;
    top: 0;
    z-index: 1; // Ensure header is above body rows when scrolling.
  }

  &__puck {
    will-change: transform; // Improves layerization performance.
  }

  &__body {
    min-width: max-content;

    .pf-grid__row {
      &:hover {
        background-color: color_hover(transparent);
      }
      border-bottom: $border-2;
    }
  }

  &__row {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: row;
    overflow: hidden;
  }

  &__cell-container {
    position: relative; // Positioned element in order to place absolutely positioned children relative to this.
    border-right: $border-2;

    &[draggable="true"] {
      cursor: grab;

      &:active {
        cursor: grabbing;
      }
    }

    &--border-right-thick {
      border-right: $border-3;
    }

    &--drag-over {
      &::after {
        content: "";
        position: absolute; // Control positioning within cell.
        inset-block: 0; // Fill full height of cell.
        width: 3px; // Visible width of the reorder indicator.
        background-color: var(--pf-color-accent);
      }

      &-before::after {
        left: -2px; // Show indicator on the left.
      }

      &-after::after {
        right: -2px; // Show indicator on the right.
      }
    }
  }

  &__resize-handle {
    position: absolute; // Control positioning within cell.
    width: 9px; // Wider than visible to make it easier to grab.
    right: -5px; // Straddle cell right border.
    inset-block: 0; // Fill full height of cell.
    z-index: 1; // Appear above adjacent cells.
    cursor: col-resize; // Indicate resizability.
    user-select: none; // Prevent text selection while resizing.
    touch-action: none; // Disable touch gestures like scrolling while dragging.

    &:hover,
    &:active {
      &::after {
        content: "";
        position: absolute; // Control positioning within resize handle.
        left: 3px; // Center within resize handle.
        width: 3px; // Narrower than resize handle to avoid looking too busy.
        inset-block: 0; // Fill full height of cell.
        background-color: var(--pf-color-accent);
      }
    }
  }
}

.pf-grid-filter {
  .pf-chip__label {
    max-width: 300px;
  }
}
