@import './variables';

.s-table__wrapper {
  overflow: auto;
}

.s-table {
  background-color: var(--theme-cards);
  color: var(--theme-text-primary);
  width: 100%;
  border-spacing: 0;

  > tbody,
  > thead,
  > tfoot {
    > tr {
      > td,
      > th {
        padding: 0 16px;
        transition: height map-get($transitions, 'ease-in-out');
      }

      > th {
        user-select: none;
        font-size: $table-regular-header-font-size;
        height: $table-regular-header-height;
        letter-spacing: map-deep-get($headings, 'subtitle-2', 'letter-spacing');
        text-align: left;
      }

      > td {
        font-size: $table-regular-row-font-size;
        height: $table-regular-row-height;
      }
    }
  }

  > thead {
    > tr {
      > th {
        color: var(--theme-text-secondary);
      }

      &:last-child {
        > th {
          border-bottom: thin solid var(--theme-dividers);
        }
      }
    }
  }

  > tbody {
    /* stylelint-disable no-descending-specificity */
    > tr {
      &:not(:last-child) {
        > td,
        > th {
          border-bottom: thin solid var(--theme-dividers);
        }
      }

      &.active {
        background: var(--theme-tables-active);
      }

      &:hover {
        background: var(--theme-tables-hover);
      }
    }
    /* stylelint-enable no-descending-specificity */
  }

  &.dense {
    > tbody,
    > thead,
    > tfoot {
      > tr {
        > td {
          height: $table-dense-row-height;
        }

        > th {
          height: $table-dense-header-height;
        }
      }
    }
  }

  &.fixed-header {
    > thead {
      > tr {
        > th {
          border-bottom: 0 !important;
          position: sticky;
          top: 0;
          z-index: 2;
          background-color: var(--theme-surface);
          box-shadow: inset 0 -1px 0 var(--theme-dividers);
        }

        &:nth-child(2) {
          > th {
            top: $table-regular-header-height;
          }
        }
      }
    }
  }
}