/**
 * 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';
import { resizableHeaderStyles, resizerStyles } from '../internal/resizable-table-styles';

/**
 * TableHeaderItem CSS
 */
export const styles = css`
  :host {
    --cell-min-width: auto;
    --cell-width: auto;
    display: table-cell;
    box-sizing: border-box;
    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));  
  }

  .header__item__wrapper{
    min-width:var(--cell-min-width);
    width:var(--cell-width);
    display:flex;
    align-items:center;
    box-sizing: border-box;
    padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-3-x , var(--ng-spacing-3xl));
    min-height: 44px;
    height: 44px;
  }

  .headers {
    overflow:hidden;
    display: flex;
    align-items: center;
    height: auto;
    width: 100%;
    gap: var(--nile-spacing-md , var(--ng-spacing-xs));
    color: var(--nile-colors-gray-light-mode-600 , var(--ng-colors-text-quaternary-500));
    font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: var(--nile-type-scale-2 , var(--ng-font-size-text-xs));
    font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-semibold));
    font-style: normal;
    /* line-height: var(--nile-type-scale-5); */
    line-height: normal;
  }

  nile-icon {
    cursor: pointer;
  }

  .sorting__icons {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sorting__icons nile-icon:hover {
    opacity: 0.4;
  }

  .hover__arrow {
    opacity: 0.6;
    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
  }

  .headers:hover .hover__arrow {
    /* opacity: 0.3; */
    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
  }

  .stroke-width {
    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
  }

  ${resizableHeaderStyles}
  ${resizerStyles}
`;

export default [styles];