@use 'sortable-base.scss';

.sortable {
  --stripe-bg: #e4e4e4;
  --stripe-color: #000;
  --stripe-bg-odd: #fff;
  --stripe-color-odd: #111;
  --th-bg: #808080;
  --th-color: #fff;

  border-spacing: 0;

  &.sticky {
    thead {
      th {
        position: sticky;
        top: 0;
        z-index: 1;
      }
    }
  }

  tbody {
    tr {
      background-color: var(--stripe-bg);
      color: var(--stripe-color);

      &:nth-child(odd) {
        background-color: var(--stripe-bg-odd);
        color: var(--stripe-color-odd);
      }
    }
  }

  thead {
    th {
      background: var(--th-bg);
      color: var(--th-color);
      font-weight: normal;
      text-align: left;
      text-transform: capitalize;
      vertical-align: baseline;
      white-space: nowrap;
    }

    td,
    th {
      &:first-child {
        border-top-left-radius: 4px;
      }

      &:last-child {
        border-top-right-radius: 4px;
      }
    }
  }
  td,
  th {
    padding: 10px;
  }
}