@import './../functions', './../variables';

$table: (
  'margin-top': 64,
  'margin-bottom': 32,
  'padding-vertical': 12,
  'padding-horizontal': 20,
  'border': 1,
  'border-radius': 8,
);

@layer base {
  table {
    width: 100%;
    margin: px-to-rem(get-map($table, 'margin-top')) auto
      px-to-rem(get-map($table, 'margin-bottom')) auto;
    border-collapse: separate;
    border-spacing: 0;
    display: table;
    overflow-x: auto;

    &,
    p,
    li {
      text-align: left;
    }
  }

  th,
  td {
    border: px-to-rem(get-map($table, 'border')) solid get-map($theme, 'table_border');
    vertical-align: top;
  }

  th,
  tbody:first-child tr:first-child td {
    background: get-map($theme, 'table_th_bg');
    padding: px-to-rem(get-map($table, 'padding-horizontal'));
    color: get-map($theme, 'table_th');
    font-weight: 600;
    border-right-width: 0;

    /* Add border radius to the corners of the table, not each cell */
    &:first-child {
      border-top-left-radius: px-to-rem(get-map($table, 'border-radius'));
    }

    &:last-child {
      border-top-right-radius: px-to-rem(get-map($table, 'border-radius'));
      border-right-width: px-to-rem(get-map($table, 'border'));
    }
  }

  td {
    padding: px-to-rem(get-map($table, 'padding-vertical'))
      px-to-rem(get-map($table, 'padding-horizontal'));
    border-top-width: 0;
    border-right-width: 0;

    /* Prevent borders with double width due to using border-collapse separate */
    &:last-child {
      border-right-width: px-to-rem(get-map($table, 'border'));
    }
  }

  tr:last-child {
    td {
      &:first-child {
        border-bottom-left-radius: px-to-rem(get-map($table, 'border-radius'));
      }

      &:last-child {
        border-bottom-right-radius: px-to-rem(get-map($table, 'border-radius'));
      }
    }
  }

  // Remove the styling if there's only one row as some old articles use tables
  // to display buttons inline
  tr:first-child:last-child {
    td {
      background: none;
      border: none;
    }
  }
}
