/*!
 * Pico Reforged v2.0.1 (https://pico.rusticstack.com)
 * Copyright 2019-2024 Lucas Larroche and the Pico CSS authors
 * Copyright 2026 rusticstack
 * Licensed under MIT
 */
@layer pico.tokens, pico.theme, pico.core;

@layer pico.extras {
  :root, :host, [data-theme] {
    --pico-data-table-head-background-color: var(--pico-card-sectioning-background-color);
    --pico-data-table-row-hover-background-color: var(--pico-dropdown-hover-background-color);
    --pico-data-table-row-selected-background-color: var(--pico-primary-subtle-background);
    --pico-data-table-scroll-max-block-size: none;
    --pico-data-table-scroll-padding-block-start: 0;
    --pico-data-table-compact-padding-block: calc(var(--pico-spacing) / 4);
    --pico-data-table-compact-padding-inline: calc(var(--pico-spacing) / 2);
    --pico-data-table-sort-idle-opacity: .75;
  }

  :where(div[role="region"]:has( > table)) {
    max-block-size: var(--pico-data-table-scroll-max-block-size);
    margin-bottom: var(--pico-typography-spacing-vertical);
    border: var(--pico-border-width) solid var(--pico-muted-border-color);
    border-radius: var(--pico-card-border-radius);
    scroll-padding-block-start: var(--pico-data-table-scroll-padding-block-start);
    overflow: auto;
  }

  :where(div[role="region"]:has( > table)):focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: 0;
  }

  :where(div[role="region"]:has( > table)) > table {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
  }

  :where(div[role="region"]:has( > table)) > table > thead th {
    z-index: 1;
    background-color: var(--pico-data-table-head-background-color);
    position: sticky;
    inset-block-start: 0;
  }

  :where(th, td)[data-type="numeric"] {
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  table[data-table] :where(th, td):has( > input[type="checkbox"]:only-child) {
    white-space: nowrap;
    inline-size: 1%;
  }

  table[data-table] :where(th, td):has( > input[type="checkbox"]:only-child) > input[type="checkbox"] {
    vertical-align: middle;
    margin: 0;
  }

  table[data-table] > caption {
    padding: 0 var(--pico-spacing) calc(var(--pico-spacing) / 2);
  }

  :where(div[role="region"]) > :is(table[data-table] > caption) {
    padding-block-start: calc(var(--pico-spacing) * .75);
  }

  table[data-table] > caption {
    color: var(--pico-color);
    text-align: start;
    font-weight: 600;
  }

  table[data-table] > tbody > tr:not([aria-selected="true"]):hover > * {
    background-color: var(--pico-data-table-row-hover-background-color);
  }

  table[data-table] > tbody > tr[aria-selected="true"] > * {
    background-color: var(--pico-data-table-row-selected-background-color);
  }

  table[data-table] > tbody > tr[aria-selected="true"] > :first-child {
    position: relative;
  }

  table[data-table] > tbody > tr[aria-selected="true"] > :first-child:before {
    background-color: var(--pico-primary-background);
    content: "";
    inline-size: .125rem;
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
  }

  th[aria-sort] > button {
    border-radius: var(--pico-border-radius);
    inline-size: auto;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
    cursor: pointer;
    background: none;
    border: 0;
    align-items: center;
    gap: .375em;
    margin: 0;
    padding: 0;
    display: inline-flex;
  }

  th[aria-sort] > button:after {
    content: "↕";
    content: "↕" / "";
    opacity: var(--pico-data-table-sort-idle-opacity);
    flex: none;
    font-size: 1em;
    font-weight: 400;
    line-height: 1;
  }

  th[aria-sort] > button:hover, th[aria-sort] > button:active, th[aria-sort] > button:focus {
    box-shadow: none;
    color: var(--pico-primary-hover);
    background: none;
  }

  th[aria-sort] > button:hover:after {
    opacity: 1;
  }

  th[aria-sort] > button:focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: .25rem;
  }

  :where(div[role="region"]) > table > :last-child > tr:last-child > * {
    border-bottom: 0;
  }

  th[data-type="numeric"][aria-sort] > button {
    flex-direction: row-reverse;
  }

  th[aria-sort="ascending"] > button:after {
    content: "↑";
    content: "↑" / "";
    opacity: 1;
  }

  th[aria-sort="descending"] > button:after {
    content: "↓";
    content: "↓" / "";
    opacity: 1;
  }

  table[data-density="compact"] :is(th, td) {
    padding-block: var(--pico-data-table-compact-padding-block);
    padding-inline: var(--pico-data-table-compact-padding-inline);
    font-size: .875em;
  }

  @media (forced-colors: active) {
    table[data-table] > tbody > tr[aria-selected="true"] > * {
      box-shadow: inset 0 .125rem canvastext, inset 0 -.125rem canvastext;
    }
  }
}

@layer pico.utilities;