:is(.table, .table-wrap) {
  --table-width: 100%;
  --table-bg: var(--theme-bg-1);
  --table-border-width: 1px;
  --table-border-color: var(--theme-bd-2);
  --table-item-padding: 0.75em 1em;
  --table-item-vertical-align: top;
  --table-th-border-bottom-width: 1px;
  --table-paint-bg: var(--theme-paint);
  --table-paint-bg-alpha: 70%;
  --table-paint-color: var(--theme-paint-tx);
  --table-spot-bg: var(--theme-spot);
  --table-spot-bg-alpha: 30%;
  --table-danger-bg: var(--theme-danger);
  --table-danger-bg-alpha: 20%;
  --table-stripe-bg: var(--theme-dark);
  --table-stripe-bg-alpha: 5%;
  --table-wrap-shadow-color: var(--theme-shadow);
  --table-wrap-shadow-color-alpha: 10%;
}

:is(.table, .table-wrap) {
  --table-paint-bg-mix: color-mix(
    in srgb,
    var(--table-paint-bg) var(--table-paint-bg-alpha),
    transparent calc(100% - var(--table-paint-bg-alpha))
  );
  --table-spot-bg-mix: color-mix(
    in srgb,
    var(--table-spot-bg) var(--table-spot-bg-alpha),
    transparent calc(100% - var(--table-spot-bg-alpha))
  );
  --table-danger-bg-mix: color-mix(
    in srgb,
    var(--table-danger-bg) var(--table-danger-bg-alpha),
    transparent calc(100% - var(--table-danger-bg-alpha))
  );
  --table-stripe-bg-mix: color-mix(
    in srgb,
    var(--table-stripe-bg) var(--table-stripe-bg-alpha),
    transparent calc(100% - var(--table-stripe-bg-alpha))
  );
  --table-wrap-shadow-color-mix: color-mix(
    in srgb,
    var(--table-wrap-shadow-color) var(--table-wrap-shadow-color-alpha),
    transparent calc(100% - var(--table-wrap-shadow-color-alpha))
  );
}

.table {
  width: var(--table-width);
  background: var(--table-bg);
  border-collapse: collapse;
  border-spacing: 0;
}

.table:is(.is-border, .is-outline) {
  border-width: var(--table-border-width);
  border-color: var(--table-border-color);
}

.table.is-border :where(:is(td, th)) {
  border-width: var(--table-border-width);
  border-color: var(--table-border-color);
}

.table.is-line {
  border-top-width: var(--table-border-width);
  border-top-color: var(--table-border-color);
  border-bottom-width: var(--table-border-width);
  border-bottom-color: var(--table-border-color);
}

.table.is-line :where(tbody > tr:not(:first-child)) {
  border-top-width: var(--table-border-width);
  border-top-color: var(--table-border-color);
}

.table :where(:is(th, td)) {
  padding: var(--table-item-padding);
  vertical-align: var(--table-item-vertical-align);
}

.table :where(thead > tr:last-child > th) {
  border-bottom-width: var(--table-th-border-bottom-width);
  border-bottom-color: var(--table-border-color);
}

.table :where(tr.box) {
  display: table-row;
}

.table :where(:is(th.box, td.box)) {
  display: table-cell;
}

.table :where(:is(tr, th, td)).is-paint {
  background: var(--table-paint-bg-mix);
  color: var(--table-paint-color);
}

.table :where(:is(tr, th, td)).is-spot {
  background: var(--table-spot-bg-mix);
}

.table :where(:is(tr, th, td)).is-danger {
  background: var(--table-danger-bg-mix);
}

.table:where(.is-stripe) :where(thead tr) {
  background: var(--table-stripe-bg-mix);
}

.table:where(.is-stripe) :where(tbody tr:nth-child(even)) {
  background: var(--table-stripe-bg-mix);
}

.table.is-right :is(th, td),
.table :is(tr, th, td).is-right {
  text-align: right;
}

.table.is-center :is(th, td),
.table :is(tr, th, td).is-center {
  text-align: center;
}

.table.is-left :is(th, td),
.table :is(tr, th, td).is-left {
  text-align: left;
}

.table.is-middle :is(th, td),
.table :is(tr, th, td).is-middle {
  vertical-align: middle;
}

.table.is-fixed {
  table-layout: fixed;
}

.table-wrap {
  background-image: linear-gradient(to right, var(--table-bg), var(--table-bg)),
    linear-gradient(to right, var(--table-bg), var(--table-bg)),
    linear-gradient(
      to right,
      var(--table-wrap-shadow-color-mix),
      color-mix(in srgb, var(--table-bg) 0%, transparent 100%)
    ),
    linear-gradient(
      to left,
      var(--table-wrap-shadow-color-mix),
      color-mix(in srgb, var(--table-bg) 0%, transparent 100%)
    );
  background-position: left center, right center, left center, right center;
  background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
  background-attachment: local, local, scroll, scroll;
  background-repeat: no-repeat;
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap .table {
  background: transparent;
}