@import (reference) "./../styles/less/ring.less";

.np-table {
  @table-background-color: var(--color-background-neutral);
  @table-border-width: var(--size-8);
  @table-border-radius: var(--radius-small);
  @table-border-radius: var(--radius-medium);
  @table-inner-border-radius: 10px;
  @table-cell-border-radius: 6px;

  @table-spacing-sm: var(--size-4);
  @table-spacing-md: var(--size-8);
  @table-spacing-lg: var(--size-12);
  @table-spacing-xl: var(--size-16);

  @header-min-width: 160px;
  @header-min-width-loading: calc(@header-min-width * 2);

  width: 100%;
  background-color: transparent;

  &-outer-container {
    border-radius: @table-border-radius;

    .focus-ring();
    &:focus-visible {
      outline-offset: 0;
    }

    &--center {
      margin-right: auto;
      margin-left: auto;

      @media (--screen-sm-max) {
        width: 100%;
      }
    }

    &--full-width {
      width: 100%;
    }
  }

  &-container {
    padding: @table-spacing-md;
    background-color: @table-background-color;
    border-radius: inherit;

    &--loading {
      .np-table-inner-container {
        background-image: none;
      }
    }
  }

  &-inner-container {
    background-image:
      linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)),
      linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)),
      linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),
      linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-color: var(--color-contrast-overlay);
    background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
    background-attachment: local, local, scroll, scroll;
    overflow-x: auto;
    border-radius: @table-inner-border-radius;

    .np-theme-personal--dark & {
      background-image:
        linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)),
        linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)),
        linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)),
        linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    }
  }

  &-row {
    &:last-child {
      .np-table-cell {
        &:first-child {
          border-bottom-left-radius: @table-inner-border-radius;
        }
        &:last-child {
          border-bottom-right-radius: @table-inner-border-radius;
        }
      }
    }

    .focus-ring();
    &:focus-visible {
      outline-offset: -2px;
      border-radius: @table-cell-border-radius;
    }

    &--clickable {
      .np-table-cell {
        position: relative;
        &:before {
          display: none;
          content: "";
          position: absolute;
          height: 100%;
          width: 100%;
          top: 0;
          left: 0;
          background-color: var(--color-background-screen-hover);
        }

        &:first-child,
        &:last-child {
          &:before {
            width: calc(100% - @table-spacing-md);
          }
        }

        &:first-child {
          &:before {
            left: @table-spacing-md;
            border-top-left-radius: @table-cell-border-radius;
            border-bottom-left-radius: @table-cell-border-radius;
          }
        }

        &:last-child {
          &:before {
            border-top-right-radius: @table-cell-border-radius;
            border-bottom-right-radius: @table-cell-border-radius;
          }
        }
      }

      &:hover {
        .np-table-cell:before {
          display: block;
        }

        &:focus-visible {
          .np-table-cell {
            &:first-child,
            &:last-child {
              &:before {
                width: 100%;
              }
            }

            &:first-child {
              &:before {
                left: 0;
              }
            }
          }
        }
      }
    }

    &--cosmetic {
      .np-table-cell {
        height: @table-spacing-md;
        padding: 0;
      }
    }
  }

  &-header,
  &-cell {
    padding: 0;

    &:first-child {
      padding-left: @table-spacing-xl;

      .np-table-header-content,
      .np-table-cell-content {
        padding-left: 0;
      }
    }

    &:last-child {
      padding-right: @table-spacing-xl;

      .np-table-header-content,
      .np-table-cell-content {
        padding-right: 0;
      }
    }
  }

  &-header.np-table-header--right,
  &-cell.np-table-cell--right {
    > .np-text-body-default {
      text-align: right;
    }
  }

  &-header.np-table-header--right + .np-table-header:not(.np-table-header--right),
  &-cell.np-table-cell--right + .np-table-cell:not(.np-table-cell--right) {
    padding-left: calc(@table-spacing-md + @table-spacing-lg);
  }

  &-header.np-table-header--right .np-table-header-content,
  &-cell.np-table-cell--right .np-table-content {
    justify-content: end;
  }

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

  &-header {
    min-width: @header-min-width;
    padding-right: @table-spacing-md;
    padding-bottom: @table-spacing-md;
    padding-left: @table-spacing-md;
    background-color: var(--color-background-neutral);
    color: var(--color-interactive-primary);

    &-content {
      padding-top: 5px;
      padding-bottom: 5px;
      white-space: nowrap;
      line-height: var(--line-height-22);
      letter-spacing: var(--letter-spacing-sm);
    }

    &--error {
      color: var(--color-sentiment-negative);
    }

    &--action {
      min-width: 0;
      padding: 0;
    }
  }

  &-cell {
    padding: @table-spacing-xl @table-spacing-md;
    position: relative;

    &--cosmetic {
      padding: 0;
    }

    &--primary {
      min-width: 200px;
    }

    &--currency {
      .np-text-body-default {
        white-space: nowrap;
      }
    }

    .tw-chevron {
      margin-left: @table-spacing-md;
    }

    &-separator {
      margin-top: @table-spacing-sm;
      margin-bottom: @table-spacing-sm;
      height: 1px;
      background-color: @table-background-color;
      padding: 0;
    }

    .np-text-body-default-bold {
      display: flex;
      align-items: center;
      color: var(--color-content-primary);
      white-space: nowrap;
    }

    .np-table-content--success {
      color: var(--color-sentiment-positive);
    }

    .np-table-content--error {
      color: var(--color-sentiment-negative);
    }

    .tw-loader {
      // The loading area of the table should equals to 5 rows of the table for huge screens and 3 rows for small screens
      margin: 150px auto;
      @media (--screen-400-zoom) {
        margin-top: 70px;
        margin-bottom: 70px;
      }
    }
  }

  &-content {
    gap: @table-spacing-lg;

    &--success,
    &--error {
      gap: @table-spacing-sm;

      .np-table-content-text {
        line-height: 155%;
      }
    }

    &-media {
      flex-shrink: 0;
    }
    
    &-body {
      display: flex;
      flex-direction: column;
      font-size: var(--font-size-12);
      color: var(--color-content-tertiary);
    }

    &--reversed {
      flex-direction: row-reverse;

      .np-table-content-body {
        align-items: end;
      }
    }
  }

  &-empty-data {
    display: flex;
    align-items: center;

    .status-circle {
      margin-right: @table-spacing-lg;
    }
  }
}