@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";
@import "../tokens/screen_sizes";
@import "../tokens/shadows";

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

  [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;
  }

  .pb_advanced_table_header {
    > tr:not(:first-child) {
      .last-header-cell {
        border-right: 1px solid $border_light !important;
      }
      th {
        border-radius: 0px !important;
        border-width: 0 0 1px 0 !important;
      }
      th:first-child {
        border-left-width: 1px !important;
      }
    }
    th[colspan]:not([colspan="1"]) {
      border-right: 1px solid $border_light !important;
    }
  }

  .pb_advanced_table_body {
    .last-cell {
      border-right: 1px solid $border_light !important;
    }
    tr td:first-child {
      padding-left: 8px !important;
    }
    tr .pb_table_td:last-child {
      padding-right: 8px !important;
    }
  }


  .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,
  .pb_table_td:first-child {
    box-shadow: 1px 0px 0px 0px $border_light !important;
  }

  @include chrome_styles($border-color);

  tr:hover {
    position: relative;
  }

  .toggle-content {
    display: none !important;
    height: 0;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    overflow: hidden;
    transition: height 300ms, padding 300ms ease-in-out;
  }

  .toggle-content.is-visible {
    display: table-row !important;
    height: auto;
  }

  .collapsible-trail {
    background-color: $border_light;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
  }

  // Responsive Styles
  @media only screen and (max-width: $screen-xl-min) {  
    &[class*="advanced-table-responsive-scroll"] {
      border-radius: 4px;
      box-shadow: 1px 0 0 0px $border_light,
                  -1px 0 0 0px $border_light;
      display: block;
      overflow-x: auto;
      width: 100%;
      [class^=pb_table].table-sm.table-card thead tr th:first-child,
      [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
        border-left-width: 0px !important;
      }
      [class^=pb_table].table-sm.table-card thead tr th:last-child,
      [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
        border-right-width: 0px;
      }
      [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
      [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
          border-radius: 0 0 0 0;
        }
      .table-header-cells:first-child,
      td:first-child,
      .pb_table_td:first-child,
      [class*="pinned-left"] {
          background-color: $white;
          box-shadow: $shadow_deep !important;
          position: sticky !important;
          left: 0;
          z-index: 2;
      }
      .bg-silver td:first-child {
        background-color: lighten($silver, $opacity_7);
      }
      .bg-white td:first-child {
          background-color: $white;
      }
      
    }
  }
  @media only screen and (min-width: $screen-xl-min) {
    &[class*="advanced-table-responsive-scroll"] {
      overflow-x: visible;
    }
  }

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

    .bg-silver {
      background: $bg_dark;
    }

    .table-header-cells:first-child, td:first-child, .pb_table_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, .pb_th_link {
      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;
      }
    }
    // Dark Mode Responsive Styles
    @media only screen and (max-width: $screen-xl-min) {
      &[class*="advanced-table-responsive-scroll"] {
        border-radius: 4px;
        box-shadow: 1px 0 0 0px $border_dark,
                    -1px 0 0 0px $border_dark;
        display: block;
        overflow-x: scroll;
        width: 100%;
        [class^=pb_table].table-sm.table-card thead tr th:first-child,
        [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
          border-left-width: 0px;
        }
        [class^=pb_table].table-sm.table-card thead tr th:last-child,
        [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
          border-right-width: 0px;
        }
        [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
        [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
            border-radius: 0 0 0 0;
        }
        .table-header-cells:first-child,
        td:first-child,
        .pb_table_td:first-child,
        [class*="pinned-left"] {
          background: $bg_dark_card;
          border-right: $border_dark;
          box-shadow: $shadow_deep !important;
          position: sticky !important;
        }
        .bg-silver td:first-child {
          background-color: $bg_dark;
        }
        .bg-white td:first-child {
          background-color: $bg_dark_card;
        }
      }
    }
  }
}