@use "../../00-base/01-helpers" as *;

@use "tables-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Tables
// *
////////////////////////////////////////////////////////////////////////////////

// * Tables: general styling
// =============================================================================

table {
  table-layout: fixed;
  margin: 0;
  padding: 0;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;

  // striped table (when class is aded by user, eg in CKE)
  &.is-striped tbody {
    tr:nth-child(odd) {
      background: hsl(var(--clr-border));

      td {
        //
      }
    }
  }
}

// by default: styling for headings in columns
th {
  padding: rem(13) rem(10);
  font-size: var(--fs-base);
  line-height: 1.3;
  font-weight: var(--fw-bold);
  text-align: left;
  vertical-align: top;
  color: hsl(var(--clr-spot-1));
}

td {
  padding: rem(13) rem(10);
  vertical-align: top;
}

// styling headings in rows
thead,
tfoot {
  th {
    //
  }
}

thead {
  th {
    border-bottom: 2px solid hsl(var(--clr-spot-1));
  }
}

tbody {
  th {
    border-right: 2px solid hsl(var(--clr-spot-1));
  }

  td {
    padding: rem(13) rem(10);
  }
}

tr {
  // striped rows (generated by Drupal)
  &.odd {
    background: hsl(var(--clr-border));

    td {
     //
    }
  }
}

caption {
  padding-top: var(--gap-sm);
  padding-bottom: var(--gap-sm);
  text-align: left;
  font-style: italic;
  color: hsl(var(--clr-gray));
}


// ** responsive tables (as used page content)
// =============================================================================

// -- option to reformat or to use a scrollbar: "reformatted" or "scroll"
//    where possible, classes are added via tpl's or templating functions
//    otherwise, it's via JS

.table-responsive {
  &.is-reformatted {
    // -- Most used, e.g. in Commerce tables.
    @include table-responsive("reformatted");
  }
  &.has-scroll {
    // -- Use in CKE because safest.
    @include table-responsive("scroll");
  }
}

// * Styling text in CKE
// =============================================================================

.text-long {
  table {
    margin-bottom: var(--gap-md);

    &.no-margin {
      margin-bottom: 0;
    }
  }
}
