/*
  responsive table component
*/



@layer common-styling {

  .pos-table {
    width: 100%;
  }

    @media (min-width: 801px) {
      .pos-table {
        display: table;
      }
    }

  /* header */
  .pos-table > header {
    text-transform: uppercase;
    color: var(--pos-color-content-text-supplementary);
  }

    @media (min-width: 801px) {
      .pos-table > header {
        display: table-row;
      }

      .pos-table > header > * {
        padding-inline: var(--pos-padding-cell);
        padding-block: calc(var(--pos-padding-cell) / 2);
        display: table-cell;

        font-size: .9rem;
      }

      .pos-table > header > :first-of-type {
        padding-inline-start: 0;
      }

      .pos-table > header > :last-of-type {
        padding-inline-end: 0;
      }
    }

    @media (max-width: 800px) {
      .pos-table > header {
        display: none;
      }
    }

  /* content */
  @media (min-width: 801px) {
    .pos-table-content {
      display: table-row-group;
    }

    .pos-table-content > ul {
      display: table-row;
    }

    .pos-table-content > ul > li {
      padding: var(--pos-padding-cell);
      display: table-cell;
    }

      .pos-table-content > ul > li:first-of-type {
        padding-inline-start: 0;
      }

      .pos-table-content > ul > li:last-of-type {
        padding-inline-end: 0;
      }

    .pos-table-content > ul:not(:first-of-type) > li {
      border-block-start: 1px solid var(--pos-color-frame);
    }

    .pos-table-content:not(.pos-card) > ul:last-of-type > li {
      padding-block-end: 0;
    }
  }

    @media (max-width: 800px) {
      .pos-table-content > ul {
        display: flex;
        flex-direction: column;
        gap: calc(var(--pos-padding-cell) / 2);
      }
    }

  /* content, card variant */
  @media (min-width: 801px) {
    .pos-table-content.pos-card > ul:first-of-type > li:first-of-type {
      border-top-left-radius: var(--pos-radius-card);
    }

    .pos-table-content.pos-card > ul:first-of-type > li:last-of-type {
      border-top-right-radius: var(--pos-radius-card);
    }

    .pos-table-content.pos-card > ul:last-of-type > li:first-of-type {
      border-bottom-left-radius: var(--pos-radius-card);
    }

    .pos-table-content.pos-card > ul:last-of-type > li:last-of-type {
      border-bottom-right-radius: var(--pos-radius-card);
    }

    .pos-table-content.pos-card > ul > li:first-of-type {
      padding-inline-start: var(--pos-padding-cell);
    }

    .pos-table-content.pos-card > ul > li:last-of-type {
      padding-inline-end: var(--pos-padding-cell);
    }
  }

    @media (max-width: 800px) {
      .pos-table-content.pos-card {
        padding: 0;
      }

      .pos-table-content.pos-card > ul {
        padding: var(--pos-padding-card);
      }

      .pos-table-content.pos-card > ul:not(:first-of-type) {
        border-block-start: 1px solid var(--pos-color-page-background);
      }
    }

  /* text formatting */
  @media (min-width: 801px) {
    .pos-table-number {
      text-align: end;
    }

    .pos-table-content-heading {
      display: none;
    }

    .pos-table-cell-priority {
      width: 100%;
    }

    .pos-table-cell-nowrap {
      white-space: nowrap;
    }
  }

  @media (max-width: 800px) {
    .pos-table-content-heading {
      color: var(--pos-color-content-text-supplementary);
    }
    
    .pos-table-content-heading:after {
      content: ': '
    }
  }

}