@use "../../style/variables" as *;

.#{$prefix}-table {
  color: var(--ty-table-color, var(--ty-color-text));
  font-size: var(--ty-table-font-size-md, var(--ty-font-size-base));

  &__wrapper {
    overflow-x: auto;
  }

  &_bordered &__wrapper {
    border: 1px solid var(--ty-table-border);
    border-radius: var(--ty-table-radius, var(--ty-border-radius));
    overflow: hidden;
  }

  &__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
  }

  &_bordered &__table {
    border-collapse: separate;
    border-spacing: 0;
  }

  &_bordered &__cell {
    border-right: 1px solid var(--ty-table-border);
    border-bottom: 1px solid var(--ty-table-border);
  }

  &_sm &__cell {
    padding: var(--ty-table-cell-padding-sm, 8px);
    font-size: var(--ty-table-font-size-sm, var(--ty-font-size-sm));
  }

  &_md &__cell {
    padding: var(--ty-table-cell-padding-md, 12px 16px);
  }

  &_lg &__cell {
    padding: var(--ty-table-cell-padding-lg, 16px);
    font-size: var(--ty-table-font-size-lg, var(--ty-font-size-lg));
  }

  &__thead_sticky {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  &__row_spacer td {
    padding: 0 !important;
    border: 0 !important;
  }

  &__thead {
    .#{$prefix}-table__cell {
      background: var(--ty-table-header-bg);
      font-weight: var(--ty-table-header-font-weight, 500);
      border-bottom: 1px solid var(--ty-table-border);
    }
  }

  &_bordered &__row .#{$prefix}-table__cell:last-child {
    border-right: 0;
  }

  &_bordered &__thead tr .#{$prefix}-table__cell:last-child {
    border-right: 0;
  }

  &_bordered &__tbody .#{$prefix}-table__row:last-child .#{$prefix}-table__cell {
    border-bottom: 0;
  }

  &__cell {
    text-align: left;
    vertical-align: middle;

    &_sortable {
      cursor: pointer;
      user-select: none;

      &:hover {
        background: var(--ty-table-cell-sortable-hover-bg, var(--ty-table-row-hover-bg));
      }
    }

    &_ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 0;
    }

    &_align-center {
      text-align: center;
    }

    &_align-right {
      text-align: right;
    }
  }

  &__tbody &__row {
    border-bottom: 1px solid var(--ty-table-border);
    transition: background 0.2s;

    &:hover {
      background: var(--ty-table-row-hover-bg);
    }

    &_selected {
      background: var(--ty-table-row-selected-bg);
    }
  }

  &__selection-col {
    width: var(--ty-table-selection-column-width, 40px);
    text-align: center;
  }

  &__col-title {
    display: inline;
  }

  &__sorter {
    display: inline-flex;
    flex-direction: column;
    margin-left: var(--ty-table-sorter-gap, 4px);
    vertical-align: middle;
    line-height: 1;
  }

  &__sorter-icon {
    font-size: var(--ty-table-sorter-icon-size, 8px);
    line-height: var(--ty-table-sorter-icon-size, 8px);
    color: var(--ty-table-sorter-icon-color, var(--ty-color-text-quaternary));

    &_active {
      color: var(--ty-table-sorter-icon-color-active, var(--ty-color-primary));
    }
  }

  &__empty-cell,
  &__loading-cell {
    text-align: center;
    padding: var(--ty-table-empty-padding, 32px) !important;
    color: var(--ty-table-empty-color, var(--ty-color-text-secondary));
  }
}