/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';
import Theme from 'theme';

const {colors, typography, primaryBackground} = Theme;

export const Table = styled.default.table`
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  table-layout: fixed;
  background-color: ${Theme.colors.gray900};
  overflow: visible;
`;

export const Thead = styled.default.thead`
  color: ${colors.white};
  & tr {
    vertical-align: middle;
    border: none;
    & th {
      top: -1px;
      background-color: ${primaryBackground};
      padding: ${Theme.spacing.small} ${Theme.spacing.small};
      z-index: 10;
      text-align: left;
      font-weight: 600;

      &:first-child {
        padding-left: ${Theme.spacing.medium};
      }

      &:last-child {
        padding-right: ${Theme.spacing.medium};
        border: none;
      }
    }
  }
`;

export const TH = styled.default.th<{active?: boolean; border?: boolean; width?: number}>`
  color: ${({active}) => (active ? colors.white : colors.gray500)};
  font-size: ${typography.fontSizeS};
  cursor: pointer;
  border: none;
  & span {
    margin-left: .4rem;
  }
`;

export const Tbody = styled.default.tbody`
  tr:nth-child(odd) {
    background: ${colors.gray800};
  }
  & tr {
    border-color: transparent transparent ${colors.black} transparent;
    height: 2.5rem;
    & td {
      color: ${colors.white};
      padding: ${Theme.spacing.xxSmall};
      word-wrap: break-word;
      font-size: ${typography.fontSizeS};
      position: relative;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &:first-child {
        padding-left: ${Theme.spacing.medium};
      }

      &:last-child {
        padding-right: ${Theme.spacing.medium};
      }

      & > div,
      & > p {
        text-align: left;
        justify-content: flex-start;
      }

      & a {
        color: ${colors.lightBlue};
        text-decoration: none;
      }
    }
  }
`;

export const TableContainer = styled.default.div`
  height: 100%;
  overflow: auto;
`;
