table.css

@layer components {
  /* GOV UK Base styles */
  table,
  .table {
    border-spacing: 0;
    @apply w-full mb-gutter border-collapse;
  }
  table th,
  table td {
    padding: 0.632em 1.05em 0.4743em 0;
    @apply leading-tight text-smaller text-left border-solid border-0 border-b-1 border-gray-300 align-baseline;
  }
  thead th {
    @apply font-bold;
  }
  td:last-child,
  th:last-child,
  .table-field-heading:last-child {
    padding-right: 0 !important;
  }
  table .numeric {
    /* Right align table header cells and table cells with a numeric class */
    @apply text-right;
  }
  td.numeric {
    @apply font-body;
  }
  table caption {
    @apply text-left;
  }

  .table-font-xsmall th,
  .table-font-xsmall td.table-field-index,
  .table-font-xsmall th.table-field-index {
    @apply font-bold;
  }
  .table-font-xsmall td {
    @apply font-normal;
  }
  .table-font-xsmall th,
  .table-font-xsmall td {
    padding: 0.75em 1.25em 0.5625em 0;
    @apply text-small leading-tight;
  }

  /* NOTIFY TABLE STYLES */
  /*! purgecss start ignore */

  td {
    @apply align-top;
  }

  .table-heading {
    @apply my-gutterHalf mx-0 text-left;
  }

  .table-row-group {
    @apply bg-white odd:bg-gray-100 border-0 border-b-1 border-solid border-gray-300;
  }

  .dashboard-table .heading-medium {
    @apply mb-2;
  }

  .dashboard-table .table {
    @apply table-fixed;
  }

  .dashboard-table .table-field-headings th {
    font-size: 1px;
  }
  .dashboard-table .table-field-headings-visible th {
    @apply pb-2;
  }

  .dashboard-table .table-row th {
    width: 52.5%;
    @apply font-normal table-cell;
  }

  .settings-table table {
    @apply mb-2 table-fixed;
  }
  .settings-table th:first-child {
    width: 35%;
  }
  .settings-table th:last-child {
    width: 17.5%;
  }
  .settings-table td.table-field-left-aligned:first-child div {
    white-space: normal;
  }
  .settings-table td.table-field-left-aligned ul li {
    @apply mb-2;
  }
  .settings-table .table-heading {
    @apply mb-8;
  }
  .table-field-index {
    width: 15px;
    @apply relative text-smaller leading-tight font-bold;
  }
  .table-field-index a:before {
    content: "";
    @apply absolute inset-0;
  }
  .table-field-index a:focus:before {
    z-index: -1;
    @apply bg-yellow;
  }
  .table-field p {
    @apply m-0 mb-2;
  }
  .table-field-error {
    padding-left: 7px;
    @apply border-0 border-l-4 border-solid border-red;
  }

  .table-field-noborder {
    @apply border-0;
  }

  .table-field-headings th {
    padding: 1px; /* needs some height for the grey border to show */
  }
  .table-field-headings-visible {
    @apply h-auto;
  }
  .table-field-headings-visible th {
    padding: 0.75em 1.25em 0.5625em 0;
  }
  .table-field-headings th,
  .table-field-headings-visible th {
    @apply text-smaller leading-tight font-bold align-baseline;
  }
  .dashboard-table .table-field-heading-first,
  .dashboard-table .table-field-headings-first,
  .dashboard-table .table-field-headings-visible-first {
    width: 52.5%;
  }

  .table + .table-show-more-link {
    margin-top: -30px;
  }

  .table-field-error-label {
    @apply block font-bold text-red;
  }
  .table-field-invisible-error {
    padding-left: 7px;
    @apply block border-0 border-l-4 border-solid border-transparent;
  }
  .table-field-status-default {
    @apply text-gray-grey1;
  }
  .table-field-status-error {
    @apply font-bold text-red;
  }
  .table-field-status-error a:link,
  .table-field-status-error a:visited {
    @apply text-red;
  }
  .table-field-status-error .status-hint {
    @apply block font-normal text-red mt-2;
  }
  .table-field-status-yes,
  .table-field-status-no {
    text-indent: -999em;
    background-position: 50% 50%;
    @apply block bg-no-repeat bg-[1em];
  }
  .table-field-status-yes {
    @apply bg-tick;
  }

  .table-field-right-aligned {
    @apply text-right;
  }
  .table-field-heading-right-aligned {
    @apply block text-right;
  }
  .table-field-right-aligned a {
    @apply relative;
  }
  .table-field-right-aligned a:hover {
    @apply text-blue-lightblue;
  }
  .table-field-right-aligned a:active,
  .table-field-right-aligned a:focus {
    @apply text-black;
  }
  .table-field-right-aligned a:active:before,
  .table-field-right-aligned a:focus:before {
    right: -3px;
    border-width: 15px 3px 15px 15px;
    @apply border-solid border-yellow;
  }

  .table-empty-message,
  .table-no-data {
    padding-top: 0.75em;
    padding-bottom: 0.5625em;
    @apply text-small leading-tight text-gray-grey1 px-0;
  }
  td.table-empty-message {
    border: none;
  }
  .table-no-data {
    @apply mt-4 mb-16;
  }

  .table-show-more-link {
    @apply text-small leading-tight font-normal text-gray-grey1 py-4 px-0 text-center border-0 border-b-1 border-solid border-gray-300 mb-16;
  }
  a.table-show-more-link {
    @apply text-blue;
  }

  .wide-left-hand-column {
    max-width: 560px;
    @apply block;
  }

  .truncate-text {
    @apply truncate;
  }

  .do-not-truncate-text {
    white-space: normal !important;
  }

  .spreadsheet thead {
    user-select: none;
  }
  .spreadsheet .table {
    @apply mb-0;
  }

  .spreadsheet th,
  .spreadsheet .table-field-index {
    @apply font-bold text-center bg-gray-grey4;
  }

  .spreadsheet th,
  .spreadsheet td {
    @apply px-4 border-1 border-solid border-gray-300;
  }

  .spreadsheet tbody td {
    /* 194 is the width of the table * 1/3.5, so the overflow cuts off
    // at 3.5 columns wide.
    // 11 accounts for the padding of the table cell
    */
    min-width: 194px - 11px;
    @apply border-t-0;
  }
  .spreadsheet td:first-child {
    min-width: auto;
  }
  .spreadsheet .fullscreen-fixed-table {
    z-index: 1000;
  }
  .spreadsheet .fullscreen-fixed-table .table-field-heading-first {
    @apply bg-gray-grey4;
  }

  /*
  * Responsive Tables
  */
  .scrollable-table {
    overflow: auto;
    scrollbar-color: rgba(175, 185, 195, 1) white;
  }
  .scrollable-table table {
    table-layout: inherit !important;
  }
  .scrollable-table:focus {
    @apply outline-yellow;
  }

  .scrollable-table table {
    margin: 0;
  }

  /* Scrolling Visual Cue */
  .scrollable-table {
    background:
      linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
      linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) 0 100%,
      linear-gradient(
        to right,
        rgba(175, 185, 195, 0.3) 0,
        rgba(175, 185, 195, 0) 100%
      ),
      linear-gradient(
          to left,
          rgba(175, 185, 195, 0.3) 0,
          rgba(175, 185, 195, 0) 100%
        )
        0 100%;
    background-repeat: no-repeat;
    background-color: #fff;
    background-size:
      40px 100%,
      40px 100%,
      15px 100%,
      15px 100%;
    background-position:
      0 0,
      100%,
      0 0,
      100%;
    background-attachment: local, local, scroll, scroll;
  }
  /*
  * END Responsive Tables
  */

  /*! purgecss end ignore */
}