import { css } from 'styled-components';

export const markdownBaseTableCss = css`
  .md-table-wrapper {
    overflow-x: auto;
  }

  table.md {
    width: 100%;
    overflow: hidden;
    word-break: keep-all;
    border-spacing: 0;
    margin: var(--md-table-margin-vertical) 0;
    border-radius: var(--md-table-border-radius);
    border: 1px solid var(--md-table-border-color);

    th,
    td {
      padding: var(--md-table-cell-padding);
      color: var(--md-table-cell-text-color);
      font-size: var(--md-table-font-size);
      line-height: var(--md-table-line-height);
      vertical-align: top;
    }

    thead td,
    thead th,
    tbody td {
      border-bottom: 1px solid var(--md-table-border-color);
    }

    tbody tr:last-child td {
      border-bottom: none;
    }

    tfoot td {
      border-top: 1px solid var(--md-table-border-color);
      padding: var(--md-table-footer-cell-padding);
    }

    thead,
    tfoot {
      background-color: var(--md-table-header-bg-color);
    }

    tr {
      background-color: var(--md-table-stripe-bg-color);
    }

    th {
      /** th has text-align: center by default */
      text-align: left;
      font-weight: var(--md-table-head-font-weight);
      color: var(--md-table-head-text-color);
    }

    /* need to overwrite the text-align: left from above */
    th[align='center'] {
      text-align: center;
    }
    th[align='right'] {
      text-align: right;
    }
  }
`;