@import "../tokens/colors";
@import "../tokens/opacity";
@import "../tokens/border_radius";
@import "../tokens/spacing";
@import "./scss_partials/loading";
@import "./scss_partials/pseudo_states";
@import "./scss_partials/chrome_styles";

.pb_advanced_table {
  $border-color: 1px solid $border_light !important;

  [id$="-span"] {
    word-wrap: normal;
  }

  .bg-silver {
    background-color: lighten($silver, $opacity_7);
  }

  .bg-white {
    background-color: $white;
  }

  .full-width {
    width: 100%;
  }

  .table-header-cells:first-child {
    min-width: 180px;
  }

  .table-header-cells-active:first-child {
    color: $primary !important;
  }

  // Icons
  .button-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
  }

  .gray-icon {
    color: $text_lt_light;
    @extend %primary-color-pseudo;
  }

  .sort-button-icon {
    @extend .button-icon;
    padding: 2px;
  }

  .toggle-all-icon {
    @extend .button-icon;
    @extend %primary-color-pseudo;
    padding: 2px 0;

    &:focus-visible {
      border-radius: $border_rad_lighter;
    }
  }

  .expand-toggle-icon {
    @extend .button-icon;
    @extend %primary-color-pseudo;
    position: relative;
    bottom: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
  }

  .header-sort-button {
    @extend %primary-color-pseudo;
    width: 100%;

    &:focus-visible {
      border-radius: $border_rad_heavier;
    }
  }

  // Vertical separator
  .table-header-cells:first-child,
  td:first-child {
    box-shadow: 1px 0px 0px 0px #e4e8f0 !important;
  }

  @include chrome_styles($border-color);

  &.dark {
    .bg-white {
      background: $bg_dark_card;
    }

    .bg-silver {
      background: $bg_dark;
    }

    .table-header-cells:first-child, td:first-child {
      box-shadow: 1px 0px 0px 0px $border_dark !important;
    }

    .collapsible-trail {
      background-color: $border_dark !important;
    }

    .sort-button-icon, .header-sort-button > div {
      color: $white !important;
    }

    .gray-icon {
      color:  $text_dk_light !important;
    }

    .sticky-header {
      background-color: $bg_dark_card;
    }

    .loading-toggle-icon,
    .loading-cell {
      &::after {
        background-color: $bg_dark !important;
        background-image: linear-gradient(
          to left,
          $bg_dark 0%,
          lighten($bg_dark, 1%) 50%,
          lighten($bg_dark, 2%) 60%,
          $bg_dark 80%,
          $bg_dark 100%
        ) !important;
      }
    }
  }
}