@use "src/styles/variables" as *;

.vm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: -$padding-medium;
  background-color: $color-background-block;

  &__row {
    background-color: $color-background-block;
    transition: background-color 200ms ease;

    &:hover:not(&_header) {
      background-color: $color-hover-black;
    }

    &_header {
      position: relative;
      z-index: 2;
    }

    &_selected {
      background-color: rgba($color-dodger-blue, 0.05);
    }
  }

  &-cell {
    padding: 4px;
    border-bottom: $border-divider;
    vertical-align: top;
    line-height: 1.5;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;

    &__content {
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }

    &_sort {
      cursor: pointer;

      &:hover {
        background-color: $color-hover-black;
      }
    }

    &_header {
      font-weight: bold;
      text-align: left;
      overflow-wrap: normal;
    }

    &_gray {
      color: $color-text;
      opacity: 0.4;
    }

    &_right {
      text-align: right;
    }

    &_right &__content {
      justify-content: flex-end;
    }

    &_no-wrap {
      white-space: nowrap;
    }

    &_no-padding {
      padding: 0;
    }

    &_pre {
      white-space: pre-wrap;
    }

    &_compact {
      white-space: nowrap;
      width: 100px;
    }

    &_empty {
      color: $color-text-secondary;
      font-style: italic;
    }
  }

  &__sort-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    margin: 0 $padding-small;
    opacity: 0.4;
    transition: opacity 200ms ease, transform 200ms ease-in-out;

    &_active {
      opacity: 1;
    }

    &_desc {
      transform: rotate(180deg);
    }
  }
}
