// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../../common/variables";

$table-row-height: $pt-spacing * 10 !default;
$table-row-height-small: $pt-spacing * 7.5 !default;
$table-border-width: 1px !default;
$table-border-color: $pt-divider-black !default;
$dark-table-border-color: $pt-dark-divider-white !default;

// placeholder for extending inside running-text (see typography)
%html-table {
  border-spacing: 0;
  font-size: $pt-font-size;

  th,
  td {
    padding: centered-text($table-row-height);
    text-align: left;
    vertical-align: top;
  }

  th {
    color: $pt-heading-color;
    font-weight: 600;
  }

  td {
    color: $pt-text-color;
  }

  tbody tr:first-child,
  tfoot tr:first-child {
    th,
    td {
      box-shadow: inset 0 $table-border-width 0 0 $table-border-color;
    }
  }

  // a bunch of deep compound selectors ahead, but there's not really a better way to do this right now
  /* stylelint-disable selector-max-compound-selectors */
  .#{$ns}-dark & {
    th {
      color: $pt-dark-heading-color;
    }

    td {
      color: $pt-dark-text-color;
    }

    tbody tr:first-child,
    tfoot tr:first-child {
      th,
      td {
        box-shadow: inset 0 $table-border-width 0 0 $dark-table-border-color;
      }
    }
  }
  /* stylelint-enable selector-max-compound-selectors */
}

table.#{$ns}-html-table {
  @extend %html-table;

  &.#{$ns}-compact {
    $small-vertical-padding: centered-text($table-row-height-small);

    th,
    td {
      padding-bottom: $small-vertical-padding;
      padding-top: $small-vertical-padding;
    }
  }

  &.#{$ns}-html-table-striped {
    tbody tr:nth-child(odd) td {
      background: rgba($gray3, 0.15);
    }
  }

  // Borders are applied as box-shadows (at the top and left borders of a cell) for better color control.
  &.#{$ns}-html-table-bordered {
    th:not(:first-child) {
      box-shadow: inset $table-border-width 0 0 0 $table-border-color;

      @media (forced-colors: active) and (prefers-color-scheme: dark) {
        border-left: 1px solid $pt-high-contrast-mode-border-color;
      }
    }

    tbody tr td,
    tfoot tr td {
      box-shadow: inset 0 $table-border-width 0 0 $table-border-color;

      &:not(:first-child) {
        box-shadow: inset $table-border-width $table-border-width 0 0 $table-border-color;

        @media (forced-colors: active) and (prefers-color-scheme: dark) {
          border-left: 1px solid $pt-high-contrast-mode-border-color;
          border-top: 1px solid $pt-high-contrast-mode-border-color;
        }
      }

      @media (forced-colors: active) and (prefers-color-scheme: dark) {
        border-top: 1px solid $pt-high-contrast-mode-border-color;
      }
    }

    &.#{$ns}-html-table-striped {
      tbody tr:not(:first-child) td {
        box-shadow: none;

        &:not(:first-child) {
          box-shadow: inset $table-border-width 0 0 0 $table-border-color;
        }
      }
    }
  }

  &.#{$ns}-interactive {
    tbody tr {
      &:hover td {
        background-color: rgba($gray3, 0.3);
        cursor: pointer;

        @media (forced-colors: active) and (prefers-color-scheme: dark) {
          background-color: $pt-high-contrast-mode-active-background-color;
        }
      }

      &:active td {
        background-color: rgba($gray3, 0.35);

        @media (forced-colors: active) and (prefers-color-scheme: dark) {
          background-color: $pt-high-contrast-mode-active-background-color;
        }
      }
    }
  }

  .#{$ns}-dark & {
    /* stylelint-disable selector-max-compound-selectors */
    &.#{$ns}-html-table-striped {
      tbody tr:nth-child(odd) td {
        background: rgba($gray1, 0.15);
      }
    }

    // Borders are applied as box-shadows (at the top and left borders of a cell) for better color control.
    &.#{$ns}-html-table-bordered {
      th:not(:first-child) {
        box-shadow: inset $table-border-width 0 0 0 $dark-table-border-color;
      }

      tbody tr td,
      tfoot tr td {
        box-shadow: inset 0 $table-border-width 0 0 $dark-table-border-color;

        &:not(:first-child) {
          box-shadow: inset $table-border-width $table-border-width 0 0 $dark-table-border-color;
        }
      }

      &.#{$ns}-html-table-striped {
        tbody tr:not(:first-child) td {
          box-shadow: inset $table-border-width 0 0 0 $dark-table-border-color;

          // easier than the alternative...
          /* stylelint-disable max-nesting-depth */
          &:first-child {
            box-shadow: none;
          }
        }
      }
    }

    &.#{$ns}-interactive {
      tbody tr {
        &:hover td {
          background-color: rgba($gray1, 0.3);
          cursor: pointer;
        }

        &:active td {
          background-color: rgba($gray1, 0.4);
        }
      }
    }
    /* stylelint-enable selector-max-compound-selectors */
  }
}