/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { css } from 'lit';

/**
 * Resizable Styles Utility
 * Centralized styles for resizable table functionality
 */

export const resizableTableStyles = css`
  :host([resizable]) .base {
    overflow: unset;
  }
  :host([resizable]) .nile__table__body {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    position: relative;
  }
`;

export const resizableHeaderStyles = css`
  :host([resizable]) .headers {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));
    position: relative;
  }

  :host([resizable]) .header__item__wrapper {
    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
    position: relative;
  }

  :host([resizable]) .headers {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
`;

export const resizerStyles = css`
  .resizer {
    position: absolute;
    right: 0;
    top: 0px;
    bottom: 0px;
    width: 8px;
    cursor: col-resize;
    user-select: none;
    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
    transition: background-color 0.2s;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  :host([resizable]):hover .resizer {
    opacity: 1;
    pointer-events: auto;
  }

  .resizer::before {
    content: '';
    position: absolute;
    right: 0px;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
    opacity: 0.8;
  }

  .resizer:hover {
    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
  }

  .resizer:hover::before {
    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));
    opacity: 1;
  }

  .resizer.resizing {
    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
    opacity: 1;
    pointer-events: auto;
  }

  .resizer.resizing::before {
    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));
    opacity: 1;
    width: 3px;
  }
`;

export const resizableCellStyles = css`
  :host([resizable]) .column {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
`;

export const headerResizerStyles = css`
  .resizer {
    position: absolute;
    right: -2px;
    top: -1000px;
    bottom: -1000px;
    width: 8px;
    cursor: ew-resize;
    user-select: none;
    transition: background-color 0.2s;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  :host([resizable]):hover .resizer {
    opacity: 1;
  }

  .resizer::before {
    content: '';
    position: absolute;
    height: 100%;
    opacity: 0.8;
  }

  .resizer.resizing {
    border-right: 4px double var(--nile-colors-neutral-400);
    background-color: transparent;
    opacity: 1;
  }

  :host([resizable]) .headers {
    text-overflow: ellipsis;
    white-space: nowrap;
  }
`;

export const resizableSlotStyles = css`
  :host([resizable]) ::slotted(*) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }

  :host([resizable]) ::slotted(span),
  :host([resizable]) ::slotted(div),
  :host([resizable]) ::slotted(p) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
`;

export const tableLayoutStyles = css`
  .nile__table__body[resizable] {
    table-layout: fixed;
  }
`;