@import '../../assets/scss/components/table/variables';

.st-table {
  $root: &;

  font-size: $st-table-font-size;
  color: $st-table-color;

  &__table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    border: $st-table-border-width solid transparent;

    &--bordered {
      #{$root}__th,
      #{$root}__td,
      #{$root}__tr:last-child #{$root}__td {
        border-width: $st-table-border-width;
        border-bottom-width: $st-table-border-width;
      }
    }
  }

  &__th,
  &__td {
    word-break: break-word;
  }

  &__td {
    padding: $st-table-td-padding;
    vertical-align: $st-table-td-vertical-align;
    border: $st-table-border-width solid $st-table-border-color;
    border-width: 0 0 $st-table-border-width;
  }

  &__th {
    padding: $st-table-td-padding;
    vertical-align: $st-table-th-vertical-align;
    border: $st-table-border-width solid $st-table-border-color;
    border-width: 0 0 $st-table-border-width;
  }

  &__th-wrap {
    display: flex;
    align-items: center;

    &--centered {
      justify-content: center;
      text-align: center;
    }
  }

  &__th-sortable {
    cursor: pointer;

    &:hover {
      border-bottom-color: $st-table-sortable-hover-border-color;
    }

    &--current {
      border-bottom-color: $st-table-sortable-current-border-color;
    }
  }

  &__tbody {
    #{$root}__tr:last-child #{$root}__td,
    #{$root}__tr:last-child #{$root}__th {
      border-bottom-width: 0;
    }
  }

  &__thead {
    #{$root}__th {
      border-bottom-width: $st-table-header-border-width;
    }
  }

  &__tfoot {
    #{$root}__th {
      border-width: $st-table-footer-border-width 0 0;
    }
  }

  &__sortable {
    display: flex;
    flex-direction: column;
  }

  &__sortable-arrow {
    display: flex;
    width: $st-table-sortable-icon-size;
    height: $st-table-sortable-icon-size;
    margin-left: 8px;
    color: $st-table-sortable-icon-color;

    &--up {
      transform: rotate(180deg);
    }
  }

  &__sortable-current {
    transition: 0.2s;

    &--desc {
      transform: rotate(180deg);
    }
  }
}