/**
 * 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%;
  max-height: calc(100vh - 2rem);
  max-width: calc(100vw - 2rem);
  border-collapse: collapse;
  margin: 0;
  table-layout: fixed;
  background-color: ${Theme.colors.gray900};
`;

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} 0;
      z-index: 10;

      &:last-child {
        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: 1px solid transparent;
  border-right-color: ${colors.gray700};
  & 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: 3rem;
    & td {
      color: ${colors.white};
      padding: ${Theme.spacing.small};
      word-wrap: break-word;
      font-size: ${typography.fontSizeS};
      position: relative;
      text-align: center;

      & > div,
      & > p {
        text-align: center;
        justify-content: center;
      }

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