<template>
  <table class="table">
    <slot />
  </table>
</template>

<style
  lang="postcss"
  scoped
>
  .table {
    width: 100%;
    font-size: 0.875rem;

    & >>> tr {
      position: relative;
      height: 3rem;
      break-inside: avoid;

      & td {
        position: relative;
        break-inside: avoid;
      }

      & td, th {
        padding: 0.7rem 1rem;
        vertical-align: middle;
      }
    }

    & thead {
      border: none;
      display: table-header-group;
      break-inside: avoid;

      & tr {
        font-weight: bold;
        border: none;
        background-color: var(--pale-blue);
        color: var(--purple-light-mode);

        .dark-mode & {
          background-color: var(--pale-blue-dark-mode);
          color: var(--blue-dark-mode);
        }

        & th {
          text-align: left;
        }
      }
    }

    & tbody {
      border: none;

      & >>> tr {
        background-color: white;
        border-bottom: solid 1px var(--grey);

        .dark-mode & {
          background-color: transparent;
          border-bottom: 1px solid rgba(248, 248, 252, 0.8);
        }
      }
    }
  }
</style>
